Placing one HTML tag inside another HTML tag is called "nesting".

<p>Hello, my name is <b>Jordan</b>, and I am a teacher at <a href="http://colum.edu">Columbia College Chicago</a>.</p>
<ul>
	<li>Item One</li>
	<li><s>Item Two</s></li>
	<li><img src="photo.jpg" alt=""></li>
</ul>

Keep in mind that a nested tag must be fully contained within its "parent" tag. This means that all nested tags must have both their opening and closing tags written before any "parent" closing tags. For example, this is incorrect:

<p>Lorem ipsum dolor <i>sit amet</p><i>

...instead, it should look like this:

<p>Lorem ipsum dolor <i>sit amet</i><p>

Most inline-level tags can be nested within other HTML tags, while most block-level tags can not be nested. However, there are some exceptions to this rule:

  • "Self-closing" tags (<img>, <br>, <hr>) can never have any other tags nested inside.
  • Nesting a <b> inside another <b>, an <i> inside another <i>, an <s> inside another <s>, or an <img> inside any of those 3 is technically possible, but doesn't really make sense so you shouldn't do it.
  • Some block-level tags can be nested:
    • <ul> or <ol> can have nested <li> tags (in fact, <li> is the only tag that can be nested within <ul> and <ol>)
    • <li> can have pretty much any other tag (inline-level or block-level) nested within, except other <li> tags (because those can only be nested within <ul> or <ol>).
    • <div> can have any other tag nested inside (this is the purpose of a <div> tag -- to group other tags together for visual styling)

Last but not least, you should avoid having text content and inline-level tags "free-floating" in your document -- instead, text and inline-level tags should always be nested within a block-level tag. When in doubt, use a paragraph (<p>).


Here is a handy chart showing which tags can be nested within other tags:

... be inside this tag?
inline-level tags block-level tags
b i s br a img span p h1 h2 h3 h4 ul ol li hr div
Can this tag...
inline-level tags
b no* yes yes no yes no yes yes yes yes yes yes no no yes no yes
i yes no* yes no yes no yes yes yes yes yes yes no no yes no yes
s yes yes no* no yes no yes yes yes yes yes yes no no yes no yes
br yes yes yes no yes no yes yes yes yes yes yes no no yes no yes
a yes yes yes no yes no yes yes yes yes yes yes no no yes no yes
img no* no* no* no yes no yes yes yes yes yes yes no no yes no yes
span yes yes yes no yes no yes yes yes yes yes yes no no yes no yes
block-level tags
p no no no no no no no no no no no no no no yes no yes
h1 no no no no no no no no no no no no no no no* no yes
h2 no no no no no no no no no no no no no no no* no yes
h3 no no no no no no no no no no no no no no no* no yes
h4 no no no no no no no no no no no no no no no* no yes
ul no no no no no no no no no no no no no no yes no yes
ol no no no no no no no no no no no no no no yes no yes
li no no no no no no no no no no no no yes yes no no no
hr no no no no no no no no no no no no no no yes no yes
div no no no no no no no no no no no no no no yes no yes

no* = technically yes, but practically no