Mikä on semanttinen HTML ja miksi sinun tulisi käyttää sitä

Tärkeä Web Standards -liikkeen tärkeä periaate, jonka vastuulla on nykyinen teollisuus, on ajatus HTML-elementtien käyttämisestä sen sijaan, miten ne näkyvät selaimessa oletuksena. Tätä kutsutaan nimellä semanttinen HTML.

Mikä on semanttinen HTML

Semanttinen HTML tai semanttinen merkintä on HTML, joka tuo esille verkkosivun merkityksen pikemminkin kuin vain esitys. Esimerkiksi a

Merkki osoittaa, että liitteenä oleva teksti on kappale.

Tämä on sekä semanttista että esitelmää, koska ihmiset tietävät, mitkä kappaleet ovat ja selaimet osaavat näyttää niitä.

Tämän yhtälön kääntöpuolella tagit pitävät ja eivät ole semanttisia, koska ne määrittelevät vain, miten teksti näyttää (lihavoituna tai kursiivina) ja ei anna mitään lisämerkitystä merkinnälle.

Esimerkkejä semanttisista HTML-tunnisteista ovat otsikkotunnisteet

kautta

,

, ja . On paljon enemmän semanttisia HTML-tageja, joita voidaan käyttää, kun rakennat standardien mukaista verkkosivustoa.

Miksi sinun pitäisi perehtyä semantiikkaan

Semanttisen HTML-koodin kirjoittamisen hyödyt perustuvat mistä tahansa web-sivun tavoitteesta - halu kommunikoida. Lisäämällä semanttisia tunnisteita asiakirjaan antaa lisätietoja kyseisestä asiakirjasta, joka auttaa viestinnässä. Tarkemmin sanottuna semanttiset tunnisteet tekevät selaimelle selväksi, mitä sivun ja sisällön merkitys on.

Tämä selkeys ilmoitetaan myös hakukoneiden kanssa varmistaen, että oikeat sivut toimitetaan oikeille kysymyksille.

Semanttiset HTML-tunnisteet antavat tietoja kyseisten tunnisteiden sisällöstä, joka ylittää sen, miten ne näyttävät sivulle. Teksti, joka on suljettu selain tunnistetaan tunnisteena erääntyyppisenä koodauskielenä.

Sen sijaan, että yritettäisiin tuottaa kyseinen koodi, selain ymmärtää, että käytät tätä tekstiä esimerkkinä koodin jonkin artikkelin tai online-opetusohjelman tarkoituksiin.

Semanttisten tunnisteiden käyttäminen antaa sinulle paljon enemmän koukkuja sisällön muotoilemiseen. Ehkäpä tänään haluat, että koodinäytteet näkyvät oletusselaimen tyylissä, mutta huomenna haluat soittaa heille harmaan taustaväriin ja myöhemmin haluat määrittää täsmällisen yksivaiheisen fonttiperheen tai fonttikasetin käytettäväksi teidän näytteitä. Voit helposti tehdä kaikki nämä asiat käyttämällä semanttista merkintää ja älykkäästi sovellettua CSS: ää.

Käytä semanttisia merkintöjä oikein

Kun haluat käyttää semanttisia tunnisteita ilmaisemaan merkitystä pikemminkin kuin esitystarkoituksiin, sinun on oltava varovainen, ettet käytä niitä väärin yksinkertaisten yhteisten näyttöominaisuuksiensa vuoksi. Joitakin yleisimmin käyttämiä semanttisia tunnisteita ovat:

• blockquote - Jotkut käyttävät

  tekstiä, joka ei ole lainaus. Tämä johtuu siitä, että lohkotaulut ovat sisennetty oletusarvoisesti. Jos haluat vain hyötyä sisennyksistä, mutta teksti ei ole blockquote, käytä sen sijaan CSS-marginaaleja.

• p - Jotkut web-toimittajat käyttävät (rikkoutumatonta tilaa, joka sisältyy paragraftiin) lisätä ylimääräistä tilaa sivun elementtien sijaan sen sijaan, että määritettäisiin kyseisen sivun tekstin varsinaiset kohdat. Kuten edellä mainitussa sisennys-esimerkissä, käytä marginaali- tai pehmustustyyliominaisuutta lisäämään tilaa.
• ul - Like blockquote, joka sisältää tekstiä a
  Merkitse luetelmakohdat, jotka tekevät tekstiä useimmissa selaimissa. Tämä on sekä semanttisesti virheellinen että virheellinen HTML
  • Tunnisteet ovat voimassa a
    tag. Käytä uudelleen marginaali- tai pehmustystyyliä sisennystekstiin.
  • h1-h6 - Otsitunnisteita voidaan käyttää tekemään fontit suuremmiksi ja rohkeimmiksi, mutta jos teksti ei ole otsikko, sen ei pitäisi olla otsikkotunnisteen sisällä. Käytä fontin paino- ja fonttikokoisia CSS-ominaisuuksia sen sijaan, jos haluat muuttaa sivun tekstin kokoa tai painoa.

  Käyttämällä HTML-merkintöjä, joilla on merkitystä, luo sivuja, jotka antavat enemmän tietoa kuin vain ympäröivän kaiken kanssa

  tunnisteita.

  Mitkä HTML-tunnisteet ovat semanttisia?

  Vaikka lähes kaikilla HTML4-tunnisteilla ja kaikilla HTML5-tunnisteilla on semanttinen merkitys, jotkut tunnisteet ovat luonteeltaan ensisijaisesti semanttisia.

  Esimerkiksi HTML5 on määritellyt uudelleen ja tunnisteet ovat semanttisia. tagilla ei ole erityistä merkitystä, vaan pikemminkin tekstiä, joka on tyypillisesti lihavoitu. Tagilla ei myöskään ole erityistä merkitystä tai painotusta, vaan pikemminkin määritellään teksti, joka on tyypillisesti kirjoitettu kursiivilla.

  Semanttiset HTML-tunnisteet

  	Lyhenne
  	akronyymi
  	Pitkä lainaus
  	Määritelmä
  	Asiakirjan tekijän osoite
  	lainaus
  	Koodin viite
  	Teletype-teksti
  	Looginen jako
  	Generic inline style container
  	Poistettu teksti
  	Lisätty teksti
  	painotus
  	Vahva painotus
  	Ensimmäisen tason otsikko
  	Toisen tason otsikko
  	Kolmannen tason otsikko
  	Neljäs tason otsikko
  	Viides tason otsikko
  	Kuudennen tason otsikko
  	Temaattinen tauko
  	Käyttäjän syöttämä teksti
  	Esikäsitelty teksti
  	Lyhyt inline-lainaus
  	Näytteenotto
  	alaindeksi
  	Yläindeksi
  	Muuttuja tai käyttäjän määrittelemä teksti