7 HTML Tags die je moet kennen als online schrijver of blogger

Belangrijkste opmerkingen

HTML speelt een cruciale rol bij het verspreiden van geschreven inhoud op internet, omdat webpagina’s afhankelijk zijn van de mogelijkheden om informatie op een aantrekkelijke manier weer te geven en te organiseren voor optimale indexering door zoekmachines.

Om volledige controle te hebben over de presentatie en esthetische aantrekkingskracht van geschreven werk, is het essentieel dat auteurs bekend zijn met fundamentele HTML-elementen zoals kopteksten, vetgedrukte en schuingedrukte tekst en paragraafteksten.

Lijsten, opsommingstekens en afbeeldingslabels kunnen worden gebruikt om de organisatie en esthetiek van artikelen te verbeteren, terwijl hyperlinks extra context bieden en de positie in zoekmachines verbeteren.

Het is een wijdverbreide misvatting onder sommige auteurs, waaronder auteurs die gespecialiseerd zijn in technologie, dat kennis van HTML niet nodig is. Voor inhoud die bedoeld is voor publicatie op het internet wordt kennis van HTML echter steeds relevanter en essentiëler dan aanvankelijk wordt gedacht.

Sites gebruiken HTML om inhoud weer te geven. Hoewel verschillende opmaakprogramma’s, siteontwikkelaars en platforms voor inhoudsbeheer het mogelijk maken om artikelen visueel te bewerken, is het belangrijk op te merken dat HTML-code een onderliggende rol blijft spelen in dit proces.

Om het uiterlijk van je inhoud volledig onder controle te krijgen en de presentatie ervan nauwkeurig aan te passen, is het essentieel om bekend te zijn met de belangrijkste HTML-elementen. Deze elementen hebben een aanzienlijke invloed op hoe een webpagina of website eruit ziet wat betreft lay-out, stijl en organisatie. Als gebruikers bekend zijn met het gebruik van deze elementen, kunnen ze hun digitale inhoud effectief vormgeven volgens specifieke voorkeuren en vereisten.

Kopteksten

Kopteksten maken het mogelijk om een bepaald segment of subsegment binnen een artikel samen te vatten. Gewoonlijk geven webbrowsers heading-tags weer in een groter en vetter lettertype, waardoor ze meer opvallen dan de omringende tekst.

Naast het overbrengen van visuele informatie door middel van koppen, geven ze een gevoel van organisatie en rangschikking aan de inhoud, waardoor web-crawling algoritmen de indeling van de webpagina gemakkelijker kunnen begrijpen.

Er worden zes genummerde heading-tags gebruikt, waarbij belangrijkere cijfers overeenkomen met lager gerangschikte headings. Het wordt aanbevolen om de tag te gebruiken voor de primaire titel van een webpagina, terwijl tags moeten worden gebruikt voor secties en tags voor subsecties.

Gezien de aard van je inhoud en je doelgroep is het verstandig om een geschikte organisatiestructuur te gebruiken. Hoewel en tags geschikt kunnen zijn voor ingewikkeld of juridisch georiënteerd materiaal, kan hun leesbaarheid problemen opleveren voor een algemeen publiek.

Koppen spelen een essentiële rol bij het opsplitsen van lange artikelen in meer hanteerbare segmenten, waardoor ze gemakkelijker te consumeren zijn voor lezers die muren van tekst intimiderend vinden. In tegenstelling tot passieve lezers die misschien door onaantrekkelijke inhoud heen bladeren, bieden koppen een gevoel van structuur dat actieve betrokkenheid bij het materiaal aanmoedigt. Met hun korte intermezzo’s tussen onderwerpen geven ze zowel schrijvers als lezers de kans om op adem te komen en te hergroeperen voordat ze zich weer in de discussie storten.

Zorg ervoor dat u elk heading-element afsluit met een passende closing tag, zoals .

Vet, cursief en andere tekstopmaak

Heading tags spelen een essentiële rol in het vormgeven van de algemene architectuur van een webpagina, terwijl meer specifieke opmaaktags zijn ontworpen om minieme details in de tekst aan te pakken. Als u bijvoorbeeld een bepaald deel van een zin wilt benadrukken, bieden deze tags een manier om het uiterlijk van de tekst te veranderen zonder de hiërarchische betekenis ervan te beïnvloeden.

⭐ voor vetgedrukte tekst .

⭐ voor cursieve tekst.

⭐ voor doorgestreepte tekst.

Markdown en content management tools repliceren vaak opmaak bij het overzetten van tekst vanuit alternatieve applicaties. Om deze informatie te verfijnen, moet je deze codes uit de originele bron verwijderen of anders de opmaak strippen bij het invoegen van gegevens om dergelijke problemen tijdens het eerste proces te voorkomen.

Alinea’s en spatiëring

Naast het gebruik van koppen om inhoud in afzonderlijke segmenten te organiseren, is het mogelijk om zowel de als elementen te gebruiken voor het afbakenen van alinea’s of het creëren van regelonderbrekingen.

Verscheidene visuele bewerkingsprogramma’s integreren deze markeringen automatisch bij het typen, zoals bij het indrukken van de enter-toets. Gebruikers die hun inhoud in een tekstgebaseerde editor samenstellen, kunnen deze attributen echter rechtstreeks in hun HTML-code opnemen.

Als je tekst schrijft waarvoor een visuele scheiding tussen regels nodig is zonder dat er een nieuwe alinea moet worden begonnen, is het gebruik van de HTML-tag voor zelf-sluiten een goede keuze. Dit is vooral relevant bij het schrijven van poëzie of andere literaire werken waar ideeën naadloos van de ene regel naar de andere overgaan en het maken van aparte alinea’s niet rechtvaardigen. In zulke gevallen zorgt het gebruik van de tag voor een soepele overgang terwijl de gewenste ruimtelijke verdeling behouden blijft.

De tag `

` is een HTML-element dat geen corresponderende afsluitende tegenhanger heeft en daarom onafhankelijk moet worden gebruikt. Deze eigenschap kan worden toegeschreven aan het feit dat het geen inhoud of beschrijving bevat of beïnvloedt.

Het gebruik van deze markeringen maakt het mogelijk om te voldoen aan vastgestelde richtlijnen met betrekking tot de esthetische kwaliteit van zowel geschreven als digitale inhoud, waardoor de geloofwaardigheid van de webpagina’s wordt vergroot, zowel voor menselijke bezoekers als voor algoritmen van zoekmachines.

Nummers en opsommingstekens

Lijsten zijn een effectief middel om informatie te ordenen wanneer meerdere items na elkaar worden gepresenteerd. Bij het afbakenen van een verzameling individuele onderdelen, zoals de ingrediënten van een recept of opeenvolgende instructies, zorgt het gebruik van lijsten voor een coherente organisatie.

Het element wordt gebruikt om een geordende of genummerde lijst te maken, terwijl de tag staat voor een ongeordende lijst met opgesomde items. De tag wordt gebruikt om individuele elementen binnen een van beide lijsttypen te definiëren.

Hier is een voorbeeld van hoe een geordende lijst bestaande uit vijf elementen eruit zou kunnen zien in HTML-indeling:cssEerste elementTweede elementDerde elementVierde elementVijfde element

 <ol>
     <li>alpha</li>
     <li>bravo</li>
     <li>charlie</li>
     <li>delta</li>
     <li>echo</li>
</ol>

De bovenstaande opmaak wordt, wanneer deze wordt weergegeven door een webbrowser, weergegeven in een indeling die lijkt op de volgende structuur:

Als je liever een opgesomde lijst gebruikt, vervang deze dan door om een opsommingstabel te krijgen.

De bijgeleverde HTML-code laat zien hoe je inhoud organiseert met behulp van geneste lijsten. De buitenste lijst wordt gedefinieerd door de tag met de identificatie “mijn-lijst”. Binnen de buitenste lijst zijn twee binnenste lijsten gemaakt met behulp van de tags en daarin genest zijn verdere lijstitems vertegenwoordigd door de elementen gevolgd door hun bijbehorende tekstbeschrijving verpakt in tags. Deze structuur zorgt voor een georganiseerde presentatie van gegevens op meerdere niveaus in een gemakkelijk verteerbaar formaat.

De taak vereist dat je een meer verfijnde en welsprekende versie van de gegeven tekst geeft met gebruik van de juiste taal en toon, die dezelfde betekenis overbrengt met behoud van een formele stijl.

 <ol>
  <li>alpha</li>
  <li>
    bravo
    <ol>
      <li>Hip</li>
      <li>Hip</li>
      <li>Hooray</li>
    </ol>
  </li>
  <li>charlie</li>
  <li>
    delta
    <ul>
      <li>Difference</li>
      <li>River mouth</li>
    </ul>
  </li>
  <li>echo</li>
</ol> 

Je mag geneste lijststructuren gebruiken, die een verscheidenheid aan lijstformaten omvatten, om meer ingewikkelde hiërarchieën te illustreren en het begrip van je lezer met betrekking tot het gegeven onderwerp te vergroten.

Een tabel maken

Wanneer je te maken hebt met grotere hoeveelheden onderling gerelateerde gegevens, kan het gebruik van tabellen een effectieve manier van organiseren zijn.

Om een HTML-tabel te maken, begin je met het element . Het moet alle informatie bevatten die je in de tabel wilt weergeven. Gebruik het element om elke rij van de tabel te definiëren en gebruik het element om individuele cellen binnen elke rij aan te geven. Als je een tabelkop wilt aangeven, kun je het element vervangen door het element , dat “tabelkop” aangeeft. Vergeet niet om overeenkomstige afsluitende elementen voor je tabel, rijen en cellen te gebruiken.

 <table>
     <tr>
          <th>Group 1</th>
          <th>Group 2</th>
     </tr>
     <tr>
          <td>Mark</td>
          <td>Belle</td>
     </tr>
     <tr>
          <td>Ralph</td>
          <td>Shane</td>
     </tr>
     <tr>
          <td>John</td>
          <td>Josie</td>
     </tr>
</table>

In zijn gerenderde vorm in een webbrowseromgeving zou de tabel er als volgt uit moeten zien:

Als je HTML gebruikt om een tabel te maken, is het belangrijk om te weten dat het proces rij voor rij gebeurt en niet kolom voor kolom. Je kunt echter moderne CSS-technieken gebruiken om je tabel te voorzien van verschillende stijlelementen, zoals omrandingen, gekleurde rijen en andere versieringen.

Afbeeldingen toevoegen

Het opnemen van visuele elementen op een webpagina brengt unieke uitdagingen met zich mee in vergelijking met het opmaken van tekstuele inhoud. Afbeeldingen worden meestal niet taalkundig overgebracht, waardoor ze in afzonderlijke bestanden moeten worden opgeslagen. Daarom moet er een methode worden vastgesteld om de locatie van deze bestanden te bepalen in combinatie met een bijbehorende HTML-tag.

Het gebruik van het element maakt het mogelijk visuele afbeeldingen in een document op te nemen; het is echter noodzakelijk een HTML-functie te gebruiken die bekend staat als “attributen” om de locatie van het bijbehorende afbeeldingsbestand aan te geven. Deze attributen worden toegevoegd aan de identifier van de tag en gaan vooraf aan de afsluitende accolade. Elk attribuut heeft een naam en een bijbehorende waarde, die met elkaar verbonden zijn door middel van een gelijkheidsteken. Het is aan te raden om de waarden van de attributen tussen dubbele aanhalingstekens te zetten.

Hier is een voorbeeld:

 <img alt="tree leaves and branches"
    src="https://images.unsplash.com/photo-1532365673558-f9bb768644e7"> 

Het “src” attribuut, dat de bron aangeeft, specificeert de URL van de afbeelding die moet worden opgenomen. Dit kan een relationele of absolute URL zijn, afhankelijk van of het een externe afbeelding is of zich op dezelfde server bevindt.

Het “alt”-attribuut geeft de “alternatieve tekst” aan, die dient om een beschrijving te geven van de inhoud die in een afbeelding wordt afgebeeld. Het wordt over het algemeen aanbevolen om dit attribuut op te nemen omdat het waarde heeft voor zowel gebruikers van schermlezers als algoritmen van zoekmachines. Ongeacht of de kijker menselijk of geautomatiseerd is, kunnen degenen die de originele afbeelding om welke reden dan ook niet kunnen waarnemen, inzicht krijgen in de inhoud door het verstrekken van alt-tekst.

Browsers nemen de afbeelding op die wordt gespecificeerd door de bron-URL in het ‘src’-attribuut, waardoor deze naadloos in de webpagina wordt geïntegreerd:

In gevallen waarin de opgegeven bron-URL geen legitieme afbeelding is of in het geheel niet wordt weergegeven, tonen moderne webbrowsers over het algemeen een visueel nulbeeld, vergezeld van een alternatieve beschrijving die is opgenomen in het bijbehorende alt-attribuut.

Koppelingen toevoegen via HTML

Een opvallend kenmerk van HTML is de hyperlink, waarmee gebruikers tussen verschillende webpagina’s op hun eigen website of zelfs externe bronnen kunnen navigeren. Deze koppelingen vergemakkelijken niet alleen de toegang, maar geven ook extra relevantie en autoriteit aan de gepresenteerde inhoud, waardoor de zichtbaarheid en rangschikking in zoekmachineresultaten worden verbeterd.

Om een hyperlink op te nemen, maak je gebruik van het HTML-element met het “href”-attribuut, dat de URL bevat voor de bestemming van de link. Ingesloten in de tags en de bijbehorende , moet de ingekapselde tekst of aanvullende inhoud aanklikbaar worden, zodat lezers naar een andere webpagina kunnen navigeren door erop te klikken.

Hier volgt een demonstratie van het maken van een hyperlink met HTML:phpLink TextDeze code genereert een klikbare link op een webpagina die gebruikers naar https://www.example.com leidt. De tekst “Linktekst” wordt weergegeven als de zichtbare hyperlink waarmee gebruikers kunnen interageren.

 <a href="https://www.makeuseof.com/author/jowi-morales">
 Jowi Morales All Things N Page
</a>

Kennis van HTML maakt je leven gemakkelijker

Hoewel veel Markdown-editors en Content Management Systemen een visuele bewerkingsinterface bieden, blijft fundamentele kennis van HTML waardevol.

Een grondige kennis van de innerlijke werking van HTML stelt je in staat om afwijkingen in het uiterlijk van je webinhoud te diagnosticeren en te corrigeren die met visuele bewerkingstools niet goed worden aangepakt. Hoewel deze hulpmiddelen nuttig zijn voor veel aspecten van HTML, zijn ze vaak niet toereikend voor alle mogelijke scenario’s, waardoor directe manipulatie van de opmaak van het document een essentiële vaardigheid is om zowel de esthetische aantrekkingskracht als de nauwkeurigheid van de online inhoud te waarborgen.