HTML je jednostavan jezik, ali njegov je vokabular veći nego što mislite. Saznajte sve o nekim od neobičnijih oznaka koje možete koristiti.

Ključni zahvati

  • Koristite oznake i za stvaranje proširivih odjeljaka, pružajući korisničko iskustvo i održavajući čisti dizajn.
  • Oznakom istaknite važan sadržaj, privlačeći pozornost na ključne riječi, izraze ili rezultate pretraživanja na vašoj web stranici.
  • Dodajte semantičko značenje datumima i vremenima pomoću oznake, poboljšavajući pristupačnost za korisnike s invaliditetom koji koriste čitače zaslona.

Kao web programer, trebali biste biti dobro upućeni u uobičajene HTML oznake kao što su, , i koji predstavljaju strukturu i sadržaj vaših web stranica. Međutim, HTML jezik nudi mnogo više!

Istražujući ove jedinstvene oznake, možete poboljšati funkcionalnost svojih web-aplikacija, čineći ih istaknutima u gomili.

1.
i

Zamislite da imate opsežne informacije ili sadržaj s kojim ne želite odmah zatrpati čitatelja. The i oznake dolaze u pomoć!

Ove oznake rade zajedno kako bi stvorile proširivi odjeljak s naslovom ili sažetkom koji korisnici vaše web stranice mogu kliknuti da bi ga otkrili. Prema zadanim postavkama, sadržaj unutar elementa detalja neće se prikazati, održavajući vašu stranicu urednom i organiziranom.

instagram viewer

Vaši posjetitelji mogu jednostavno kliknuti na sažetak kako bi pristupili skrivenim informacijama.

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

Pomoću ovih oznaka možete sakriti velike dijelove teksta, koda ili drugih informacija, pružajući korisničko iskustvo uz zadržavanje čistog dizajna. Mogu vam čak pomoći da poboljšate svoje vještine dizajnera sučelja.

2.

The Oznaka vam omogućuje da istaknete određene dijelove svog sadržaja, čineći ih vizualno istaknutima. Kada koristite elementa, preglednici obično primjenjuju žutu boju pozadine na tekst unutra, privlačeći pozornost čitatelja na njega.

Ova značajka je posebno korisna kada želite naglasiti ključne riječi, važne izraze ili rezultate pretraživanja na svojoj web stranici.

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

Na primjer, ako vaša web stranica ima funkciju pretraživanja, možete koristiti oznaku za isticanje podudaranja upita za pretraživanje u rezultatima, olakšavajući korisnicima pronalaženje relevantnih informacija.

3.

Jeste li se ikada susreli sa situacijama u kojima je sadržaj zastario ili više nije relevantan, ali ga i dalje želite prikazati u povijesne svrhe ili za označavanje promjena tijekom vremena?

Uđi označiti! To stoji za precrtano i prikazuje bilo koji sadržaj unutar elementa s linijom kroz sredinu.

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

U ovom primjeru, van zaliha tekst će se prikazati s linijom kroz njega, što pokazuje da se stanje zaliha proizvoda promijenilo.

4.

Kada želite dodati semantičko značenje datumima i vremenima u svom sadržaju, oznaka dobro dođe.

Koristiti Datum vrijeme možete navesti strojno čitljivu verziju datuma ili vremena, što pomaže preglednicima, tražilicama i čitačima zaslona razumjeti kontekst.

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

Korištenjem oznaku, svom sadržaju dajete više strukture i činite ga dostupnim širem krugu korisnika, uključujući one s invaliditetom koji koriste čitače zaslona.

5.

Upravljanje tekstom na više jezika na vašoj web-stranici ponekad može biti izazovno, osobito kada svaki dio zahtijeva različito oblikovanje.

The tag dolazi u pomoć tako što izdvaja dio teksta koji bi preglednik trebao tretirati drugačije zbog različitih jezičnih zahtjeva.

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

U ovom primjeru, element obavija broj 5,000. Ovo osigurava da, ako je okolni tekst na drugom jeziku ili zahtijeva drugačije oblikovanje, neće ometati broj.

6. , ,

Za istočnoazijsku tipografiju, gdje se vodiči za izgovor, furigana ili druge napomene obično koriste iznad ili ispod znakova,, , i oznake dolaze u obzir.

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

U ovom primjeru, element sadrži znak 漢 (kanji), i element sadrži izgovor かん (kan). The elementi pružaju zamjenske zagrade za preglednike koji ne podržavaju ruby ​​komentare.

7.

Kada imate duge riječi koje vam mogu pokvariti raspored, tag je tu da pomogne. Predlaže priliku za prijelom retka (mogućnost prijeloma riječi) u dugoj riječi, pri čemu preglednik može odabrati prelamanje teksta.

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

U gornjem primjeru, dugi URL uključuje a element koji omogućuje pregledniku da ga po potrebi podijeli u dva retka, čuvajući izgled okolnog sadržaja.

8. i

Za znanstvene ili matematičke zapise, kemijske formule ili bilješke možete koristiti i oznake za subscript i superscript tekst, redom.

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

Ovaj primjer koristi oznaku za prikaz 2 u H2O kao indeks, dok je oznake prikazuju eksponente u Pitagorinom teoremu.

9.

Trebate predstaviti skalarna mjerenja unutar poznatog raspona, kao što je upotreba diska, ocjene ili rezultati ispita? The oznaka vas pokriva.

Koristiti vrijednost, min, i max atribute, možete definirati trenutnu vrijednost, minimalnu vrijednost, odnosno maksimalnu vrijednost mjerenja.

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

U ovom primjeru, element predstavlja rezultat ispita od 75%.

10.

Kad treba stvoriti dijaloški okvir ili preklapanje prozora za modale ili dobro ponašane modalne skočne interakcije, the tag je pravi put. Možete koristiti otvoren atribut za prikaz dijaloškog okvira prema zadanim postavkama.

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

U ovom primjeru, jednostavan dijaloški okvir koji sadrži odlomak i gumb za zatvaranje prikazuje kada se stranica učita, zahvaljujući otvoren atribut. Možete prilagoditi sadržaj i ponašanje dijaloškog okvira pomoću JavaScripta za naprednije interakcije.

11.

Koristiti oznaku za grupiranje povezanih opcija unutar a padajući element. Omogućuje organiziranje i kategoriziranje opcija za lakšu navigaciju i odabir.

  • Theoznaka je element spremnika koji grupira srodne oznake unutar a element.
  • Pomaže organizirati opcije stvaranjem vizualnog grupiranja ili kategorizacije unutar padajućeg izbornika.
  • The oznaka zahtijeva atribut oznake, koji navodi naziv ili naslov grupe opcija.
  • Može sadržavati jedan ili više oznake kao svoje podređene elemente, predstavljajući pojedinačne opcije unutar grupe.

Na primjer:

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

Ovaj primjer grupira padajući izbornik za odabir u dva odjeljka: Azija, i Europa. Svaka grupa sadrži oznake koje predstavljaju različite zemlje unutar te regije.

Unaprijedite svoje znanje u web razvoju

Učenje ovih manje poznatih HTML oznaka može uvelike poboljšati vaše vještine web razvoja. Unatoč nedostatku prepoznavanja, oni nude vrijedne značajke za specifične kontekste.

Dodavanje ovih oznaka vašem skupu vještina poboljšava interaktivnost, pristupačnost i pojednostavljuje proces web razvoja. Upamtite, iako su možda nepoznati, oni imaju značajan utjecaj na vaše putovanje kao web programera.