Programuoki Programuoki
Tema
/
HTML ir CSS pagrindai HTML
Pamoka 3 / 7 Semantinė HTML — prasmė, ne dėžės ~55 min
Kodas

index.html — semantinė struktūra

Dabar perstatyk <body> iš tinkamų elementų. Tavo puslapis kol kas yra trys pavieniai žymenys — antraštė, pastraipa, nuoroda. Jie nedingsta: antraštė tampa hero bloku, pastraipa — jo įžangine eilute, o vienintelė NASA nuoroda išauga į tikrą navigacijos juostą. Aplink juos pridedi du dalykus, kurių reikia tikram puslapiui — <main> orientyrą ir paveikslėlių galeriją. Kodo stulpelyje — visas failas; štai ką daro kiekviena dalis.

Aprašesnė antraštė

Viena eilutė <head> viduje irgi paauga. <title>Cosmos</title> tampa <title>Cosmos — Astronomy Picture of the Day</title> — tai tekstas, kurį naršyklė uždeda ant kortelės, paieškos sistema rodo kaip rezultato antraštę, o skaitytojas mato pasižymėdamas puslapį. Plikas produkto pavadinimas nė vienam iš jų nepasako, kas yra puslapis; pilnesnė antraštė pasako. Tai mažas pakeitimas, bet irgi semantika: antraštė yra puslapio vardas viskam, kas yra už puslapio ribų.

Pirmiausia — „praleidimo" nuoroda

<a href="#main-content" class="skip-link">Skip to main content</a>

Ji sąmoningai yra pirmas elementas <body> viduje — klaviatūros naudotojas turi ją pasiekti anksčiau už viską kita. Jos href rodo į #main-content — tą id, kurį uždėsi ant <main>.

<nav class="navbar" aria-label="Main navigation">
  <a href="#home" class="brand">🌌 Cosmos</a>
  <div class="nav-links">
    <a href="#home" class="nav-link active">Home</a>
    <a href="#gallery" class="nav-link">Gallery</a>
  </div>
</nav>

<nav> orientyras laiko svetainės nuorodas. Kiekviena jų — <a>, nes kiekviena kažkur nuveda — ir čia kiekvienas href yra vidinė puslapio nuoroda (anchor): #gallery peršoka prie skilties su id="gallery" žemiau, #home — atgal į viršų. Inkaras į id yra grynas HTML; jam nereikia nei maršrutizatoriaus, nei skripto. Kurk nuorodą tik ten, kur vieta egzistuoja — nuoroda į nesukurtą puslapį yra būtent tas negyvas valdiklis, kurio mokaisi vengti, tad čia nėra „Collection", kol nėra kolekcijos, kurią rodyti. aria-label="Main navigation" įvardija orientyrą, tad ekrano skaitytuvas praneša „Main navigation", o ne bevardę sritį. Dabartinis puslapis turi class="nav-link active" — būtent taip pažymi „tu esi čia" statiškai, be jokio skripto.

Pagrindinė sritis ir hero

<main id="main-content" tabindex="-1">
  <section aria-label="Home">
    <div class="hero-text">
      <h1>Explore the universe</h1>
      <p class="hero-sub">Every day NASA publishes a photograph…</p>
    </div>
  </section>

Viskas, kas nėra „rėmai", gyvena viename <main>. Jo id — „praleidimo" nuorodos taikinys; tabindex="-1" leidžia naršyklei perkelti fokusą į jį, kai nuoroda suveikia. Tavo pradinė antraštė ir pastraipa persikelia čia nepakitusios — tie patys žodžiai, tik dabar suvynioti į <section> su prieinamu pavadinimu.

Galerija

  <section aria-label="Latest pictures">
    <div class="grid">
      <article class="picture-card">
        <div class="card-header">
          <img src="https://apod.nasa.gov/apod/image/1604/DustAngelNebula_rba1024.jpg"
               alt="A Dust Angel Nebula" loading="lazy">
          <button class="fav-btn" title="Save to collection"
                  aria-label="Save to collection">♡</button>
        </div>
        <div class="card-body">
          <h2>A Dust Angel Nebula</h2>
          <p class="picture-date">2016-04-28</p>
        </div>
      </article>
      <!-- dar dvi kortelės, tokia pati forma -->
    </div>
  </section>
</main>

Kiekvienas paveikslėlis — <article>, savarankiškas vienetas, kuris turėtų prasmę ir atskirai. Jo viduje:

  • <img> neša alt (ką rodo paveikslėlis — tiems, kas jo nemato) ir loading="lazy" (naršyklė parsisiunčia jį tik tada, kai jis netrukus pasirodys ekrane). Į abu gilinsiesi kliento dalies takelyje; čia tiesiog pasirūpink, kad jie būtų ir būtų sąžiningi.
  • „mėgstamų" valdiklis — tikras <button> iš praėjusio žingsnio: fokusuojamas, valdomas klaviatūra ir įvardytas aria-label, kad nebūtų perskaitytas tik kaip „♡".
  • pavadinimas — <h2>, data — pastraipa: struktūra, ne dekoracija.

Trijų kortelių pakanka formai įrodyti. Kol kas jos rikiuojasi viena po kitos; jų sudėliojimas į responsyvią tinklelio galeriją — vėlesnė pamoka, ir būtent todėl konteineris jau turi class="grid", kuris jos laukia.

Atkreipk dėmesį, kas neišliko: buvęs pliką <a href="https://apod.nasa.gov/apod/"> dingo — jo darbą dabar atlieka navigacija ir kortelės, tad tempti jį kaip pavienę nuorodą būtų tik šiukšlė. Pašalinti jį sąmoningai — gerai; palikti našlaičius žymenis „dėl visa ko" — būtent taip puslapiai ir supūva.