10. Semantic elements

Sto znaci semantic?

Zasto je bitna semanticnost?

Koji su ne-semanticni elementi?

Koji su semanticni elementi?

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

<main>

<main> Content </main>

Samo 1 <main> na stranici

Ne bi trebao imati elemente u sebi koji se ponavaljaju na drugim stranicama

<header>

<header> Content </header>

Example

<nav>

<nav> Links </nav>

Example

Nav in header

Example

<section>

<section> 
  <h2>
  	Heading 2    
  </h2>
</section>

Example

<article>

<article> Content </article>

Example

<aside>

<aside> Content </aside>

Example

<footer>

<footer> Footer content </footer>

Example

Primjer nestinga

https://jsfiddle.net/tonkec/qub059e4/26/

Zadatak

1. napravi layout s nekoliko semanticnih elemenata

2. iskoristi <main> element

3. iskoristi <nav> element

4. napravi jedan <section> element

5. stavi <article> element u <section> element

Zadaća

Procitaj clanak

https://www.freecodecamp.org/news/semantic-html5-elements/