Tärkeä periaate verkkosuunnittelussa on ajatus käyttää HTML-elementtejä osoittamaan, mitkä ne todellisuudessa ovat, sen sijaan, miten ne voivat näkyä selaimessa oletuksena. Tätä kutsutaan semanttisen HTML: n käyttämiseksi.

Mikä on semanttinen HTML?

Semanttinen HTML tai semanttinen merkintä on HTML, joka tuo verkkosivulle merkityksen eikä vain esitystä. Esimerkiksi a

 tag osoittaa, että oheinen teksti on kappale. Tämä on sekä semanttista että esitystapaa, koska ihmiset tietävät, mitä kappaleet ovat, ja selaimet osaavat näyttää ne.

Tämän yhtälön kääntöpuolella on tageja, kuten  ja  eivät ole semanttisia. Ne määrittelevät vain tekstin ulkoasun (lihavoitu tai kursivoitu), eivätkä anna merkinnälle mitään muuta merkitystä.

Esimerkkejä semanttisista HTML-tunnisteista ovat:

• Otsikkotunnisteet

   kautta

Standardien mukaisen verkkosivuston rakentamisessa on käytettävä paljon enemmän semanttisia HTML-tunnisteita.

Miksi sinun pitäisi välittää semantiikasta

Semanttisen HTML: n kirjoittamisen etu johtuu siitä, minkä pitäisi olla minkä tahansa verkkosivun ohjaava tavoite: halu kommunikoida. Lisäämällä asiakirjaan semanttimerkkejä annat lisätietoja asiakirjasta, mikä auttaa viestinnässä. Erityisesti semanttiset tunnisteet tekevät selaimelle selväksi sivun ja sen sisällön merkityksen. Tämä selkeys välitetään myös hakukoneille, varmistaen, että oikeat sivut toimitetaan oikeille kyselyille.

Semanttiset HTML-tunnisteet tarjoavat tietoja näiden tunnisteiden sisällöstä, jotka ylittävät sen, miltä ne näyttävät sivulta. Teksti, joka on suljettu  selain tunnistaa tunnisteen välittömästi tietyntyyppisenä koodauskielenä. Sen sijaan, että yrität tehdä kyseisen koodin, selain ymmärtää, että käytät kyseistä tekstiä koodin esimerkkinä artikkelin tai online-opetusohjelman tarkoituksiin.

Semanttisten tunnisteiden käyttäminen antaa sinulle paljon enemmän koukkuja myös sisällön muotoiluun. Ehkä tänään haluat mieluummin, että koodinäytteet näkyvät selaimen oletustyylillä, mutta huomenna saatat haluta soittaa ne harmaalla taustavärillä; Myöhemmin kannattaa ehkä määrittää tarkka yksivärinen fonttiperhe tai fontin pino käyttää näytteillesi. Voit tehdä kaikki nämä asiat helposti semanttisilla merkinnöillä ja älykkäästi käytetyllä CSS: llä.

Semanttisten tunnisteiden oikea käyttö

Kun käytät semanttimerkkejä tarkoituksen välittämiseen pikemminkin kuin esitystarkoituksiin, ole varovainen, ettet käytä niitä väärin yksinkertaisesti niiden yleisiin näyttöominaisuuksiin. Joitakin yleisimmin käytettyjä semanttimerkkejä ovat:

• lohkolainaus - Jotkut ihmiset käyttävät -tunniste tekstin sisennykseen, joka ei ole lainaus. Tämä johtuu siitä, että lohkolainat on sisennetty oletuksena. Jos haluat vain sisenyttää tekstiä, joka ei ole lainausmerkki, käytä sen sijaan CSS-marginaaleja.
• s - Jotkut verkkotoimittajat käyttävät (kappaleessa oleva katkeamaton tila) lisätäksesi tilaa sivuelementtien väliin sen sijaan, että määritettäisiin kyseisen sivun tekstille todelliset kappaleet. Kuten edellisessä esimerkissä, sinun tulisi käyttää marginaali- tai täytetyyliominaisuutta sen sijaan, että lisäät tilaa.
• ul - Kuten

  , liittämällä teksti a: n sisään

   tagi lisää tekstin useimmissa selaimissa. Tämä on sekä semanttisesti virheellinen että virheellinen HTML, koska vain
  •  tunnisteet ovat kelvollisia a
    tag. Jälleen kerran käytä reunusta tai täytetyyliä tekstin sisennykseen.
  • h1, h2, h3, h4, h5 ja h6 - Voit tehdä otsikkotunnisteista kirjasinten suurempia ja rohkeampia, mutta jos teksti ei ole otsikko, käytä sen sijaan fontin painoa ja fontin kokoa CSS-ominaisuuksia.

  Käyttämällä merkityksellisiä HTML-tunnisteita luot sivuja, jotka antavat enemmän tietoa kuin sivut, jotka yksinkertaisesti ympäröivät kaikkea

   tunnisteet.

  Mitkä HTML-tunnisteet ovat semanttisia?

  Vaikka melkein kaikki HTML4-tunnisteet ja kaikki HTML5 tunnisteilla on semanttinen merkitys, jotkut tunnisteet ovat ensisijaisesti semanttinen.

  Esimerkiksi HTML5 on määritellyt uudelleen merkityksen  ja  Tunnisteet ovat semanttisia.  tag ei ​​välitä ylimääräistä merkitystä; pikemminkin merkitty teksti on tyypillisesti lihavoitu. Samoin  tag ei ​​välitä ylimääräistä merkitystä tai korostusta; pikemminkin se määrittelee tekstin, joka on tyypillisesti tehty kursiivilla.

  Semanttiset HTML-tunnisteet

  Lyhenne
  Lyhenne
  Pitkä tarjous
  Määritelmä
  Osoite asiakirjan tekijälle (tekijöille)
  Viittaus
  Koodiviite
  Tekstityypin teksti
  Looginen jako
  Yleinen inline-tyylinen kontti
  Poistettu teksti
  Lisätty teksti
  Korostus
  Vahva painotus
  Ensimmäisen tason otsikko
  Toisen tason otsikko
  Kolmannen tason otsikko
  Neljännen tason otsikko
  Viidennen tason otsikko
  Kuudennen tason otsikko
  	Temaattinen tauko
  Käyttäjän kirjoittama teksti
  Valmiiksi muotoiltu teksti
  Lyhyt tarjous
  Näytteen tuotos
  Alaindeksi
  Yläindeksi
  Muuttuja tai käyttäjän määrittelemä teksti