Textrelaterade taggar

Denna artikel förklarar taggar relaterade till text.

Förklaringen är uppdelad i semantiska och icke-semantiska taggar.

YouTube Video

Skapa CSS för förhandsvisning

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

Grundläggande textrelaterade taggar

<div> tagg

1<div>This is a division of content.</div>

• <div>-taggen är ett blockelement som används för att skapa avsnitt inom HTML.

• <div>-taggen är en icke-semantisk tag.

  När man fokuserar på semantisk HTML kan meningsfulla taggar (som <section>, <article>) användas. Detta hjälper sökmotorer och skärmläsare att bättre förstå sidans innehåll.

• Genom att kombinera det med CSS och JavaScript kan du styra sidans utseende och beteende.

  <div>-taggen används för att gruppera innehåll på en sida som ett blockelement. Det används främst i kombination med CSS och JavaScript för att justera sidlayout, stil och manipulera element.

<p> tagg

1<p>This is a paragraph of text.</p>

• <p>-taggen är ett element som används för att definiera ett stycke i HTML. <p> representerar ett stycke och används främst för att gruppera och visa text. Den hjälper till att göra innehållet lättare att läsa genom att visuellt separera textavsnitt.
• Du kan inte placera andra blockelement som en annan <p>-tagg eller en <div>-tagg inuti en <p>-tagg. Detta är förbjudet enligt HTML-specifikationen. Om du gör det kommer webbläsaren automatiskt att stänga taggen, och den kommer inte att visas korrekt.

<a> tagg

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

• <a>-taggen används för att skapa länkar.

  <a>-taggen används för att skapa länkar till andra sidor, externa webbplatser eller filer. href-attributet används för att specificera länkens destination.

• Den kan användas för text- eller bildlänkar, och genom att använda target="_blank" öppnas länken i en ny flik.

• target-attributet används för att specificera hur den länkade destinationen ska visas.

  • _self (standard): Öppnar länken i det aktuella fönstret eller fliken.
  • _blank: Öppnar länken i ett nytt fönster eller en ny flik.
  • _parent: Öppnar länken i den överordnade ramen.
  • _top: Öppnar länken i hela fönstret och ignorerar eventuella ramar.

• title-attributet används för att visa en verktygstips på en länk. När en användare svävar över länken, visas den angivna titeln.

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

• <a>-taggen används också för att hoppa till specifika platser inom samma sida. För att uppnå detta, sätter du ett id-attribut på målobjektet och använder detta id i länkens href-attribut.

<span> tagg

1Here is some <span style="color: red;">highlighted text

• <span>-taggen är ett inline-element.

  <span>-taggen är ett inline-element, så den bryter inte raden när den används mellan text, länkar, bilder eller andra inline-element. Den passar naturligt in i sidans flöde.

• Du kan tillämpa specifika stilar delvis.

  När du vill tillämpa en stil på endast en del av dokumentet kan du använda <span>-taggen för att tilldela en CSS-klass eller ett ID och tillämpa stilar på ett specifikt område.

• <span>-taggen är ett icke-semantiskt element.

  Eftersom <span>-taggen inte har någon specifik betydelse eller strukturell roll, används den enbart för styling eller skriptändamål. När semantisk betoning behövs är det mer lämpligt att använda semantiska taggar som <strong> eller <em>, vilka kommer att introduceras senare.

<br>-tagg

1Here is some text with a <br> line break.

• <br>-taggen är ett inline-element.

  Eftersom <br>-taggen är ett inline-element tar den inte upp hela blocket och skapar en radbrytning i texten där den placeras. Medan <p>-taggen lägger till marginal ovan och under för att separera stycken, skapar <br>-taggen en radbrytning utan att lägga till någon marginal.

• Det är en självstängande tagg, så en avslutande tagg (</br>) behövs inte.

• Det är bäst att undvika att överanvända den och istället använda <p>-taggar eller CSS för styckebrytningar eller layoutjusteringar.

  När du organiserar text i stycken är det mer lämpligt att använda <p>-taggen. Det rekommenderas också att använda CSS för layoutjusteringar. Till exempel kan användningen av white-space-egenskapen i CSS visa radbrytningar och mellanslag i text som de visas.

<hr>-tagg

1This is some text.<hr>This is another section of text.

• <hr>-taggen är ett blockelement.

  <hr>-taggen används för att infoga en horisontell linje för att visuellt separera innehållsavsnitt. Den kan också användas för att ange ett tematiskt avbrott, vilket ger den betydelse baserat på sammanhang.

• Den är en självstängande tagg, så en sluttagg (</hr>) är inte nödvändig.

• Du kan anpassa dess färg, längd och tjocklek med hjälp av CSS.

Semantiska textrelaterade taggar

Från <h1>-tagg till <h6>-tagg

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

• Taggarna <h1> till <h6> är rubriktaggar som används i HTML.

  <h1>-taggen representerar den viktigaste rubriken och används vanligtvis som huvudtitel för hela sidan. Det är vanligt att använda endast en <h1>-tagg per HTML-dokument.

  <h2>-taggen är den näst viktigaste rubriken efter <h1> och används för avsnitt eller kapitelrubriker inom sidan.

  <h3>-taggen representerar undertexter eller mindre avsnitt under <h2>.

  Taggarna <h4>, <h5>, och <h6> representerar lägre nivåers rubriker, används för mer detaljerade punkter eller avsnittsrubriker.

• Rubriktaggar indikerar textens betydelse och hjälper till att skapa den logiska strukturen på en sida. Sökmotorer använder också rubriktaggar för att förstå sidans innehåll.

<strong>-tagg

1<strong>Important text</strong> to emphasize significance.

• <strong>-taggen är en HTML-tagg som används för att indikera textens betydelse eller betoning och visas vanligtvis i fetstil.

• <strong>-taggen är en semantisk tagg, och dess huvudsyfte är att tillföra betydelse.

  Det kan indikera att texten är kontextuellt viktig. Till exempel kan det visa textens betydelse för sökmotorer, vilket gör det användbart för SEO. Det förmedlar också textens betydelse till användare med skärmläsare. Däremot är <b>-taggen, som kommer att introduceras senare, helt enkelt en tagg för att göra texten fet och ger ingen semantisk betoning.

<em>-tagg

1<em>Emphasized text</em> for italics and emphasis.

• <em>-taggen är en HTML-tagg som används för att indikera betydelse eller betoning i text och visas vanligtvis i kursiv stil.

• <em>-taggen är en semantisk tagg, och dess huvudsyfte är att tillföra mening.

  Liksom <strong>-taggen kan det indikera att texten är kontextuellt viktig. <strong>-taggen visas vanligtvis i fetstil, medan <em>-taggen visas i kursiv stil. Både <strong> och <em> känns igen av skärmläsare och sökmotorer för semantisk betoning, men <strong> indikerar en starkare betydelse, medan <em> förmedlar emotionell betoning. Dessutom är <i>-taggen, som kommer att introduceras senare, endast till för att kursivera text och tillför ingen semantisk betoning.

<mark>-tagg

1<mark>Highlighted text</mark> for attention.

• <mark>-taggen används för att indikera att specifik text är kontextuellt viktig. Det är användbart för att markera sökresultat eller nyckelpunkter.
• Som standard visas text innesluten i <mark>-taggen med en gul bakgrund, vilket visuellt betonar dess betydelse.

<del>-tagg

1<del>Deleted text</del> shows removed content.

• <del>-taggen används för att indikera att text har tagits bort eller ändrats. Denna tagg är användbar för att visa ändringshistorik eller revisioner av text.

• Text som omsluts av <del>-taggen visas vanligtvis med en genomstrykning. Detta indikerar visuellt det borttagna innehållet.

  Text som omsluts av <del>-taggen känns också igen som borttagen av skärmläsare. Detta gör att innehåll som inte är visuellt uppenbart ändå kan förstås.

<ins>-tagg

1<ins>Inserted text</ins> shows added content.

• <ins> taggen används för att ange nyinlagt eller ändrat text i ett dokument. Denna tagg är användbar för att visa historik av texttillägg eller ändringar.

• I webbläsare visas text inom <ins> taggen vanligtvis med en understrykning. Detta visar visuellt tillagt innehåll.

  Text inom <ins> taggen identifieras också som nyligen tillagd av skärmläsare. Detta gör att innehåll som inte är visuellt uppenbart ändå kan förstås.

<abbr>-tagg

1<abbr title="World Health Organization">WHO</abbr>

• <abbr> taggen är ett inline-element som används för att ange förkortningar eller akronymer. Att använda denna tagg ger den fullständiga innebörden av förkortningar och bidrar till att förbättra SEO och tillgänglighet. Det hjälper särskilt läsare som är obekanta med förkortningen och användare av skärmläsare att bättre förstå dess innehåll.

Textdekorationsrelaterade taggar

<b>-tagg

1<b>Bold text</b> without semantic emphasis.

• <b> taggen är ett inline-element som används för att göra text fet. Precis som de andra taggar vi kommer att presentera, används den för visuell betoning men inte för semantisk betoning.

<i>-tagg

1<i>Italic text</i> for style.

• <i> taggen är ett inline-element som används för att kursivera text.

<u> tagg

1<u>Underlined text</u> for decoration.

• <u> taggen är ett inline-element som används för att understryka text.

<small> tagg

1<small>This is small text.</small>

• <small> taggen är ett inline-element som används för att visa text i en mindre storlek. Den används vanligtvis för att representera kompletterande information eller kommentarer som är sekundära till huvudtexten.

<s> tagg

1<s>Strikethrough text</s>

• <s> taggen är ett inline-element som används för att dra ett genomstrykning på text.

<sub> tagg

1H<sub>2</sub>O

• <sub> taggen är ett inline-element som används för att visa text som nedsänkt.

<sup> tagg

1E = mc<sup>2</sup>

• <sup> taggen är ett inline-element som används för att visa text som upphöjd.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video