coffee glasses and pen sitting on paper and desk

HTML5 Syntax and Semantics: Why They Matter

Use semantics to structure HTML5 source logically and make your website parser friendly

Many web developers new to HTML5 initially ask the question, What are the new tags or elements in HTML5? Some of the new elements (e.g.,

Figure 1: HTML5 semantic elements

Element

Level

Purpose

Block

Independent content, such as a blog post or article

Block

Content slightly related to primary content on page

Block

For grouping standalone content, such as video or image

Text

For use with

, (optionally) used to provide caption

Block

Providing data such as author, copyright

Block

Introductory headings; could include navigation

Block

For grouping

to

Block

Navigation—typically site-level

Text

Text to be referenced or highlighted

Block

Grouping of content usually with a heading, similar to chapters

Text

For date and/or time representation

In a previous article in this series, "Three of the Most Important Basic Elements in HTML5," we introduced the concept of semantic tags by considering the

,