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

See the Pen by vanwars (@vanwars) on CodePen.

Example 2: More Complicated

|---------------------------------|
|             <header>            |
|---------------------------------|
|              <nav>              |
|-----------------|---------------|
|     <section>   |               |
|-----------------|    <aside>    |
|     <article>   |               |
|-----------------|---------------|
|             <footer>            | 
|---------------------------------|

See the Pen by vanwars (@vanwars) on CodePen.

results matching ""

    No results matching ""