Which block tag should I use to make non-hierarchichal titles?

Editing
1

Which block tag should I use to make non-hierarchichal titles? They should be styled like ordinary test that is made bold and but should not be separated from the text or table that follows. I used to format them as heading 6 but I realize that this is not good in the context of accessibility (skipping heading levels). My first idea was “preformated text” but this behaves “strange” while editing (no new paragraph when enter is pressed)

2

Hi Thomas. My understanding is that H1-H6 elements are defined in the HTML spec as being intended for hierarchical heading elements within sections (see HTML Standard). The HTML5 recommendations state that

HTML does not have a dedicated mechanism for marking up subheadings, alternative titles or taglines. … h1 – h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. [source]

If you want to format a title differently than the surrounding text and adhere to a ‘separation of semantic content from presentation is the right way to make websites’ perspective, I think the general recommendation would be to use a <span> element or to use <strong> tags or even <em> tags. You can write CSS rules for these elements/tags however you see fit.

3

Hi Steel! Thank you! But how do you target the parent tag in css to avoid page-break-after? I never figured out how to select a paragraph that is fully bolded/emphasized via inline tags like span or other inline tags. Am I missing something here? To have a page-break-after:avoid on an inline tag would not result in the desires effect, right?

4

Hi Thomas, there are no parent selectors in CSS, as I’m sure you’re aware. If you want to apply the page-break-after:avoid declaration to a ‘title,’ I’d probably recommend using a class for each occurrence of the element. For example, you could use a <span class="title> element for each of these titles and then use display: block and page-break-after:avoid for span.class, in addition to any styling rules you wanted to use (font-weight, etc.). You could also do the same thing with elements that display as block elements by default, like <p> (this would let you leave out the additional display:block rule that you’d be using with a span).

5

Hi Steel! Thank you for pointing out the solution, especially the part with the display: block. So i could add two rules, one for the p.class and one for the span.class. Some authors will select the text first and then click the class button, leading to span.class and others will just click the class button leading to p.class. Question: Can I predefine classes somewhere that can be selected via drop down when clicking the “apply class” button? There was such a thing for tables in the archived table class plugin. That would make “apply class” more “author-friendly” (authors have to insert exactly those classes that are styled in the custom css).

Link to the archived table class plugin: https://github.com/pressbooks/pressbooks-table-classes