3 nyttige HTML-tags, du måske ikke vidste eksisterede

Frontend-udviklere skal have et indgående kendskab til HTML-tags da dette er deres naturlige miljø på daglig basis. Jeg vil vædde med, at I alle kender nogle grundlæggende tags som f.eks. , , og så videre. Men vidste du for eksempel, at du kan foreslå et ordbrydningsmoment ved blot at bruge HTMLuden CSS?

WBR

Lad os antage, at du arbejder på et website eller en app for en tysk kunde. Som du ved, kan tyske ord være meget lange. Så du har et design med noget tekstindhold, som du skal gengive på Kode og dette indhold skal brydes i meget specifikke øjeblikke. Her kommer . tag til at hjælpe dig.

Fødselsdagskage

Sådan er det bare! Med et så simpelt tag kan du manipulere tekstindholdet, som du vil.

Men hvad med browserunderstøttelsen? Den er ret god, hvis jeg skal være ærlig. De fleste browsere vil forstå dette tag, men Opera på Android og Safari på iOS kan have problemer.

METER

Forestil dig, at du er ved at bygge en app til håndtering af disklager. Du skal på en eller anden måde vise i brugergrænsefladen, hvor meget lagerplads der stadig er til rådighed, og du vil virkelig gerne gøre det så tilgængeligt som muligt. Dette er bare en perfekt brugssag for . tag. Det viser dig kun værdien inden for et defineret interval. En anden cool ting ved dette tag er dets attributter:

• lav → når den aktuelle værdi er lavere end den indstillede lave værdi, bliver målerens bjælke rød;
• optimal → når de aktuelle værdier er højere end den optimale attributværdi, bliver målerens bjælke grøn;
• høj → når den høje værdi er lavere end den maksimale og højere end den optimale værdi, bliver målerens bjælke orange. Ellers vil den være grøn.

Du kender måske også et lignende tag, som er fremskridt. Så hvad er egentlig forskellen på dem? Progress-tagget skal bruges til igangværende opgaver. Med andre ord skal du bruge progress-tagget, når du arbejder med en specifik opgave. Meter-tagget skal bruges til at vise disk- eller hukommelsesforbrug. En anden forskel er, at meter-tagget ikke understøttes af IE, og at det faktisk er den eneste ulempe ved dette tag.

DEL og INS

Har du nogensinde tænkt på, hvordan man opbygger en tilgængelig indikator for slettede og tilføjede dele af indhold (diff i GitHub eller e-mailnotifikationer fra Jira, når billetten er blevet opdateret)? Du skal bare pakke det slettede indhold ind i.tag. For eksempel: <del><p>Har lige slettet indhold</p></del>. Hvis du kun vil vise den tilføjede del af indholdet, kan du bruge tag på præcis samme måde. Dette tag har også to attributter:

• cite → uri for en ressource, der forklarer, hvorfor denne del er blevet tilføjet;
• datetime → data og tidspunkt for ændringen.

Der er selvfølgelig meget mere nyttigt tags i HTML . Jeg kan varmt anbefale at bruge dem alle, når det er muligt og hensigtsmæssigt. Dine kunder og app-brugere vil takke dig for en sådan tilgang. Men vær forsigtig, for nogle tags kan være forældede. Du kan altid sikre dig, at et mindre almindeligt tag, du vil bruge, stadig er gyldigt og har god understøttelse i MDN-dokumentation.