Taggar för textformatering

HTML tillhandahåller flera taggar för textformatering som gör det möjligt att lägga till betoning, understrykning eller genomstrykning av text vid behov.

Taggarna <strong> och <em> används för att betona text. Taggen <strong> visar texten i fetstil och markerar stark betydelse, medan <em> visar texten i kursiv stil för att ange betoning.

Taggen <u> understryker text för att ge visuell tydlighet och framhäva viktig information. Använd dock understrykning sparsamt för att undvika att texten blir rörig.

Taggen <s> genomstryker text och indikerar borttagning eller irrelevans. Den används ofta för att visa att viss text har tagits bort eller inte längre är giltig.
Exempel:

I exemplet ovan:

• Taggarna <strong> och <em> används för att betona text, där <strong> visar texten i fetstil och <em> visar den i kursiv stil;
• Taggen <u> understryker texten och framhäver den visuellt;
• Taggen <s> stryker över texten, vilket indikerar borttagning eller irrelevans.

Länkar

Länkar, även kallade hyperlänkar, gör det möjligt för användare att navigera mellan webbsidor, resurser och olika former av kommunikation. I HTML skapas länkar med hjälp av <a>-taggen (ankare).

<a href="href-value">some text</a>

Attributet href i <a>-taggen anger länkens destination. Det kan acceptera olika typer av URL:er, inklusive:

• Absoluta URL:er: Anger hela adressen till den länkade resursen, inklusive protokoll (t.ex. "https://www.example.com");
• Telefon-URL:er: Gör det möjligt för användare att initiera telefonsamtal direkt från webbläsaren när de klickar. Formateras som "tel:phone-number". Det är viktigt att inkludera landskod och ta bort eventuella specialtecken eller mellanslag från telefonnumret (t.ex. "tel:+123456789");
• E-post-URL:er: Gör det möjligt för användare att skapa e-postmeddelanden när de klickar. Formateras som "mailto:email-address". Det är viktigt att inkludera hela e-postadressen efter mailto: (t.ex. "mailto:example@example.com").

Exempel:

I exemplet ovan:

• <a>-taggen skapar hyperlänkar med olika destinationer;
• href-attributet anger olika URL:er, inklusive absoluta URL:er, telefonnummer och e-postadresser.

Andra användbara attribut

<a>-taggen har flera attribut som kan användas för att specificera egenskaper för hyperlänkar. Några vanliga attribut inkluderar:

• target="_blank": Anger var det länkade dokumentet ska öppnas. "_blank" öppnar länken i ett nytt fönster eller flik;
• download: Anger att målet kommer att laddas ner när användaren klickar på hyperlänken. Detta attribut kan ha ett värde för att ange filnamnet för att spara resursen.

Exempel:

I det här exemplet:

• Attributet href anger URL:en till den länkade resursen;
• Attributet target öppnar länken i ett nytt fönster eller en ny flik.

Knappar

Taggen <button> skapar klickbara knappar på webbsidor. Den möjliggör för användare att interagera med webbsidan genom att utlösa åtgärder såsom att skicka in ett formulär eller köra JavaScript-kod. Även om vi inte fokuserar på JavaScript i denna kurs är det viktigt att känna till att denna möjlighet finns.

Typer av knappar

• Standardknapp (<button type="button">): En allmän knapp som används för olika åtgärder på webbsidan, såsom att utlösa JavaScript-funktioner eller navigera till en annan sida;
• Skicka-knapp (<button type="submit">): Används i ett formulär för att skicka formulärdata till en server;
• Återställningsknapp (<button type="reset">): Används i ett formulär för att återställa formulärfälten till deras standardvärden.

Exempel:

I exemplet ovan:

• Den första knappen är en standardknapp med ett onclick-attribut som utlöser en varning när den klickas på;
• Den andra knappen är en skicka-knapp som skickar formulärdata till servern;
• Den tredje knappen är en återställningsknapp som återställer formulärfälten till deras standardvärden.

Videohandledning