HTML Resources > 7. Semantic Tags

Reference Videos & Readings

• Suggested LinkedIn Learning Videos:
  • The value of structure (2:48)
  • Controlling document outlines (10:40)
• Optional LinkedIn Learning Videos
  • The nav element (5:32)
  • The article element (5:19)
  • The section element (5:12)
  • The div element (6:04)
• W3Schools Reference:
  • http://www.w3schools.com/html/html5_semantic_elements.asp
  • http://www.w3schools.com/html/html_layout.asp

In order to access the LinkedIn content, please sign in with your NU account.

Sign into LinkedIn Learning

Semantic elements clearly describe the purpose of the tag in the tag itself, and are new in HTML5. <header>, <nav>, <section>, <article>, <footer>, <aside>, etc. are examples of semantic tags. Semantic tags are useful for grouping your page into logical sections that are easy for a screen reader or web crawler to interpret.

Example 1: Simple

|---------------------------------|
|             <header>            |
|-----------|---------------------|
| <nav>     | <section>           |
|-----------|---------------------|
|             <footer>            |
|---------------------------------|

Example 2: More Complicated

|---------------------------------|
|             <header>            |
|---------------------------------|
|               <nav>             |
|-----------------|---------------|
| <section>       |               |
|-----------------| <aside>       |
| <article>       |               |
|-----------------|---------------|
|             <footer>            |
|---------------------------------|