Those are headers, not paragraphs, and should be listed as an <h1>, <h2> etc element. If there’s a header on the whole page, then it should be <h1> and these might each be an <h2>. Then your CSS would style them as: .admonition.note h2 {font-weight:700;..}.
Thank you. On the page, there is an H1 which is the site title. It’s a blog where each post has an H2 title, and under that title, there can be H3 and H4 subsections. I’m not sure in which section the admonition will appear. I can make the admonition an H2 with a custom style, but that H2 might be placed inside an H3 or H4. Is that a problem?
I don’t think that’s an issue to make it an H2, but if you generally will have these admonitions inside H3 or H4 sections, then maybe they should be H5?
Yes, I was thinking about using an H5 since that’s the size I need, I mean a smaller size heading. I just need to override the font because I’ve set all the headings to a serif font, and I want the admonition titles to be sans-serif.
Sounds good, though I would recommend not counting on the default sizes of the H1, etc tags, but setting them in your own css. Then you won’t be surprised or annoyed when some other browser uses a different default than you expect
If you are thinking in terms of HTML semantics, why not consider the <aside> element to wrap these notes in. That’s what they are: little asides or notes that are parenthetical to the main text. I wouldn’t even bother to use headings within them, as those headings will never really gel with the overall structure of the page, no matter what the structure.
The choice of an <h1> – <h6> element has nothing to do with an
arbitrary font size. which you might wish to use.
.
They are meant to be deployed in a logical order.
If you are thinking in terms of HTML semantics, why not consider the <aside> element to wrap these notes in. That’s what they are: little asides or notes that are parenthetical to the main text. I wouldn’t even bother to use headings within them, as those headings will never really gel with the overall structure of the page, no matter what the structure.
Do you mean to replace the div with an aside, like so?
<aside class="admonition note">
<h5 class="admonition-title">NOTE</h5>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique aperiam repudiandae delectus culpa doloremque, voluptatibus sapiente blanditiis impedit id possimus soluta non architecto atque neque in deserunt alias magni vero?</p>
</aside>
I’m not a native speaker, but as I understood from my reading they need to follow a logical order. In my case the order won’t be logical. I’ll probably stick to using a paragraph then for titles.
BTW, the W3C website you linked also uses these callouts directly on their page. After checking their code with the inspector, I noticed they use <div> elements, even though I think the aside would be better as a previous user mentioned. They don’t have a header like I do.
Yes. But I wouldn’t use the h5 in there, but just paragraph text, as you’ve mentioned above. If you did stick with a heading, it would be better to say more than “note”, so that it’s at least a meaningful heading. But really, it would just be fluff, as the note text itself will explain what the note is about.
Thank you. I appreciate your time. Can I have more than one <aside> on a page? If there are two or three such callouts in a document, would that be a problem?
Also, I’m unsure if the <aside> elements need to stand on their own, even without the main content. I think they should. If the callout doesn’t make sense without the related content, then I’m not certain if <aside> is the appropriate element to use, although I don’t mean to imply that you are wrong.
Either way is fine. From an HTML point of view, they are for anything that’s not the direct subject of the page/content. they are often used for sidebars on a web page, for example, where you might put the menu. But I really like them for things like notes within content. (I always picture stage actors turning to the audience and interacting with them, with a hand up to their mouth.)
In my view <aside> is definitely the best element to use here.
I see here that <header> can be a descendant of <aside> so I suggest you use <header> for the headings within each <aside>. This may be contentious .
The main content of an <article> for example should make full sense if it is read without reading any asides. Asides should provide additional information or comments. In my view, asides should be placed within the article to which they relate: either where they are most appropriate or at the end.
I suggest heading tags <h1>…<h6> should not be used within asides because asides are essentially not really part of the document structure on a web page.
I would disagree but I would not say you are wrong
The way I see it is that a header element is used to group the header content just as a div would do but the header element having more semantic meaning.
However if there is just one item in the header then there is no need to group that item with a header. Just use the h1 - h6 at the correct level. It’s less code and a gives a better document outline for accessibility as that is not implemented for the header element.
e.g. I would use a header like this:
<header>
<h2>The Planet Earth</h2>
<p>
Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
Jane Smith
</p>
</header>
<p>Some content relating to the above here ...</p>
But if there was only one item in the header I would do this without the header tag at all:
<h2>The Planet Earth</h2>
<p>Some content relating to the above here ...</p>
The header element was only necessary in the first example because there was more information about that header present.
Also note that aside and section elements etc. are really meant to group semantic content so having bare text inside them is not really semantic and does not aid the document outline or accessibility.
The h2 is assuming that the note falls under an h1 otherwise the h2 should be changed to the correct level of that document section.
There is also a large debate by the real experts about what is the correct element to use and there are many differing opinions or calls for a callout type of element.
Note that an aside should not be used for parentheticals which are what notes seem to be to me (but I may be wrong).
In the end we can debate semantics all day and if even the experts are confused I think you have to make your own mind up and do what you think best knowing what the pitfalls maybe.
.