HTML Elements and Semantics

In the second lesson of Shay Howe’s HTML and CSS tutorial, he begins going in more depth about HTML by showing which HTML elements are best used to display different types of content, how they’re visually displayed on a web page, as well as what different elements mean semantically.

Throughout the tutorial, Howe describes several different HTML elements and explains what their purpose is. He also displays a live demo of his examples which is very useful in understanding exactly what each element looks like visually. The list of elements that he describes and their purposes are as follows:

  • <div>: division – a block-level element that is commonly used to identify large groupings of content; helps to build a web page’s layout and design.
  • <span> – an inline-level element commonly used to identify smaller groupings of text within a block-level element.
  • <h1-h6>: heading – block-level elements with six different levels. These help to quickly break up content and establish hierarchy.
  • <p>: paragraph – blocks of text visually separated from adjacent blocks (i.e. vertical blank space, first-line indentation, etc.)
  • <b>: bold – stylistically offsets text.
  • <strong> – places a strong importance on text by bolding it.
  • <i>: italicize – conveys text in an alternative voice or tone by slanting it.
  • <em>: emphasis – places a stressed emphasis on text.

HTML5 introduced new structurally based elements in order to give meaning to the organization of our pages and improve structural semantics:

  • <header> – used to identify the top of a page, article, section, etc.
  • <nav>: navigation – identifies a section of major navigational links on a page.
  • <article> – used to identify a section of independent, self-contained content that may be independently distributed or reused.
  • <section> – used to identify a thematic grouping of content, usually includes a heading.
  • <aside> – holds content that is related to the main content around it, but not central to the flow of it.
  • <footer> – identifies the closing or end of a page, article, section, etc.

Howe emphasizes the importance of understanding the semantic difference of elements. For example, even though the elements <strong> and <b> both create the same bold text effect, they’re semantically different. The <strong> element is used to give strong importance to text while the <b> element simply stylistically offsets text.

The reason I’m writing about this topic because it’s very relevant to our final project. Prior to reading this I hadn’t even considered the semantics of elements. Also it’s useful to understand how to use each element. In the future I’ll be able to use what I learned to better organize pages and improve its structural semantics. I’ll also be able to apply this to my final project, so this lesson has been very useful to me.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: