HTML karakters: Hoe werkt het [+ spiekbrief]

HTML karakters: Hoe werkt het [+ spiekbrief] - Web Rabbitz 🥕

Brent Verkerk 8 Jun, 2022

Bij het schrijven van HTML kan het voorkomen dat u een teken wilt invoegen dat u niet zomaar kunt typen. Veel gebruikelijke symbolen, waaronder valutasymbolen, wiskundige operatoren en juridische symbolen (zoals © en ®) zijn niet aanwezig op een standard toetsenbord.

Er is ook een probleem als u een teken op uw pagina wilt plaatsen dat al in HTML wordt gebruikt. HTML interpreteert bijvoorbeeld punthaken (< en >) als het begin en einde van een tag, dus u kunt er geen in HTML schrijven zoals een letter of cijfer. Het wordt niet weergegeven en dat kan problemen met de pagina veroorzaken.

De oplossing voor beide problemen is het gebruik van HTML-entiteiten. In dit bericht leert u hoe u HTML-entiteiten kunt gebruiken om speciale tekens op uw pagina in te voegen. We zullen ook enkele veelvoorkomende symbolen en hun entiteiten opsommen, zodat u ze gemakkelijk in uw document kunt plaatsen.

HTML Karakters toevoegen

Om symbolen in HTML toe te voegen, gebruiken website ontwikkelaars HTML-entiteiten. Een HTML-entiteit is een speciale tekenreeks (een reeks tekens) die begint met een ampersand (&), eindigt met een puntkomma (;), en die de entiteitsnaam of het entiteitsnummer voor een bepaald symbool bevat. Veel symbolen hebben gereserveerde HTML-entiteiten.

Om bijvoorbeeld het copyright-symbool (©) in HTML in te voegen, kunnen we de entiteit &copy; (de naam van de entiteit) of &#169; (het entiteitsnummer). Merk op hoe een extra hekje (#) voor het entiteitsnummer wordt geplaatst.

Als u een van deze entiteiten gebruikt, wordt het symbool correct weergegeven op de pagina:

Tekens die dubbel worden gebruikt als weergaveteken en functioneel HTML-teken, hebben ook hun eigen entiteiten — bijvoorbeeld punthaken, ampersand en aanhalingstekens:

Om entiteiten te plaatsen, kunt u ze typen of plakken uit een lijst (zoals die hieronder). Voor entiteiten die namen hebben, is het gemakkelijk om ze te onthouden en in te typen. Sommige oudere browsers verwerken de entiteitsnaam mogelijk niet. Gebruik het entiteitsnummer om te garanderen dat uw entiteit correct wordt weergegeven in alle browsers.

HTML spiekbrief

Soms kunt u een HTML-entiteit aan de naam onthouden. Andere keren moet je het opzoeken. Om u te helpen, is hier een lijst met veelvoorkomende symbolen samen met hun HTML-entiteiten in naam- en getalnotaties:

Interpunctie en grammaticale symbolen

SymboolEntiteit naamEntiteit nummerBeter bekend als...
  &nbsp; &#160; non-breaking space
& &amp; &#38; ampersand
' &apos; &#39; apostrof/enkel aanhalingsteken
" &quot; &#34; dubbel aanhalingsteken
&ldquo; &#147; links dubbel aanhalingsteken
&rdquo; &#148; rechts dubbel aanhalingsteken
&lsquo; &#145; links enkel aanhalingsteken
;&lsquo; &#146; rechts enkel aanhalingsteken
&ndash; &#150; en streepje
&mdash; &#151; em streepje
~ &tilde; &#126; tilde
¿ &iquest; &#191; omgekeerd vraagteken
¡ &iexcl; &#161; omgekeerd uitroepteken

 

Valutasymbolen

SymboolEntiteit naamEntiteit nummerBeter bekend als...
&euro; &#128; euro
£ &pound; &#163; pond sterling (Britse pond)
¥ &yen; &#165; yen
¢ &cent; &#162; cent
  &#8356; lira

 

Wiskundige symbolen

SymboolEntiteit naamEntiteit nummerBeter bekend als...
× &times; &#215; vermenigvuldiging
÷ &divide; &#247; deling
± &plusmn; &#177; plus of min
< &lt; &#60; minder dan
> &gt; &#62; groter dan
&le; &#8804; minder dan of gelijk aan
&ge; &#8805; meer dan of gelijk aan
&radic; &#8730; wortel van
&sum; &#8721; som
&infin; &#8734; oneindig
ƒ &fnof; &#131; functie
&int; &#8747; integraal
  &#8710; increment
&part; &#8706; gedeeltelijk differentieel
&prod; &#8719; product
  &#8729; bullet operator
&forall; &#8704; voor alles
&exist; &#8707; er bestaat
&isin; &#8712; is een element van de set
&notin; &#8713; is geen element van de set
&empty; &#8709; lege set
&ni; &#8715; onder de voorwaarde dat

 

Andere veel voorkomende symbolen

SymboolEntiteit naamEntiteit nummerBeter bekend als...
® &reg; &#174; geregistreerd handelsmerk
© &copy; &#169; copyright
&trade; &#153; trademark
&dagger; &#8224; dolk
&Dagger; &#8225; dubbele dolk
  &#8592; pijl naar links
  &#8594; pijl naar rechts
  &#8593; pijl omhoog
  &#8595; pijl omlaag
  &#9733; zwarte ster
  &#9734; witte ster
  &#9873; zwarte vlag
  &#9872; witte vlag
&spades; &#9824; zwart schoppen
&clubs; &#9827; zwart klaveren
&hearts; &#9829; zwart hart
&diams; &#9830; zwart ruiten
  &#9831; wit klaveren
  &#9828; wit schoppen
  &#9825; wit hart
  &#9825; wit ruiten
  &#9744; leeg vlakje
  &#9745; aangetikt vlakje met een vink
  &#9746; aangetikt vlakje met een kruis
  &#9787; zwarte smiley
  &#9786; witte smiley
  &#9785; fronsende smiley
  &#9774; peace symbool
  &#9842; recycling symbool

Voeg symbolen toe aan uw HTML.

Meestal zou u probleemloos tekstblokken moeten kunnen schrijven. Soms helpt het echter om te weten hoe HTML-entiteiten werken en hoe u ze in uw pagina's kunt verwerken. Het is een ander handig hulpmiddel voor webontwikkelaars en makers van inhoud, en wetende dat het je een stap dichter bij HTML-beheersing brengt.

Responsive voordelen video tag Web Rabbitz 🥕

Responsive voordelen video tag

Brent Verkerk 11 May, 2023

Het gebruik van video's op websites is de afgelopen jaren enorm toegenomen, en het is geen verrassing waarom. Video's zijn een geweldige manier om boeiende content te leveren en de aandacht van de bezoekers vast te houden. Maar om de meeste voordelen van video's te halen, moet je ervoor zorgen dat ze op alle apparaten goed worden weergegeven. Gelukkig maakt de responsive video tag het gemakkelijker om video's op elk schermformaat te bekijken.

10 tips voor een goede zakelijke website Web Rabbitz 🥕

10 tips voor een goede zakelijke website

Brent Verkerk 3 May, 2023

Consumenten leren zichzelf online beter kennen voordat ze een aankoop doen. Daarvoor is een goed werkende en professionele website essentieel. Maar eerst moeten consumenten uw website kunnen vinden tussen talloze websites. Wanneer iemand op internet zoekt naar een nieuwe schilderklus, kiest hij eerder iemand met een professionele en goed onderhouden website. Zelfs als je zo'n professional bent, is een goede website heel moeilijk zonder Hoe zorg je ervoor dat je website goed vindbaar is en er goed uitziet? Hier zijn 10 tips.

Hoe werkt het Picture tag? Web Rabbitz 🥕

Hoe werkt het Picture tag?

Brent Verkerk 27 April, 2023

Het picture-tag is een HTML-element dat wordt gebruikt om responsieve afbeeldingen te maken op websites. Het is een relatief nieuw element dat in HTML5 is geïntroduceerd en biedt webontwikkelaars een meer geavanceerde manier om afbeeldingen op verschillende schermformaten weer te geven. In dit artikel zullen we bespreken hoe het picture-tag werkt en enkele handige tips om het meeste uit jouw afbeeldingen te halen.

Economic Development Board Alphen Web Rabbitz 🥕
Stichting Kinderen van Lamin Village Web Rabbitz 🥕
Symantec Web Rabbitz 🥕
BMWT Web Rabbitz 🥕
Zilveren Kruis Web Rabbitz 🥕
Vereniging Sport en Gemeenten Web Rabbitz 🥕
DHL Web Rabbitz 🥕
Groothandel voor Bouw & Industrie Web Rabbitz 🥕

Copyright © 2020 Web Rabbitz Webdesign Waddinxveen. Algemene Voorwaarden