11 nenavadnih oznak HTML za izboljšanje vaših spretnosti spletnega razvoja

Ključni zaključki

• Uporabite oznake in za ustvarjanje razširljivih razdelkov, ki zagotavljajo uporabniku prijazno izkušnjo in ohranjajo čist dizajn.
• Označite pomembno vsebino z oznako, ki pritegne pozornost na ključne besede, besedne zveze ali rezultate iskanja na vaši spletni strani.
• Dodajte semantični pomen datumom in časom z uporabo oznake, s čimer izboljšate dostopnost za uporabnike s posebnimi potrebami, ki uporabljajo bralnike zaslona.

Kot spletni razvijalec bi morali biti dobro seznanjeni s pogostimi oznakami HTML, kot je, , in ki predstavljajo strukturo in vsebino vaših spletnih strani. Vendar pa jezik HTML ponuja veliko več!

Z raziskovanjem teh edinstvenih oznak lahko izboljšate funkcionalnost svojih spletnih aplikacij in tako izstopajo iz množice.

1.

in

Predstavljajte si, da imate obsežne informacije ali vsebino, s katero ne želite takoj preobremeniti bralca. The in oznake priskočijo na pomoč!

Te oznake delujejo skupaj, da ustvarijo razširljiv razdelek z naslovom ali povzetkom, ki ga uporabniki vašega spletnega mesta lahko kliknejo in razkrijejo. Privzeto vsebina znotraj elementa podrobnosti ne bo prikazana, zaradi česar bo vaša stran čista in organizirana.

Vaši obiskovalci lahko preprosto kliknejo povzetek za dostop do skritih informacij.

<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>

S temi oznakami lahko skrijete velike dele besedila, kode ali drugih informacij, kar zagotavlja uporabniku prijazno izkušnjo, hkrati pa ohranja čist dizajn. Morda vam celo pomagajo izboljšati vašo spretnosti kot oblikovalec vmesnikov.

2.

The vam omogoča, da poudarite določene dele vaše vsebine, zaradi česar vizualno izstopajo. Ko uporabljate element, brskalniki navadno uporabijo rumeno barvo ozadja za besedilo v notranjosti in pritegnejo pozornost bralca nanj.

Ta funkcija je še posebej uporabna, ko želite na svoji spletni strani poudariti ključne besede, pomembne fraze ali rezultate iskanja.

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

Na primer, če ima vaše spletno mesto funkcijo iskanja, lahko uporabite oznako za poudarjanje ujemanj iskalne poizvedbe v rezultatih, kar uporabnikom olajša iskanje ustreznih informacij.

3.

Ste že kdaj naleteli na situacije, ko je vsebina zastarela ali ni več pomembna, vendar jo želite še vedno prikazati za zgodovinske namene ali za označevanje sprememb skozi čas?

Vnesite oznaka! To pomeni prečrtano in upodobi katero koli vsebino znotraj elementa s črto skozi sredino.

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

V tem primeru je ni na zalogi besedilo bo prikazano s črto skozi, kar pomeni, da se je stanje zaloge izdelka spremenilo.

4.

Ko želite datumom in uram v svoji vsebini dodati semantični pomen, se oznaka pride prav.

Uporabljati Datum čas lahko določite strojno berljivo različico datuma ali časa, ki brskalnikom, iskalnikom in bralnikom zaslona pomaga razumeti kontekst.

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

Z uporabo svoji vsebini daste več strukture in jo naredite dostopno širšemu krogu uporabnikov, vključno s tistimi s posebnimi potrebami, ki uporabljajo bralnike zaslona.

5.

Upravljanje besedila v več jezikih na vaši spletni strani je lahko včasih zahtevno, zlasti če vsak del zahteva drugačno oblikovanje.

The priskoči na pomoč tako, da izolira del besedila, ki bi ga moral brskalnik obravnavati drugače zaradi različnih jezikovnih zahtev.

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

V tem primeru je element ovije številko 5,000. To zagotavlja, da če je okoliško besedilo v drugem jeziku ali zahteva drugačno oblikovanje, ne bo motilo številke.

6. , ,

Za vzhodnoazijsko tipografijo, kjer se nad ali pod znaki običajno uporabljajo navodila za izgovorjavo, furigana ali druge opombe,, , in oznake pridejo v poštev.

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

V tem primeru je element vsebuje znak 漢 (Kanji) in element vsebuje izgovorjavo かん (kan). The elementi zagotavljajo nadomestne oklepaje za brskalnike, ki ne podpirajo opomb ruby.

7.

Ko imate dolge besede, ki lahko pokvarijo vašo postavitev, se tag je tukaj, da vam pomaga. Predlaga priložnost za prelom vrstice (priložnost za prelom besede) v dolgi besedi, kjer lahko brskalnik prelomi besedilo.

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

V zgornjem primeru dolgi URL vključuje a element, ki brskalniku omogoča, da ga po potrebi razdeli v dve vrstici in ohrani postavitev okoliške vsebine.

8. _in

Za znanstvene ali matematične zapise, kemijske formule ali opombe lahko uporabite in oznake za subscript in superscript besedilo.

<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>

Ta primer uporablja oznako za prikaz 2 v H2O kot indeks, medtem ko je oznake prikazujejo eksponente v Pitagorovem izreku.

9.

Morate predstaviti skalarne meritve znotraj znanega obsega, kot so uporaba diska, ocene ali rezultati izpitov? The oznaka vas je pokrila.

Uporabljati vrednost, min, in maks atributov lahko določite trenutno vrednost, najmanjšo vrednost oziroma največjo vrednost meritve.

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

V tem primeru je element predstavlja izpitno oceno 75%.

10.

Ko je treba ustvarite pogovorno okno ali prekrivno okno za modale oz dobro obnašane modalne pojavne interakcije, the tag je prava pot. Lahko uporabite odprto atribut za privzeti prikaz pogovornega okna.

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

V tem primeru preprosto pogovorno okno, ki vsebuje odstavek in gumb za zapiranje, prikaže, ko se stran naloži, zahvaljujoč odprto atribut. Vsebino in vedenje pogovornega okna lahko prilagodite z JavaScriptom za naprednejše interakcije.

11.

Uporabi oznako za združevanje povezanih možnosti znotraj a spustni element. Omogoča vam organiziranje in kategoriziranje možnosti za lažjo navigacijo in izbiro.

• Theje vsebniški element, ki združuje sorodne oznake znotraj a element.
• Pomaga organizirati možnosti z ustvarjanjem vizualnega združevanja ali kategorizacije v spustnem meniju.
• The zahteva atribut oznake, ki določa ime ali naslov skupine možnosti.
• Lahko vsebuje enega ali več oznake kot njene podrejene elemente, ki predstavljajo posamezne možnosti znotraj skupine.

Na primer:

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

Ta primer združuje spustni meni za izbiro v dva razdelka: Azija, in Evropi. Vsaka skupina vsebuje oznake, ki predstavljajo različne države v tej regiji.

Izboljšajte svoje znanje spletnega razvoja

Učenje teh manj znanih oznak HTML lahko močno izboljša vaše veščine spletnega razvoja. Kljub pomanjkanju prepoznavnosti ponujajo dragocene funkcije za posebne kontekste.

Dodajanje teh oznak vašemu naboru spretnosti izboljša interaktivnost, dostopnost in poenostavi proces spletnega razvoja. Ne pozabite, da imajo pomemben vpliv na vašo pot spletnega razvijalca, čeprav so morda nepoznani.