HTML Basics

Nesting Elements

It is recommended that you first read Elements, Tags, and Attributes

You should first read and know about the basic usage of simple elements before moving on. This will make it easier to understand how to nest elements inside of each other.

You already learned that you can put content inside of tags. This content can be either text or something completely different like one or more HTML elements. You can think of layering multiple layers of HTML elements inside of each other like Matryoshka dolls. Let's see how this looks like in practice.

A simple example is the formatting of bold and italic: some text or like this some text

Keep in mind if you want to apply to tags to the same text, you have to wrap them like this some text or like this some text but not like this some nor like this some! A tag must always close first.

Ordered and unordered lists are always represented with the a list wrapper element and one or multiple list items.

  <ol>
    <li>Gold Medalist</li>
    <li>Silver Medalist</li>
    <li>Bronze Medalist</li>
  </ol>

  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
  </ul>

      <article>
        <h1>Blog</h1>
        <ul>
          <li>Home</li>
          <li>Blog</li>
  		<li>About</li>
        </ul>
      </article>

tags_and_elements

minimal_html_skeleton

Sitemap