CS130: Spring 2022

Tools and Technologies of the World Wide Web

CS130: Spring 2022

HTML Resources > 7. Semantic Tags

Reference Videos & Readings

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