Skip to content

Miksi käyttää semanttista HTML-koodia?

19 de kesäkuu de 2021

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 merkityksen verkkosivulle pelkän esityksen sijaan. Esimerkiksi

​​-tunniste 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 tagit, 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

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ä semanttimerkkejä asiakirjaan 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. Selain tunnistaa välittömästi -tagiin suljetun tekstin jonkin tyyppisenä 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 kirjasinperhe tai fonttipino, jota näytteissä käytetään. 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

    -tunnistetta sisennyttämään tekstiä, 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

    & nbsp;

    -toimintoa (kappaleessa oleva katkaisematon tila) lisätäkseen ylimääräistä tilaa sivuelementtien väliin sen sijaan, että määritettäisiin todelliset kappaleet kyseisen sivun tekstille. Kuten edellisessä esimerkissä, sinun tulisi käyttää marginaali- tai täytetyyliominaisuutta sen sijaan, että lisäät tilaa.

  • ul - Kuten

    -kohdassa, tekstin liittäminen

      -tagin sisään sisenee kyseisen tekstin useimmissa selaimissa. Tämä on sekä semanttisesti virheellinen että virheellinen HTML, koska vain

    • tunnisteet ovat kelvollisia
        -tagissa. 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 kaiken

      -tageilla.

      Mitkä HTML-tunnisteet ovat semanttisia?

      Vaikka melkein jokaisella HTML4-tagilla ja kaikilla HTML5-tunnisteilla on semanttinen merkitys, jotkut tunnisteet ovat ensisijaisesti semanttinen. Esimerkiksi HTML5 on määritellyt ja -tagien merkityksen uudelleen semanttiseksi. tag ei ​​välitä ylimääräistä merkitystä; pikemminkin merkitty teksti on tyypillisesti lihavoitu. Samoin -tagi ei välitä ylimääräistä merkitystä tai painotusta; pikemminkin se määrittelee tekstin, joka on tyypillisesti tehty kursiivilla.

      Semanttiset HTML-tunnisteet

      <abbr> Lyhenne
      <acronym> Lyhenne
      <blockquote> Pitkä tarjous
      <dfn> Määritelmä
      <address> Osoite asiakirjan tekijälle (tekijöille)
      <cite> Viittaus
      <code> Koodiviite
      <tt> Tekstityypin teksti
      <div> Looginen jako
      <span> Yleinen inline-tyylinen kontti
      <del> Poistettu teksti
      <ins> Lisätty teksti
      <em> Korostus
      <strong> Vahva painotus
      <h1> Ensimmäisen tason otsikko
      <h2> Toisen tason otsikko
      <h3> Kolmannen tason otsikko
      <h4> Neljännen tason otsikko
      <h5> Viidennen tason otsikko
      <h6> Kuudennen tason otsikko
      <hr> Temaattinen tauko
      <kbd> Käyttäjän kirjoittama teksti
      <pre> Valmiiksi muotoiltu teksti
      <q> Lyhyt tarjous
      <samp> Näytteen tuotos
      <sub> Alaindeksi
      <sup> Yläindeksi
      <var> Muuttuja tai käyttäjän määrittelemä teksti

      Alusta mla apa chicago Sinun viitteesi

      Kyrnin, Jennifer. "Miksi käyttää semanttista HTML-koodia?" ThoughtCo, toukokuu. 14, 2021, thinkco.com/why-use-semantic-html-3468271.
      Kyrnin, Jennifer. (2021, 14. toukokuuta). Miksi käyttää semanttista HTML-koodia? Haettu osoitteesta https://www.thoughtco.com/why-use-semantic-html-3468271
      Kyrnin, Jennifer. "Miksi käyttää semanttista HTML-koodia?" ThoughtCo. https://www.thoughtco.com/why-use-semantic-html-3468271 (käytetty 19. kesäkuuta 2021).

      • Mitä ovat merkintäkielet?

      • "HTML" -tekstitaide, joka on tehty suunnitelmaksi

        Mikä on HTML-tunniste verrattuna HTML-elementtiin?

      • Mies lasit puhelimessa kannettavan tietokoneen avulla

        Kuinka lisätä viivoja HTML-koodiin HR-tagilla

      • Kuva, joka näyttää esimerkin lohkolainauksesta HTML-muodossa

        Mikä on tarjouspyyntö?

      • Työntekijät, jotka käyttävät ohjelmistoja jousien kalibrointiin toimistossa

        Lisää kuvia verkkosivuille HTML: n avulla

      • Web-koodaus HTML: llä

        Mikä on HTML?

      • naispuolinen web-kehittäjä työskentelee tietokoneella

        Kuinka kelluttaa kuvaa verkkosivun tekstin vasemmalle puolelle

      • Vektoritaidekuva selaimesta, joka näyttää verkkosivun kahdella eri tyylillä erotettuna kauttaviivalla sivun keskellä

        Kuinka vaihtaa tekstin väriä HTML: ssä

      • HTML-kysymysmerkki

        HTML-tunnisteiden määrittely

      • Ohjelmointikuva

        Kuinka keskittää kuvia ja muita HTML-objekteja CSS: n avulla

      • Henkilö hymyilee käyttäessään tietokonetta ja suoratoista verkkokameran kanssa

        Verkkokameran verkkosivun määrittäminen

      • Kaksinkertaisen valotuksen kuva liikemiesstä, joka käyttää älypuhelinta lähdekoodin, näppäimistön kuvan ja kopiointitilan kanssa.  Ohjelmoinnin, kyberturvallisuuden, liiketoiminnan ja esineiden internetin käsite.

        HTML5-kangas: mikä se on ja miksi sitä käytetään

      • HTML5

        HTML5: n käyttäminen videon näyttämiseen nykyisissä selaimissa

      • Tämä teksti on lihavoitu HTML-muodossa

        HTML-korostustunnisteet

      • verkko ja muut sanat

        Mikä on valmiiksi muotoiltu teksti?

      • HTML-kysymysmerkki

        Välilehtien ja välien luominen HTML: n ja CSS: n avulla

      Koti

      Seuraa meitä

      • Facebook
        Facebook

      • Lehtitaulu
        Lehtitaulu

      Luota

      • Meistä
      • Mainostaa
      • Tietosuojakäytäntö
      • Evästekäytäntö
      • Ura
      • Toimitukselliset ohjeet
      • Ottaa yhteyttä
      • Käyttöehdot
      • Kalifornian tietosuojailmoitus
      • EU: n yksityisyys

      Yksityisyydensuojasi

      ThoughtCo ja kolmannen osapuolen kumppanimme käyttävät evästeitä ja käsittelevät henkilötietoja, kuten yksilöllisiä tunnisteita, suostumuksesi perusteella tallentaa ja / tai käyttää tietoja laitteessa, näyttää räätälöityjä mainoksia sekä sisällön mittaamiseen, yleisön näkemykseen ja tuotekehitykseen. Jos haluat muuttaa tai peruuttaa ThoughtCo.com-sivuston suostumusvalinnat, mukaan lukien oikeuden vastustaa oikeutettua etua, napsauta alla. Voit milloin tahansa päivittää asetuksesi minkä tahansa sivun alaosassa olevan "EU: n tietosuoja" -linkin kautta. Nämä valinnat ilmoitetaan globaalisti kumppaneillemme, eivätkä ne vaikuta selaustietoihin. Luettelo kumppaneista (toimittajat)

      Me ja kumppanimme käsittelemme tietoja:

      Skannaa laitteen ominaisuudet aktiivisesti tunnistamista varten. Käytä tarkkoja sijaintitietoja. Tallenna ja / tai käytä tietoja laitteessa. Valitse räätälöity sisältö. Luo henkilökohtainen sisältöprofiili. Mittaa mainoksen tehokkuutta. Valitse perusmainokset. Luo räätälöity mainosprofiili. Valitse räätälöidyt mainokset. Luo markkinatutkimuksia yleisötietojen luomiseen. Mittaa sisällön suorituskykyä. Kehittää ja parantaa tuotteita. Luettelo kumppaneista (toimittajat)