Semantic HTML Elements

[oldoc63]

• The quickest way of improving accessibility for screen readers is to use the appropriate tags for a given task.

• For example, developers should wrap a navigation bar in a header tag. Although the navigation bar could be wrapped in a div element with a class of header, the native semantics of a header tag allow someone using a screen reader to understand and navigate a web page more efficiently.

  <div id="header">
  <!-- Header Elements -->
  </div>

• In the example above, header content is wrapped in a div tag with the ID header. While this is valid HTML, an individual using a screen reader will not understand the purpose of the div is and, instead, will have to piece the web page together as child elements are read out loud to them.

• Native semantics of a tag describe a tag’s intended purpose. For example, the header tag is intended to contain introductory and navigational elements such as a logo, links, or a search bar.

  <header>
  <!--Header Elements-->
  </header>

• In the example above, the HTML will render the same exact content present in the first example. However, this example uses the correct semantic element (

  ), which allows an individual using a screen reader to easily identify the purpose of the elements inside of the header.

• Here is a list of all the semantic HTML elements that exist.

[oldoc63]

1. The header of this website is wrapped in a div with the id header. In index.html, remove this div and wrap this section with opening and closing

   tags instead.

2. The CSS no longer functions correctly because we changed the name of the element. In style.css, change the #header selector to header.

3. The navigation of this website is wrapped in a div with the id nav. In index.html, remove this div and wrap this section with opening and closing <nav> tags instead.

4. Once again, we’ll have to update the CSS stylesheet since we modified the HTML. In style.css, change all three #nav selectors to nav.

5. The footer of this website is wrapped in a div with the id footer. In index.html, remove this div and wrap this section with opening and closing

   tags instead.

6. Let’s update the CSS stylesheet one more time. In style.css, change both #footer selectors to footer.