CSCI 344: Spring 2023

Advanced Web Technology

CSCI 344: Spring 2023

UNCA Logo

HTML Resources > 7. Semantic Tags

Semantic elements both (a) clearly describe the purpose of the tag in the tag itself, and (b) help group content sections together. Examples of semantic tags include <header>, <nav>, <section>, <article>, <footer>, <aside>, etc. 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>            |
|---------------------------------|

Reference Videos & Readings

W3Schools Reference: