HTML Resources > 7. Semantic Tags
Reference Videos & Readings
- W3Schools Reference:
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> |
|---------------------------------|