Question

I've been looking for an HTML5 element to mark text in parentheses. My first instinct is to use the <ASIDE> element, but the HTML5 definition for this explicitly says:

Note: It's not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.

What, then, should be used for parentheticals?

Implementation


Below is what I ended up using. Thanks to unor for pointing out that <SMALL> is defined to represent "side comments", which, IMO, includes parentheticals.

CSS:

SMALL.parenthetical {
    font-size: inherit;
}
    SMALL.parenthetical:before {
        content: "(";
    }
    SMALL.parenthetical:after {
        content: ")";
    }

HTML:

<P>Today I wrote some code <SMALL CLASS="parenthetical">In CSS and HTML</SMALL> that helped me out greatly</P>
Was it helpful?

Solution

There is no specific element for parentheses.

In some cases the small element might be appropriate.

You have to use the punctuation marks (e.g., the round brackets ( and )) explicitly as part of the HTML (so not included via CSS content).

If you want to be able to style the whole parenthesis resp. the brackets, you should use span elements, as they don’t have any meaning. For example:

<p>At vero eos duo <span class="parenthesis">(consetetur sadipscing elitr)</span> dolores et ea rebum.</p> 

<p>At vero eos duo <span class="parenthesis-start">(</span>consetetur sadipscing elitr<span class="parenthesis-end">)</span> dolores et ea rebum.</p>

Now you could visually hide the brackets and add other punctuation marks (or similar) via CSS’s ::after and ::before pseudo-elements.

OTHER TIPS

This has exactly what you are looking for if I am not wrong.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top