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: