11 usædvanlige HTML-tags til at booste dine webudviklingsfærdigheder

Nøgle takeaways

• Brug og tags til at skabe udvidelige sektioner, hvilket giver en brugervenlig oplevelse og opretholder et rent design.
• Fremhæv vigtigt indhold med tagget, og gør opmærksom på søgeord, sætninger eller søgeresultater på din webside.
• Tilføj semantisk betydning til datoer og tidspunkter ved hjælp af tagget, hvilket forbedrer tilgængeligheden for brugere med handicap, der bruger skærmlæsere.

Som webudvikler bør du være velbevandret i almindelige HTML-tags som f.eks, , og der repræsenterer strukturen og indholdet af dine websider. HTML-sproget byder dog på meget mere!

Ved at udforske disse unikke tags kan du forbedre funktionaliteten af ​​dine webapps, så de skiller sig ud fra mængden.

1.

og

Forestil dig, at du har omfattende information eller indhold, som du ikke ønsker at overvælde en læser med med det samme. Det og tags kommer til undsætning!

Disse tags arbejder sammen for at skabe en udvidelig sektion med en titel eller et resumé, som brugerne af dit websted kan klikke for at afsløre. Som standard vil indholdet i detaljeelementet ikke blive vist, hvilket holder din side pæn og organiseret.

Dine besøgende kan nemt klikke på oversigten for at få adgang til de skjulte oplysninger.

<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 tags kan du skjule store dele af tekst, kode eller anden information, hvilket giver en brugervenlig oplevelse og samtidig bevare et rent design. De kan endda hjælpe dig med at forfine din færdigheder som interface designer.

2.

Det tag lader dig fremhæve bestemte dele af dit indhold, hvilket gør dem visuelt synlige. Når du bruger element, anvender browsere typisk en gul baggrundsfarve på teksten indeni, hvilket gør læseren opmærksom på den.

Denne funktion er især nyttig, når du vil fremhæve søgeord, vigtige sætninger eller søgeresultater på din webside.

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

For eksempel, hvis dit websted har søgefunktionalitet, kan du bruge tag for at fremhæve søgeforespørgslens match i resultaterne, hvilket gør det nemmere for brugerne at finde relevant information.

3.

Har du nogensinde stødt på situationer, hvor indhold bliver forældet eller ikke længere relevant, men du stadig ønsker at vise det til historiske formål eller for at indikere ændringer over tid?

Gå ind i tag! Det står for gennemstreget og gengiver ethvert indhold i elementet med en linje gennem midten.

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

I dette eksempel er udsolgt tekst vises med en linje igennem, hvilket indikerer, at produktets lagerstatus er ændret.

4.

Når du vil tilføje semantisk betydning til datoer og tidspunkter i dit indhold, tag kommer godt med.

Bruger dato tid attribut, kan du angive en maskinlæsbar version af datoen eller klokkeslættet, hvilket hjælper browsere, søgemaskiner og skærmlæsere med at forstå konteksten.

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

Ved at bruge tag, giver du dit indhold mere struktur og gør det tilgængeligt for en bredere vifte af brugere, inklusive dem med handicap, der bruger skærmlæsere.

5.

Det kan nogle gange være udfordrende at administrere tekst på flere sprog på din webside, især når hver del kræver forskellig formatering.

Det tag kommer til undsætning ved at isolere en del af teksten, som browseren bør behandle forskelligt på grund af forskellige sprogkrav.

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

I dette eksempel er element omslutter nummeret 5,000. Dette sikrer, at hvis den omgivende tekst er på et andet sprog eller kræver anden formatering, vil den ikke forstyrre nummeret.

6. , ,

For østasiatisk typografi, hvor udtalevejledninger, furigana eller andre anmærkninger almindeligvis bruges over eller under tegn,, , og tags kommer i spil.

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

I dette eksempel er elementet indeholder tegnet 漢 (Kanji), og elementet indeholder udtalen かん (kan). Det elementer giver reserveparenteser til browsere, der ikke understøtter rubin-annoteringer.

7.

Når du har lange ord, der kan ødelægge dit layout, tag er her for at hjælpe. Det foreslår en mulighed for et linjeskift (ord break-mulighed) i et langt ord, hvor browseren kan vælge at ombryde 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 indeholder den lange URL en element, som lader browseren opdele det i to linjer, hvis det er nødvendigt, og bevarer layoutet af det omgivende indhold.

8. _og

Til videnskabelige eller matematiske notationer, kemiske formler eller fodnoter kan du bruge og tags for henholdsvis sænket og hævet 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 eksempel bruger tag for at vise 2 i H2O som et abonnement, mens den tags viser eksponenterne i Pythagoras sætning.

9.

Har du brug for at repræsentere skalarmålinger inden for et kendt område, såsom diskbrug, vurderinger eller eksamensresultater? Det tag har dækket dig.

Bruger værdi, min, og max attributter, kan du definere henholdsvis den aktuelle værdi, minimumsværdien og maksimumværdien for målingen.

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

I dette eksempel er element repræsenterer en eksamensscore på 75%.

10.

Når du har brug for det oprette en dialogboks eller en vinduesoverlejring til modaler eller velopdragne modale pop-up-interaktioner, det tag er vejen at gå. Du kan bruge åben attribut for at vise dialogboksen som standard.

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

I dette eksempel viser en simpel dialogboks, der indeholder et afsnit og en lukkeknap, hvornår siden indlæses, takket være åben attribut. Du kan tilpasse indholdet og adfærden af ​​dialogboksen ved hjælp af JavaScript til mere avancerede interaktioner.

11.

Brug tag for at gruppere relaterede muligheder inden for en dropdown-element. Det giver dig mulighed for at organisere og kategorisere muligheder for lettere navigation og valg.

• Dettag er et containerelement, der grupperer relateret tags inden for en element.
• Det hjælper med at organisere muligheder ved at oprette visuel gruppering eller kategorisering i rullemenuen.
• Det tag kræver en label-attribut, som angiver navnet eller titlen på indstillingsgruppen.
• Den kan indeholde en eller flere tags som underordnede elementer, der repræsenterer de individuelle muligheder i gruppen.

For eksempel:

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

Dette eksempel grupperer rullemenuen Vælg i to sektioner: Asien, og Europa. Hver gruppe indeholder tags, der repræsenterer forskellige lande i den pågældende region.

Forbedre dine færdigheder i webudvikling

At lære disse mindre kendte HTML-tags kan i høj grad forbedre dine webudviklingsevner. På trods af deres manglende anerkendelse tilbyder de værdifulde funktioner til specifikke sammenhænge.

Tilføjelse af disse tags til dit færdighedssæt forbedrer interaktivitet, tilgængelighed og strømliner webudviklingsprocessen. Husk, at selvom de måske er ukendte, har de en betydelig indflydelse på din rejse som webudvikler.