This is the h1 element. It represents the most important piece of content on the page.

A p element describes a paragraph of text. Paragraphs break up text into collected blocks of associated sentences. You may have noticed the e element here. We just made that up. It's so that we can style the element tag name and make it stand out. try your best to ignore them. Use the radio button above to highlight the different the elements of different display type!

This is the h2 element. It represents a level of importance one below the heading level 1

You may use additional levels of heading to break the article into meaninful sections. You may have many equally important levels of heading depending on the subject matter and the manner in which the content was designed.

The h1, p, h2, ul, and li elements are all "Block" level elements. This means that they come into the world with a specific set of defaults. Generally, they are display: block;, and width: 100%;. They take up the full width of their parent element and generally stack like a layered cake.

There are also interactive form elements such as checkboxes and 'radio' buttons. These get a little more complex and so, for now - just know that most of them are inline elements to start out. The form elements helps describe user interactions and collects the various input elements together.

This is and equally important h2 element.

Many times, there is an introduction-like paragraph below a heading to set the stage for the following content. You may have a list

• Lists are great for listing things.
• Their name really says it all.
• The ol and ul elements describe an "ordered" or "unordered" list.
• The li element describes the list item itself.
• Each "child" element (in this case the li) will be formatted with 1 indent.
• These elements are "nested" and should appear so by way of formatting to help the humans keep track of things.

When you require a subheading for content within the level 2 context, you can use this level 3 heading. The h3 element does the trick.

Inside a block-level content element such as a p, you can employ the various "inline" elements. These are elements which come into being with a different set of default properties. Links are inline. You can use emphasis or strong emphasis. You can use that code element you saw up above - and a whole bunch of other useful ways to describle parts of a heading or paragraph like the mark element.

You could even break up a sentence into arbitrary spans or text like this and this - even down to the very characters.

"Inline" elements fall in a row and wrap around as needed.

You could use an h3 as a heading for a list of "Articles."

1. Lists aren't just about bullets.

   They can be filled with whatever content you like.

   However, you must note that only list items belong as direct children of the list itself

2. You could have a list of forms.

   You could have a list of lists!

Also! Remember that just because the browser creators decided that h1 and h2 elements were visually "large" and "emboldened" - doesn't mean they are. These elements are for describing. That does not mean visually.

Pretend that you are writing your HTML for the computer. The content is for the human... but the markup is to describe it to the computer. What if Siri or Alexa needs to read it? They don't care how it looks. Write the HTML properly, and then worry about the human eyes in the CSS.

But hey, it'll never be perfect. You'll always end up taking on a few generic content divisions.