Posted on

HTML5: Structure, Syntax, and Semantics

Semantics – The process of adding meaning through language.

Web Semantics – Web semantics is the process of using web languages and syntaxes to add meaning to content. Web semantics allow us to control the organization and display of our content.

Although each site is unique, most pages contain commonly recognized page elements such as navigation, search capability, branding region, footer and main content. By using consistent semantic markup to identify these common elements, we make it easy for user agents to identify and properly present those elements to viewers. This may seem trivial, but in some cases, such as with assistive technology, identifying content semantically is critical to ensuring functionality and providing easy access to page content.

A content which is semantically marked up gets indexed easily by automated services like search engines thereby making it easier for users to find and access content. Simply put, it make the content more relevant.

It’s an incredibly an important part of the modern web and can have a huge impact on the effectiveness of the website.

HTML5 and Semantics

  • Improving semantics was a specific focus of HTML5
  • New semantic elements expand markup capabilities
  • New document outline rules enhance document structure
  • New content models give context for when certain

HTML5 Specification

HTML5 Content Models

  • Metadata content
  • Flow content
  • Sectioning content
  • Heading content
  • Phrasing content
  • Embedded content
  • Interactive content

HTML5 Document Structure – A series of sections and subsections that can be visualized as a document outline. A solid document structure not only makes the content easier to read, it also makes it easier for search engines, screen readers, and other user agents to navigate and find relevant information.

HTML5 Sectioning Elements – article, aside, nav and section.

HTML5 Semantic Grouping Elements – footer, header and main.

Checking Document Structure