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

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>            |
|---------------------------------|