Attributen
Dit element bevat alleen de globale attributen.
Het align-attribuut op <p>-tags is verouderd en mag niet worden gebruikt.
Toegankelijkheid
Het opdelen van inhoud in alinea's maakt een pagina toegankelijker. Schermlezers en andere ondersteunende technologie bieden snelkoppelingen waarmee gebruikers naar de volgende of vorige alinea kunnen springen, waardoor zij inhoud kunnen doorlopen op een manier zoals witruimte visuele gebruikers helpt om rond te kijken.
Het gebruik van lege <p>-elementen om ruimte tussen alinea's toe te voegen, is problematisch voor mensen die navigeren met schermlezertechnologie. Schermlezers kunnen de aanwezigheid van de alinea aankondigen, maar niet de inhoud daarin — omdat die er niet is. Dit kan verwarrend en frustrerend zijn voor de gebruiker van de schermlezer.
Als extra ruimte gewenst is, gebruik dan CSS-eigenschappen zoals margin om dit effect te bereiken:
p {
margin-bottom: 2em; /* increase white space after a paragraph */
}Voorbeelden
HTML
<p>
This is the first paragraph of text. This is the first paragraph of text. This
is the first paragraph of text. This is the first paragraph of text.
</p>
<p>
This is the second paragraph. This is the second paragraph. This is the second
paragraph. This is the second paragraph.
</p>Resultaat
Alinea's opmaken
Standaard scheiden browsers alinea's met één lege regel. Alternatieve scheidingsmethoden, zoals inspringing van de eerste regel, kunnen worden bereikt met CSS:
HTML
<p>
Separating paragraphs with blank lines is easiest for readers to scan, but
they can also be separated by indenting their first lines. This is often used
to take up less space, such as to save paper in print.
</p>
<p>
Writing that is intended to be edited, such as school papers and rough drafts,
uses both blank lines and indentation for separation. In finished works,
combining both is considered redundant and amateurish.
</p>
<p>
In very old writing, paragraphs were separated with a special character: ¶,
the <i>pilcrow</i>. Nowadays, this is considered claustrophobic and hard to
read.
</p>
<p>
How hard to read? See for yourself:
<button data-toggle-text="Oh no! Switch back!">
Use pilcrow for paragraphs
</button>
</p>CSS
p {
margin: 0;
text-indent: 3ch;
}
p.pilcrow {
text-indent: 0;
display: inline;
}
p.pilcrow + p.pilcrow::before {
content: " ¶ ";
}JavaScript
document.querySelector("button").addEventListener("click", (event) => {
document.querySelectorAll("p").forEach((paragraph) => {
paragraph.classList.toggle("pilcrow");
});
[event.target.innerText, event.target.dataset.toggleText] = [
event.target.dataset.toggleText,
event.target.innerText,
];
});Resultaat
Technische samenvatting
| Inhoudscategorieën | Flow content, palpable content. |
|---|---|
| Toegestane inhoud | Phrasing content. |
| Weglaten van tags |
De begintag is verplicht. De eindtag mag worden weggelaten als het
<p>-element onmiddellijk wordt gevolgd door een
<address>,
<article>, <aside>,
<blockquote>, <details>, <div>,
<dl>, <fieldset>,
<figcaption>, <figure>,
<footer>, <form>,
h1, h2,
h3, h4,
h5, h6,
<header>, <hgroup>, <hr>,
<main>, <menu>, <nav>,
<ol>, <pre>, <search>,
<section>, <table>,
<ul> of een ander <p>-element,
of als er geen inhoud meer is in het bovenliggende element en dat
bovenliggende element geen <a>, <audio>,
<del>, <ins>, <map>,
<noscript> of <video>-element is,
of een autonoom aangepast element (custom element).
|
| Toegestane oudertags | Elk element dat flow content accepteert. |
| Impliciete ARIA-rol | paragraph |
| Toegestane ARIA-rollen | Alle |
| DOM-interface | HTMLParagraphElement |