html5 semantic tag for an article summary and highlight

Question

I am looking for a proper html5 tag which I can use for marking summary of a very lengthy article. The summary itself can span for a paragraph or two.

I know there is a <summary> tag in html5 but this tag behaves in conjunction with <details> tag.

and secondly, I want to highlight a paragraph or two in the middle of a lengthly article. These highlighted section are important text that needs to be prominently displayed. Is there any html5 tag for this? or should I just use a class for highlighting? The point is, it's just not visual importance, but includes semantic importance.

Answer 1

No, there is no block-level element for importance, and no element whatsoever for a summary (the summary element inside details is not really for a summary at all but rather a title of a kind).

In traditional HTML up to and including HTML 4.01 (and XHTML 1.0), em and strong indicate emphasis, but their definitions are very vague. In practice, they are little else than pseudo-semantic counterparts of italic and bolding, i and b. HTML5 makes the topic even more confusing by distinguishing between “stress emphasis” (which “changes the meaning of the sentence”) and “strong importance, seriousness, or urgency” without really defining the difference. In any case, em and strong are text-level (inline) markup, intended for individual words or short phrases rather than entire sentences, still less paragraphs or sequences of paragraphs.

The closest you can get is <p><strong>...</strong></p>, but it is questionable whether this is a good idea. It’s surely not the way strong is meant to be used, but it’s formally valid.

Thus, the practical approach is to use div elements (or maybe p elements) with a class attribute and suitable styling.