11 ovanliga HTML-taggar för att öka dina färdigheter i webbutveckling

Viktiga takeaways

• Använd och taggar för att skapa expanderbara sektioner, vilket ger en användarvänlig upplevelse och bibehåller en ren design.
• Markera viktigt innehåll med taggen och uppmärksamma sökord, fraser eller sökresultat på din webbsida.
• Lägg till semantisk betydelse för datum och tider med taggen, förbättra tillgängligheten för användare med funktionshinder som använder skärmläsare.

Som webbutvecklare bör du vara väl insatt i vanliga HTML-taggar som, , och som representerar strukturen och innehållet på dina webbsidor. Men HTML-språket erbjuder mycket mer!

Genom att utforska dessa unika taggar kan du förbättra funktionaliteten hos dina webbappar och få dem att sticka ut från mängden.

1.

och

Föreställ dig att du har omfattande information eller innehåll som du inte vill överväldiga en läsare med direkt. De och taggar kommer till undsättning!

Dessa taggar samverkar för att skapa en expanderbar sektion med en titel eller sammanfattning som dina webbplatsanvändare kan klicka för att visa. Som standard visas inte innehållet i detaljelementet, vilket håller din sida snygg och organiserad.

Dina besökare kan enkelt klicka på sammanfattningen för att komma åt den dolda informationen.

<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 dessa taggar kan du dölja stora delar av text, kod eller annan information, vilket ger en användarvänlig upplevelse samtidigt som du behåller en ren design. De kan till och med hjälpa dig att förfina din färdigheter som gränssnittsdesigner.

2.

De Med taggen kan du markera specifika delar av ditt innehåll, vilket gör att de sticker ut visuellt. När du använder element, använder webbläsare vanligtvis en gul bakgrundsfärg på texten inuti, vilket drar läsarens uppmärksamhet på det.

Den här funktionen är särskilt användbar när du vill betona nyckelord, viktiga fraser eller sökresultat på din webbsida.

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

Till exempel, om din webbplats har sökfunktionalitet kan du använda taggen för att markera sökfrågans matchningar i resultaten, vilket gör det lättare för användare att hitta relevant information.

3.

Har du någonsin stött på situationer där innehåll blir föråldrat eller inte längre relevant, men du fortfarande vill visa det i historiska syften eller för att indikera förändringar över tid?

Gå in i märka! Det står för genomstruken och renderar allt innehåll i elementet med en linje genom mitten.

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

I det här exemplet är slut i lager text kommer att visas med en linje genom den, vilket indikerar att produktens lagerstatus har ändrats.

4.

När du vill lägga till semantisk betydelse till datum och tider i ditt innehåll, tag kommer väl till pass.

Använda datum Tid attribut, kan du ange en maskinläsbar version av datumet eller tiden, vilket hjälper webbläsare, sökmotorer och skärmläsare att förstå sammanhanget.

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

Genom att använda taggen ger du ditt innehåll mer struktur och gör det tillgängligt för ett större antal användare, inklusive de med funktionshinder som använder skärmläsare.

5.

Att hantera text på flera språk på din webbsida kan ibland vara utmanande, särskilt när varje del kräver olika formatering.

De taggen kommer till undsättning genom att isolera en del av text som webbläsaren bör behandla olika på grund av olika språkkrav.

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

I det här exemplet är element omsluter numret 5,000. Detta säkerställer att om den omgivande texten är på ett annat språk eller kräver annan formatering, kommer den inte att störa numret.

6. , ,

För östasiatisk typografi, där uttalsguider, furigana eller andra anteckningar vanligtvis används över eller under tecken,, , och taggar kommer in i bilden.

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

I det här exemplet är elementet innehåller tecknet 漢 (Kanji), och elementet innehåller uttalet かん (kan). De element ger reservparenteser för webbläsare som inte stöder ruby-kommentarer.

7.

När du har långa ord som kan bryta din layout, taggen är här för att hjälpa. Det föreslår en möjlighet till radbrytning (ordbrytningsmöjlighet) i ett långt ord, där webbläsaren kan välja att radbryta texten.

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

I exemplet ovan innehåller den långa URL: en en element som låter webbläsaren dela upp det i två rader vid behov, vilket bevarar layouten på det omgivande innehållet.

8. _och

För vetenskapliga eller matematiska notationer, kemiska formler eller fotnoter kan du använda och taggar för nedsänkt respektive upphöjd text.

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

Detta exempel använder taggen för att visa 2 i H2O som en prenumeration, medan taggar visar exponenterna i Pythagoras sats.

9.

Behöver du representera skalära mätningar inom ett känt intervall, som diskanvändning, betyg eller provresultat? De taggen har täckt dig.

Använda värde, min, och max attribut kan du definiera det aktuella värdet, minimivärdet respektive maxvärdet för mätningen.

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

I det här exemplet är element representerar ett provresultat på 75%.

10.

När du behöver skapa en dialogruta eller ett fönsteröverlägg för modaler eller väluppfostrade modala popup-interaktioner, den taggen är vägen att gå. Du kan använda öppen attribut för att visa dialogrutan som standard.

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

I det här exemplet visar en enkel dialogruta som innehåller ett stycke och en stängningsknapp när sidan laddas, tack vare öppen attribut. Du kan anpassa innehållet och beteendet i dialogrutan med JavaScript för mer avancerade interaktioner.

11.

Använd tagga för att gruppera relaterade alternativ inom en rullgardinsmenyn. Det låter dig organisera och kategorisera alternativ för enklare navigering och val.

• Detaggen är ett containerelement som grupperar relaterade taggar inom en element.
• Det hjälper till att organisera alternativ genom att skapa visuell gruppering eller kategorisering i rullgardinsmenyn.
• De taggen kräver ett etikettattribut, som anger namnet eller titeln på alternativgruppen.
• Den kan innehålla en eller flera taggar som dess underordnade element, som representerar de individuella alternativen inom gruppen.

Till exempel:

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

Det här exemplet grupperar rullgardinsmenyn Välj i två sektioner: Asien, och Europa. Varje grupp innehåller taggar som representerar olika länder inom den regionen.

Förbättra din skicklighet i webbutveckling

Att lära sig dessa mindre kända HTML-taggar kan avsevärt förbättra dina färdigheter i webbutveckling. Trots deras bristande igenkänning erbjuder de värdefulla funktioner för specifika sammanhang.

Genom att lägga till dessa taggar i din kompetensuppsättning förbättras interaktivitet, tillgänglighet och effektivisera webbutvecklingsprocessen. Kom ihåg att även om de kanske är obekanta så har de en betydande inverkan på din resa som webbutvecklare.