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
-merkki osoittaa, että oheinen 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, kuten ja , eivät ole semanttisia, koska ne määrittelevät vain, miten teksti näyttää (lihavoituna tai kursiivina) eikä 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. Selaimeen tunnistetaan välittömästi -tiedostoon sisältyvä teksti eräänlaisena 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 -tunnistetta tekstiin, 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 - Jotkin web-toimittajat käyttävät
& nbsp; (paragraftiin sisältyvää rikkoutumatonta tilaa) lisäten lisä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 - Kuten blockquote, joka sisältää tekstiä
-merkinnässä, joka sisältää tekstiä useimmissa selaimissa. Tämä on sekä semanttisesti vääriä että virheellisiä HTML-koodeja, sillä vain - -koodit ovat voimassa
-tunnisteen sisällä. 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 merkitys, luo sivuja, jotka antavat enemmän tietoa kuin vain ympäröivällä kaikella
-tarjoilla.
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 ja -tartoihin merkityksen olevan semanttinen. -tunniste ei anna erityistä merkitystä, vaan pikemminkin tekstiä, joka on tyypillisesti lihavoitu. -tunnisteessa 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
, 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. Selaimeen tunnistetaan välittömästi -tiedostoon sisältyvä teksti eräänlaisena 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 -tunnistetta tekstiin, 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 - Jotkin web-toimittajat käyttävät
& nbsp; (paragraftiin sisältyvää rikkoutumatonta tilaa) lisäten lisä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 - Kuten blockquote, joka sisältää tekstiä
-merkinnässä, joka sisältää tekstiä useimmissa selaimissa. Tämä on sekä semanttisesti vääriä että virheellisiä HTML-koodeja, sillä vain - -koodit ovat voimassa
-tunnisteen sisällä. 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 merkitys, luo sivuja, jotka antavat enemmän tietoa kuin vain ympäröivällä kaikella
-tarjoilla.
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 ja -tartoihin merkityksen olevan semanttinen. -tunniste ei anna erityistä merkitystä, vaan pikemminkin tekstiä, joka on tyypillisesti lihavoitu. -tunnisteessa 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