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/

Made with Slides.com