Structure and Semantics

Revisiting HTML Structure

Up until now, we've largely relied on <div> elements to provide structure and organization to our pages. While we have used some elements like <header>, it is now time for us to begin more properly structuring our pages.

Let's begin with a basic set of elements that I've not used much if at all up to this point:

• <main>

  Main section of the html document. Shouldn't contain repeated elements from multiple pages.

• <span>

  An inline container of sorts, usually used to target a portion of a larger piece of content for styling or scripting. Think of it as going hand in hand with div. Div is our block container, while span is our inline container.

• <section>

  A grouping of content, usually thematic and identified by a heading. Keep in mind that if the grouping only exists for layout or styling, go with div instead.

• <article>

  Article is meant to contain a piece of content that can stand on its own independently from the rest of the page. We can ask ourselves, if we removed this piece and showed it somewhere else, would it still make sense as a complete piece of content? If the answer is yes, use the article element.

• <aside> A piece of content that is related to the main content but more supplementary than required. Pretty much in-line with the definition of aside.
• <figure> and <figcaption>

  A figure is a distinct unit of content that is referenced from or supports surrounding discussion. For example, in our lessons we include code examples. They are great examples of content that could be wrapped in figure elements. Note that a figcaption is not mandatory, but for many figures a caption may be beneficial to have.