HTML on yksinkertainen kieli, mutta sen sanasto on suurempi kuin saatat ymmärtää. Opi kaikista epätavallisimmista tunnisteista, joita voit käyttää.

Avaimet takeawayt

  • Käytä ja tunnisteita luodaksesi laajennettavia osioita, jotka tarjoavat käyttäjäystävällisen käyttökokemuksen ja säilyttävät puhtaan suunnittelun.
  • Korosta tärkeää sisältöä tunnisteella ja kiinnitä huomio verkkosivusi avainsanoihin, lauseisiin tai hakutuloksiin.
  • Lisää semanttinen merkitys päivämäärille ja kellonajoille tunnisteen avulla, mikä parantaa näytönlukuohjelmia käyttävien vammaisten käyttäjien käytettävyyttä.

Verkkokehittäjänä sinun tulee olla hyvin perehtynyt yleisiin HTML-tageihin, kuten, , ja jotka edustavat verkkosivujesi rakennetta ja sisältöä. HTML-kieli tarjoaa kuitenkin paljon enemmän!

Tutustumalla näihin ainutlaatuisiin tunnisteisiin voit parantaa verkkosovellustesi toimivuutta ja erottaa ne joukosta.

1.
ja

Kuvittele, että sinulla on laajaa tietoa tai sisältöä, jolla et halua hukuttaa lukijaa heti. The ja tagit tulevat apuun!

instagram viewer

Nämä tunnisteet luovat yhdessä laajennettavan osion, jossa on otsikko tai yhteenveto, jonka verkkosivustosi käyttäjät voivat paljastaa napsauttamalla. Oletuksena tiedot-elementin sisältö ei näy, joten sivusi pysyy siistinä ja järjestyksessä.

Vierailijasi voivat helposti napsauttaa yhteenvetoa päästäkseen piilotettuihin tietoihin.

<details>
<summary>Click to reveal more informationsummary>
<p>This content will be hidden by default but will appear when the user
 clicks the summary.p>
details>

Näiden tunnisteiden avulla voit piilottaa suuria osia tekstiä, koodia tai muuta tietoa, mikä tarjoaa käyttäjäystävällisen käyttökokemuksen ja säilyttää puhtaan ulkoasun. Ne voivat jopa auttaa sinua tarkentamaan käyttöliittymäsuunnittelijan taidot.

2.

The -tunnisteen avulla voit korostaa tiettyjä sisältösi osia, jolloin ne erottuvat visuaalisesti. Kun käytät elementtiä, selaimet yleensä lisäävät tekstin sisällä olevaan tekstiin keltaista taustaväriä kiinnittäen lukijan huomion siihen.

Tämä ominaisuus on erityisen hyödyllinen, kun haluat korostaa avainsanoja, tärkeitä lauseita tai hakutuloksia verkkosivullasi.

<p>
 You can use the <mark>markmark> tag to highlight important words or
 phrases.
p>

Jos verkkosivustollasi on esimerkiksi hakutoiminto, voit käyttää -tunniste korostaa hakukyselyn osumat tuloksissa, mikä helpottaa käyttäjien löytämistä asiaankuuluvista tiedoista.

3.

Oletko koskaan kohdannut tilanteita, joissa sisältö vanhentuu tai ei ole enää relevanttia, mutta haluat silti näyttää sen historiallisissa tarkoituksissa tai ilmaista ajan mittaan tapahtuneita muutoksia?

Syötä tag! Se tarkoittaa yliviivattu ja hahmontaa minkä tahansa elementin sisällön viivalla keskeltä.

<p>
 This product is <s>out-of-stocks> currently available at a discounted
 price!
p>

Tässä esimerkissä loppu varastosta teksti näkyy viivalla sen läpi, mikä osoittaa, että tuotteen varastotila on muuttunut.

4.

Kun haluat lisätä semanttisen merkityksen sisältösi päivämääriin ja kelloihin, tagi on hyödyllinen.

Käyttämällä treffiaika attribuutilla voit määrittää päivämäärästä tai kellonajasta koneellisesti luettavan version, joka auttaa selaimia, hakukoneita ja näytönlukuohjelmia ymmärtämään kontekstin.

<p>
 The Declaration of Independence was signed on
<timedatetime="1776-07-04">July 4, 1776time>.
p>

Käyttämällä -tunnisteen avulla annat sisällöllesi enemmän rakennetta ja saat sen suuremmalle käyttäjäjoukolle, mukaan lukien näytönlukuohjelmia käyttävät vammaiset.

5.

Tekstin hallinta useilla kielillä verkkosivullasi voi joskus olla haastavaa, varsinkin kun jokainen osa vaatii erilaista muotoilua.

The -tunniste tulee apuun eristämällä osan tekstistä, jota selaimen tulisi käsitellä eri tavalla erilaisten kielivaatimusten vuoksi.

<p>
<bdi>5,000bdi> people attended the conference.
p>

Tässä esimerkissä elementti rivittää numeron 5,000. Tämä varmistaa, että jos ympäröivä teksti on eri kielellä tai vaatii erilaista muotoilua, se ei häiritse numeroa.

6. , ,

Itä-Aasian typografiassa, jossa ääntämisohjeita, furiganaa tai muita merkintöjä käytetään yleisesti merkkien ylä- tai alapuolella,, , ja tagit tulevat peliin.

<p>
 I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>

Tässä esimerkissä elementti sisältää merkin 漢 (Kanji) ja elementti sisältää ääntämisen かん (kan). The elementit tarjoavat varasulut selaimille, jotka eivät tue rubiinimerkintöjä.

7.

Kun sinulla on pitkiä sanoja, jotka voivat rikkoa asettelusi, tag on täällä auttamassa. Se ehdottaa mahdollisuutta rivinvaihtoon (sananvaihtomahdollisuus) pitkässä sanassa, jossa selain voi päättää rivittää tekstin.

<p>
 This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a? query=string.
p>

Yllä olevassa esimerkissä pitkä URL-osoite sisältää a elementti, jonka avulla selain jakaa sen tarvittaessa kahteen riviin, mikä säilyttää ympäröivän sisällön asettelun.

8. ja

Voit käyttää tieteellisiä tai matemaattisia merkintöjä, kemiallisia kaavoja tai alaviitteitä ja -tunnisteet alaindeksille ja yläindeksille.

<p>
 The chemical formula for water is H<sub>2sub>O,
 and the Pythagorean theorem is
 a<sup>2sup> + b<sup>2sup> = c<sup>2sup>.
p>

Tässä esimerkissä käytetään -tunniste näyttääksesi 2 sisään H2O alaindeksinä, kun taas tagit näyttävät Pythagoraan lauseen eksponentit.

9.

Haluatko esittää skalaarimittauksia tunnetulla alueella, kuten levyn käyttö, arvosanat tai koepisteet? The -tunniste on suojannut sinut.

Käyttämällä arvo, min, ja max määritteitä, voit määrittää mittauksen nykyisen arvon, minimiarvon ja maksimiarvon.

<metervalue="75"min="0"max="100">75%meter>

Tässä esimerkissä elementti edustaa kokeen tulosta 75%.

10.

Kun tarvitset luoda valintaikkuna tai ikkunan peitto modaaleille tai hyvin käyttäytyviä modaalisia ponnahdusikkunoita, tag on oikea tapa edetä. Voit käyttää avata attribuutti näyttääksesi valintaikkunan oletuksena.

<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
dialog>

Tässä esimerkissä yksinkertainen valintaikkuna, joka sisältää kappaleen ja sulkemispainikkeen, näyttää, milloin sivu latautuu, kiitos avata attribuutti. Voit mukauttaa valintaikkunan sisältöä ja toimintaa JavaScriptin avulla edistyneempää vuorovaikutusta varten.

11.

Käytä ryhmittele aiheeseen liittyvät vaihtoehdot sisällä a pudotusvalikosta. Sen avulla voit järjestää ja luokitella vaihtoehtoja navigoinnin ja valinnan helpottamiseksi.

  • Thetag on säilöelementti, joka ryhmittelee toisiinsa tunnisteet sisällä a elementti.
  • Se auttaa järjestämään vaihtoehtoja luomalla visuaalisen ryhmittelyn tai luokittelun avattavassa valikossa.
  • The -tunniste vaatii label-attribuutin, joka määrittää vaihtoehtoryhmän nimen tai otsikon.
  • Se voi sisältää yhden tai useamman tagit alielementteinä, jotka edustavat ryhmän yksittäisiä vaihtoehtoja.

Esimerkiksi:

<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
optgroup>
select>

Tämä esimerkki ryhmittelee avattavan valintavalikon kahteen osaan: Aasia, ja Euroopassa. Jokainen ryhmä sisältää tunnisteita, jotka edustavat alueen eri maita.

Paranna taitosi verkkokehityksessä

Näiden vähemmän tunnettujen HTML-tunnisteiden oppiminen voi parantaa huomattavasti verkkokehitystaitojasi. Tuntemattomuudestaan ​​huolimatta ne tarjoavat arvokkaita ominaisuuksia tietyissä yhteyksissä.

Näiden tunnisteiden lisääminen taitovalikoimaasi parantaa interaktiivisuutta, saavutettavuutta ja virtaviivaistaa verkkokehitysprosessia. Muista, että vaikka ne saattavat olla tuntemattomia, niillä on merkittävä vaikutus matkaasi verkkokehittäjänä.