11 uvanlige HTML-koder for å øke ferdighetene dine i webutvikling

Viktige takeaways

• Bruk og tagger for å lage utvidbare seksjoner, som gir en brukervennlig opplevelse og opprettholder et rent design.
• Fremhev viktig innhold med taggen, og trekk oppmerksomheten til søkeord, setninger eller søkeresultater på nettsiden din.
• Legg til semantisk mening til datoer og klokkeslett ved å bruke taggen, og forbedre tilgjengeligheten for brukere med funksjonshemminger som bruker skjermlesere.

Som nettutvikler bør du være godt kjent med vanlige HTML-tagger som, , og som representerer strukturen og innholdet på nettsidene dine. HTML-språket tilbyr imidlertid mye mer!

Ved å utforske disse unike taggene kan du forbedre funksjonaliteten til nettappene dine, slik at de skiller seg ut fra mengden.

1.

og

Tenk deg at du har omfattende informasjon eller innhold som du ikke vil overvelde en leser med umiddelbart. De og tagger kommer til unnsetning!

Disse taggene fungerer sammen for å lage en utvidbar del med en tittel eller et sammendrag som brukerne av nettstedet ditt kan klikke for å avsløre. Som standard vil ikke innholdet i detaljelementet vises, noe som holder siden din ryddig og organisert.

De besøkende kan enkelt klikke på sammendraget for å få tilgang til den skjulte informasjonen.

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

Med disse kodene kan du skjule store deler av tekst, kode eller annen informasjon, noe som gir en brukervennlig opplevelse samtidig som du opprettholder et rent design. De kan til og med hjelpe deg med å avgrense ferdigheter som grensesnittdesigner.

2.

De tag lar deg fremheve bestemte deler av innholdet ditt, slik at de skiller seg ut visuelt. Når du bruker element, bruker nettlesere vanligvis en gul bakgrunnsfarge på teksten inni, og trekker leserens oppmerksomhet til den.

Denne funksjonen er spesielt nyttig når du vil fremheve nøkkelord, viktige fraser eller søkeresultater på nettsiden din.

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

For eksempel, hvis nettstedet ditt har søkefunksjonalitet, kan du bruke -taggen for å fremheve søket som samsvarer i resultatene, noe som gjør det enklere for brukere å finne relevant informasjon.

3.

Har du noen gang vært borti situasjoner der innhold blir utdatert eller ikke lenger relevant, men du fortsatt ønsker å vise det for historiske formål eller for å indikere endringer over tid?

Skriv inn stikkord! Det står for gjennomstreking og gjengir alt innhold i elementet med en linje gjennom midten.

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

I dette eksemplet er utsolgt tekst vil vises med en linje gjennom, som indikerer at produktets lagerstatus har endret seg.

4.

Når du vil legge til semantisk mening til datoer og klokkeslett i innholdet ditt, tag kommer godt med.

Bruker dato tid attributt, kan du spesifisere en maskinlesbar versjon av datoen eller klokkeslettet, som hjelper nettlesere, søkemotorer og skjermlesere å forstå konteksten.

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

Ved å bruke -taggen gir du innholdet ditt mer struktur og gjør det tilgjengelig for et bredere spekter av brukere, inkludert funksjonshemmede som bruker skjermlesere.

5.

Å administrere tekst på flere språk på nettsiden din kan noen ganger være utfordrende, spesielt når hver del krever forskjellig formatering.

De taggen kommer til unnsetning ved å isolere en del av teksten som nettleseren bør behandle annerledes på grunn av ulike språkkrav.

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

I dette eksemplet er element omslutter tallet 5,000. Dette sikrer at hvis den omkringliggende teksten er på et annet språk eller krever annen formatering, vil den ikke forstyrre tallet.

6. , ,

For østasiatisk typografi, der uttaleguider, furigana eller andre merknader vanligvis brukes over eller under tegn,, , og tagger spiller inn.

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

I dette eksemplet er elementet inneholder tegnet 漢 (Kanji), og elementet inneholder uttalen かん (kan). De elementer gir reserveparenteser for nettlesere som ikke støtter ruby-annoteringer.

7.

Når du har lange ord som kan ødelegge layouten din, taggen er her for å hjelpe. Det foreslår en mulighet for et linjeskift (ord break-mulighet) i et langt ord, der nettleseren kan velge å bryte teksten.

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

I eksemplet ovenfor inkluderer den lange nettadressen en element som lar nettleseren dele den i to linjer om nødvendig, og bevarer oppsettet til det omkringliggende innholdet.

8. _og

For vitenskapelige eller matematiske notasjoner, kjemiske formler eller fotnoter kan du bruke og tagger for henholdsvis nedskreven og hevet tekst.

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

Dette eksemplet bruker tag for å vise 2 i H2O som et abonnement, mens -tagger viser eksponentene i Pythagoras teorem.

9.

Trenger du å representere skalarmålinger innenfor et kjent område, for eksempel diskbruk, vurderinger eller eksamenspoeng? De tag har dekket deg.

Bruker verdi, min, og maks attributter, kan du definere henholdsvis gjeldende verdi, minimumsverdi og maksimumsverdi for målingen.

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

I dette eksemplet er element representerer en eksamensscore på 75%.

10.

Når du trenger det lage en dialogboks eller et vindusoverlegg for modaler eller veloppdragne modale popup-interaksjoner, den tag er veien å gå. Du kan bruke åpen attributt for å vise dialogboksen som standard.

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

I dette eksemplet viser en enkel dialogboks som inneholder et avsnitt og en lukkeknapp når siden lastes, takket være åpen Egenskap. Du kan tilpasse innholdet og oppførselen til dialogboksen ved å bruke JavaScript for mer avanserte interaksjoner.

11.

Bruke tag for å gruppere relaterte alternativer innenfor en rullegardinelement. Den lar deg organisere og kategorisere alternativer for enklere navigering og valg.

• Detaggen er et beholderelement som grupperer relatert tagger i en element.
• Det hjelper med å organisere alternativer ved å lage visuell gruppering eller kategorisering i rullegardinmenyen.
• De tag krever et etikettattributt, som spesifiserer navnet eller tittelen på alternativgruppen.
• Den kan inneholde en eller flere tagger som underordnede elementer, som representerer de individuelle alternativene i gruppen.

For eksempel:

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

Dette eksemplet grupperer rullegardinmenyen for valg i to deler: Asia, og Europa. Hver gruppe inneholder tagger som representerer forskjellige land innenfor den regionen.

Forbedre ferdighetene dine i webutvikling

Å lære disse mindre kjente HTML-taggene kan forbedre ferdighetene dine i nettutvikling betraktelig. Til tross for deres mangel på anerkjennelse, tilbyr de verdifulle funksjoner for spesifikke sammenhenger.

Å legge til disse kodene i ferdighetssettet ditt forbedrer interaktivitet, tilgjengelighet og effektiviserer nettutviklingsprosessen. Husk at selv om de kanskje er ukjente, har de en betydelig innvirkning på reisen din som nettutvikler.