De inline opmaak code bestaan al sinds het begin van het web. Bekent zijn zaken als vet, cursief, onderstreept, doorgestreept. Deze codes worden in de alinea aangebracht.
Met de tag <span> kunnen we een stuk tekst overspannen en er andere eigenschappen aan geven. Een voorbeld hiervan is:
Een stuk tekst met speciale eigenschappen.
De bijbehorende code is:
<p>Een stuk tekst met <span class="blauw">speciale eigenschappen</span>.</p> of
<p>Een stuk tekst met <span style="color:#00f">speciale eigenschappen</span>.</p>
Om een stuk tekst vet afgedrukt te krijgen gebruiken we de tag <strong>. De oude tag <b> wordt afgeraden. In XHTML 2.0 is deze zelfs geheel verdwenen.
Deze tekst is vet afgedrukt.
De code is:
<p>Deze tekst is <strong>vet</strong> afgedrukt.</p>
Op deze wijze kan het ook en het past beter in de methode. De code is:
<p>Deze tekst is <span style="font-weight:bold">vet</span> afgedrukt.</p> of korter
<p>Deze tekst is <span class="bold">vet</span> afgedrukt.</p>
Om een stuk tekst cursief afgedrukt te krijgen gebruiken we de tag <em>. De oude tag <i> wordt afgeraden. In XHTML 2.0 is deze zelfs geheel verdwenen.
Deze tekst is cursief afgedrukt.
De code is:
<p>Deze tekst is <em>cursief</em> afgedrukt.</p>
Op deze wijze kan het ook en het past beter in de methode. De code is:
<p>Deze tekst is <span style="font-style:italic">cursief</span> afgedrukt.</p> of korter
<p>Deze tekst is <span class="cursief">cursief</span> afgedrukt.</p>
Om een tekst vet en cursief moeten we twee codes gebruiken strong en em.
Deze tekst is vet en cursief afgedrukt.
De code is:
<p>Deze tekst is <strong><em>vet en cursief</em></strong> afgedrukt.</p> of beter
<p>Deze tekst is <span class="bi">vet en cursief</span> afgedrukt.</p>
Wat opvalt is dat het laatst geopende element als eerste gesloten wordt.
Oorspronkelijk werd dit gedaan met de <u> en </u> tags. Deze zijn vervallen en dienen via styleïnformatie gemaakt te worden.
Het gebruik van ondersteepte tekst wordt afgeraden omdat de lezer hier een link verwacht die er niet is. Zeker als je deze tekst uitprint in zw/wit lijkt het erop dat er een link in de tekst geplaatst was.
Deze tekst is onderstreept, maar is geen link.
<p>Deze tekst is <span style="text-decoration:underline">onderstreept</span>, maar is geen link.</p>
Om gekleurde teksten te gebruiken hebben we alleen de optie om dat via de <span> tag te doen. Het makkelijkste is om in de stylesheet classes aan te maken en deze te gebruiken.
Om een tekst in magenta af te drukken maken we de ondestaande code:
<p>Deze tekst is in <span class="magenta">magenta</span> geschreven.</p>
Wilt u getallen verhoogd in de tekst zetten zoals bij vierkant of kubieke meter gebruikelijk is dan zetten we dit tussen <sup> en </sup> tags.
De inhoud van dit bad is 750 m3.
<p>De inhoud van dit bad is 750 m<sup>3</sup>.</p>
Bij gebruik van de stylemethode gebruiken we style="vertical-align:super".
Wilt u cijfers of letters verlaagt in de tekst zetten zoals bij CO2 dan zetten we dit tussen <sub> en </sub> tags.
Methaan (CH4) en kooldioxide (CO2) zijn broeikasgassen.
<p>Methaan (CH<sub>4</sub>) en kooldioxide (CO<sub>2</sub>) zijn broeikasgassen.</p>
Bij gebruik van de stylemethode gebruiken we style="vertical-align:sub".
Style en class zijn beide attribuuts die in vrijwel alle tags gebruikt kan worden, waardoor de eigenschappen van de tag aangepast kan worden. Beide zijn onderdeel van het stylesheet systeem.
In de attribuut style plaatsen we de opmaakcode op de zelfde manier als in de stylesheet. We kunnen dus meerdere eigenschappen hierin plaatsen.
De tekst staat in blauw op een gele achtergrond.
We maken dit door de volgende style informatie aan de p tag toe te voegen:
<p style="color:#00f; background-color:#ff0">De tekst staat in blauw op een gele achtergrond.</p>
Hebben we de blauwe tekst op een gele achtergrond vaker nodig, dan is het handiger om een class in de stylesheet aan te maken.
In de stylesheet plaatsen we:
.bog {color:#00f; background-color:#ff0}
De htmlcode wordt dan:
<p class="bog">De tekst staat in blauw op een gele achtergrond.</p>
Het voordeel van werken met classes is dat je minder hoeft in te typen en worden centraal beheert.