I'm trying to create a description by using <small> tag,
and I also have a large title with <h2> tag, and they are all inside a <header> tag,
this is what it looks like now:
<header>
<h2>User settings</h2>
<small>Yep, here's the settings for you.</small>
</header>
But I'm not sure if the following usage would be better to make those tags meaningful?
<header>
<h2>
User settings
<small>Yep, here's the settings for you.</small>
</h2>
</header>
Should I put <small> in <h2> instead of putting <small> in <header>?
well, it depends
if you put your <small> tag inside <h2> it will be more important (note that using <small> also affects importance)
on the other hand, some tools like html outliners will also list <small> content, which might not be desired behaviour
These options are not semantically equivalent. Putting small inside h2 means that the whole content of h2, including small content, is the heading that identifies the current section (or the whole page). For example, screen readers may read this whole long text as a document navigation option. With small outside h2, the section (or page) is identified with the short text that is the content of h2 element only.
Also, I doubt that the small element is the right choice for such sub-description. Wouldn't just p element (as suggested in W3C HTML spec for sub-headings) be more appropriate here?
Mozilla says: https://developer.mozilla.org/tr/docs/Web/HTML/Element/header
<header>
<hx></hx>
</header>
prefer <small> in <hx>
twitter bootstrap docs prefer small in hx
http://getbootstrap.com/css/#type-headings
Related
My goal is to use the correct H* tag (H1 to H6) in my html5 code.
I read here I shouldn't use <section> at all: "Why you should choose article over section : Browsers’ visual display of headings nested inside elements makes it look as if they are assigning a logical hierarchy to those headings. However, this is purely visual and is not communicated to assistive technologies"
but I feel that isn't true because of the answers to this popular question:
that says "sections in an article are like chapters in a book, articles in a section are like poems in a volume" and I want to use sections for their intended purpose.
The problem is this mdn page says "Important: There are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final W3C specification. Therefore the outline algorithm should not be used to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure."
The guy from the first link I posted does make a good point about halfway down that page where he says "browsers display different sizes of font depending on how deeply the is nested in <section>s”.
So am I correct in saying I have to correctly match H* tags to depth/nesting to achieve a good outline AND visual styling or is there a different way. eg this would be incorrect:
<body>
<h1> something </h1>
<section>
<h1> section heading for outline </h1>
<article>
<h1>my first news article</h1>
<p>stuff</p>
</article>
</section>
</body>
because screen readers can't properly process <section> for outlining.
and because browsers display different fonts according to level of nesting.
so then would this would be correct?
<body>
<h1> something </h1>
<section>
<h2> section heading for outline </h2>
<article>
<h3>my first news article</h3>
<p>stuff</p>
</article>
</section>
</body>
note: This is my first question I'm posting so please go easy on me if I've made a faux-pas, I'm new here :)
The document outline algorithm based on <h1> has been removed from the spec and actually never worked. In terms of heading levels, your last code example is the correct one.
Why the HTML Outlining Algorithm was removed from the spec – the truth will shock you!
There Is No Document Outline Algorithm
So you should not use it, and your quote holds true.
Authors are advised to use heading rank (h1-h6) to convey document structure.
Correctly using <section>
As to the question of using <section> vs <article>.
You shouldn’t avoid the latter due to styling issues. You already did your research and should stick to your outcome. You’d need to apply some styling yourself, though.
I’d also like to add the ARIA perspective on a page summary:
<article> has role article
An article is not a navigational landmark
and
<section> has role region, which is …
[…] sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page.
To do so, it is also noted
Authors MUST give each element with role region a brief label
So, let’s put it together
<body>
<h1> something </h1>
<section aria-labelledby="s1-heading">
<h2 id="s1-heading"> section heading for outline </h2>
<article>
<h3>my first news article</h3>
<p>stuff</p>
</article>
</section>
</body>
Is the article (or section) element appropriate on a homepage?
I am not sure since the content of homepage is mostly a bunch of summaries referring to the content that should be included in an article element (on a separate page).
A rule of thumb I follow is to only use <article> or <section> if there is a corresponding <h#>.
So this is more appropriate:
<h1>Home Page</h1>
<p>
Hi.
</p>
<article>
<h2>Sub-Head</h2>
<p>
Hello.
</p>
</article>
Than this:
<h1>Home Page</h1>
<p>
Hi.
</p>
<article>
<p>
Hello.
</p>
</article>
Do not add a heading just to make it work. The value of a heading should be determined by the nature of the content, not a desire to shoehorn the elements you want.
With an example URL or image of your intended layout and content, I could offer more context.
Also, consider that if you have one contiguous piece of content (like how a sub-page generally is about one thing), you would not wrap the entire page in <article> but you would wrap it in <main> instead.
For a bit more, check out this piece on <section> from W3C HTML5, WCAG, and ARIA spec participant and accessibility advocate Léonie Watson.
Is this correction correct semantically talking? I've written my doubts inside the HTML comments to explain my thoughts.
<article>
<h2>Movies</h2>
<h4>Genres</h4>
<p>Below you can see the <b>available genres</b>:</p>
<p>1. Action</p>
<p>2. War</p>
<p>3. Comedy</p>
<p>4. Horror</p>
</article>
VS
<section> <!-- Section instead of article? -->
<header>
<h2>Movies</h2>
<h4>Genres</h4><!-- Should i use to h tags inside the same header? http://www.w3.org/TR/html5/sections.html#headings-and-sections. There sais: "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. Instead use the markup patterns in the Common idioms without dedicated elements section of the specification."-->
<p>Below you can see the <b>available genres</b>:</p> <!-- <b> or <strong>?-->
</header>
<ol><!-- ol or ul and place the numbers? -->
<li>Action</li>
<li>War</li>
<li>Comedy</li>
<li>Horror</li>
</ol>
</section>
Section and header are fine. What is the function/interaction of the genres? If they will be menu options I would wrap in , otherwise I would use UL since they are not in a specific sequence which needs to be maintained.
<b> - "Represents a span of text to be stylistically offset from the normal prose without conveying any extra importance".
<strong> - "Represents strong importance for its contents." source
Other tags are dependent on their context.
Article is wrong - this doesn't make sense to be in a RSS feed for instance. section would be OK, div might be better.
The Bold is just for formatting, not for emphasis so b would be OK.
If you stick with section, header it should have an H1 and H2, not H3 and 4.
If the order matters, ol, if not ul.
In HTML5, you can write comments wherever you want.
<section>
<p> <!--new P tag -->
<span>new <!--this new paragraph-->paragraph</span>
</p>
</section>
What's the best HTML5 element to represent a preview or summary of another webpage? I was thinking <abbr>, but is there a better one to represent these?
(I can’t think of a case where the use of abbr would be appropriate; well, unless the preview content is an abbreviation.)
Preview as teaser etc.
If you want to display some content that already exists at some other place, you probably want to use the blockquote element. You may only use blockquote if you aren’t changing anything of the content.
As it’s a sectioning root element, any headings/sections won’t affect your outline.
<blockquote>
<!-- the quoted page -->
<h1>Foo bar page</h1>
<nav>…</nav>
<article></article>
<!-- could of course also use 'iframe' if it’s the whole page + CSS -->
</blockquote>
Also use blockquote when you want to display a screenshot of the content:
<blockquote>
<img src="screenshot.png" alt="Article Foo …" />
</blockquote>
If you need more complex alternative content, you might want to use object instead of img.
If you are not quoting (i.e., the content is on the same site resp. your own content, or you are paraphrasing), you could just go with article.
<article>
<h1>Summary of article Foo</h1>
<p>…</p>
</article>
In that case, headings/sections do affect your outline, which makes sense, as it’s your content (you summarized/paraphrased).
If it’s just a teaser/snippet in a sidebar (or a search result, or a list of posts etc.), you might want to use the bookmark link type to link to the actual content.
Preview, when creating/editing content
I guess it depends on your understanding of the content if a dedicated element is needed in the first place. One could argue that the preview is (part of) the actual content of the page, and it only happens to be published at another page in addition. So the most basic variant would be to use a sectioning element that is appropriate for this content, probably article:
<form><!-- the content edit form --></form>
<article><!-- the preview --></article>
resp. with a more useful outline:
<body>
<h1>Create a new foo</h1>
<form><!-- the content edit form --></form>
<section>
<h1>Preview of your foo</h1>
<article><!-- the preview --></article> <!-- depends on your case; would also be possible to have several sectioning content elements here -->
</section>
</body>
It could make sense to use the figure element here; as it’s a sectioning root, possible headings/sections of the preview content wouldn’t affect the current outline:
<form>
<!-- the content edit form -->
</form>
<figure>
<!-- your preview -->
</figure>
This is what I would recommend:
<body>
<h1>Create a new foo</h1>
<form>
<!-- the content edit form -->
</form>
<section>
<h1>Preview of your foo</h1>
<figure>
<article>
<!-- your preview -->
</article>
<!-- might use other, more or no sectioning elements here; depends on your case -->
</figure>
</section>
</body>
Special cases
samp
In some cases it might be appropriate to use the samp element:
The samp element represents (sample) output from a program or computing system.
Note that samp can only have phrasing content, so you can’t use it for complex content.
output
In some cases it might be appropriate to use the output element:
The output element represents the result of a calculation or user action.
You could even use the for attribute to relate the output (= preview) with the form.
Just like samp, it can only have phrasing content, so it’s not appropriate for complex content.
It sounds like you might have many short previews or summaries of these websites in a single page? In that case, I think there are many ways to express these types of blocks in smaller HTML chunks while giving them additional semantic meaning. So I will give you several options I would try using in HTML5.
The DETAILS element
The details element is new interactive element in HTML5 which shows a text summary and additional hidden text details that the user can see by clicking the summary text. This is usually created by the browser as a piece of title text with a dropdown toggle arrow that reveals hidden content when clicked. This element is typically used as a Javascript-free toggle widget to disclose additional information if the user chooses to view it. What is nice about this new HTML5 element is it will create this nice toggle, open-and-close, text block without the need for any Javascript, and which includes a nice clickable summary "bar" that unfolds with more detail text. Ive added some extra CSS to make it look sexy. (Note: IE1-11 does not support this element, but with the styles Ive added it degrades gracefully and shows summary and div content in one stacked block.)
<details>
<summary style="display:block;margin: 0;padding: .2em;width: 25em;background-color: #ccccccff;box-shadow: 2px 2px 3px #aaa;">© Copyright 2021</summary>
<div style="display:block;margin: 0;padding: .2em;width: 25em;background-color: #efefefff;box-shadow: 2px 2px 3px #aaa;">
<p>Owned by Company ABC. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of Company ABC.</p>
</div>
</details>
The DEFINITION element
The dfn element represents a piece of definition text when its term is defined in a paragraph. It represents a piece of text that is going to be defined within a sentence. The definition item is usually styled in plain italics. Not as fancy as the details element but tells search engines you are associating a text title with descriptive text. If you want to just drop page previews in plain paragraphs but give their titles more meaning, wrap the titles with this simple piece of HTML. You could also wrap an anchor tag around the dfn element and link to your page you are previewing. This link then has more semantic meaning.
<p>The <dfn id="sun" title="Our Shining Celestial Body">Sun</dfn> is the name of the local star in our solar system.</p>
The DESCRIPTION LIST element
If your page previews need something more formal, as in a listing, try a description list. The dl element is a description list and contains groups of description terms (dt) and descriptions details (dd). The description list is often used to show a page's glossary, lexicon, or dictionary of terms in key-value pairs. A description list is great if you have many of these previews. It really holds a lot of semantic meaning and allows you to have a description TERM and its DESCRIPTION in separate places. Again, this has more semantic meaning than plain HTML paragraphs. Ive added some CSS to this which you will see when you paste this in an HTML page and view it. Each description is in a white block with a border. You might add your page preview titles as terms, and your text preview in the description element.
<dl>
<div style="margin: .2em;padding: 0 .5em;border: 1px solid #999;">
<dt id="fruit1">Apple</dt>
<dd nowrap="no" role="definition" aria-labelledby="fruit1">A popular fruit that grows on trees</dd>
</div>
<div style="margin: .2em;padding: 0 .5em;border: 1px solid #999;">
<dt id="fruit2">Strawberry</dt>
<dd nowrap="no" role="definition" aria-labelledby="fruit2">A popular berry that grows low to the ground</dd>
</div>
</dl>
I am very new to HTML5 and I need to implement an article container (for example, I need to create the classic structure for the WordPress articles where the user see a series of articles one below another), but I have some doubts about the semantic use of the new HTML5 components.
To do this I thought something like this:
<section>
<h1>My Posts:</h1>
<article>
<header>
<time datetime="2010-11-10" pubdate>10/11/2010</time>
<h2>FIRST POST TITLE</h2>
</header>
<p>
POSTS CONTENT
</p>
<footer>
<address>MY NAME</address>
</footer>
</article>
<article>
<header>
<time datetime="2010-11-01" pubdate>01/11/2010</time>
<h1>SECOND POST TITLE</h1>
</header>
<p>
POSTS CONTENT
</p>
<footer>
<address>MY NAME</address>
</footer>
</article>
</section>
So I have reasoned in the following way:
All the shown posts are contained in an external <section> element (because following the HTML5 specification a <section> represents a generic section of a document, in this case an area where posts are shown), the <sections> have its <h1> title.
Every post is represented by a specific <article> element (should be semantically correct).
Every article element represents a specific post and contains a <header> element that contains the date of publication and the post title. I used a <header> element to contain these information because this element is used to represent "a group of introductory or navigational aids".
Then I have a classic <p> to contain the article textual content (but I can also wrap it into a div or is it better use a new <section> if the text is long and detailed?)
Finally I have put the e-mail contact into a <footer> element because it is an information about the container (the <article> element).
Is this a valid structure for my problem? Is it semantically correct in HTML5?
This looks largely great to me. headers and footers were changed a while ago to allow them to be used in sections and articles.
However, the p element should be used for a single paragraph. In all likelihood, your articles will have more than a single paragraph, and WordPress will generally generate these for you based on line breaks. If you need to wrap all of your article contents into an element, a div will be sufficient. If your article is long and has several sections, you could use these instead.
The address element threw me off a bit first, as not many people use it, but its purpose is to describe the contact address of the author of the document (or part of the document), so your usage is absolutely correct.
For bonus points you can consider implementing the hCard standard for formatting the email: http://microformats.org/wiki/hcard
Basically, aside from the use of the paragraph element to wrap the entire article, this is absolutely fine! You've shown a lot of thoughts behind your decisions, which is quite rare these days.
Your markup is fine.
(Note that for the first article you used h2 and for the second one h1. While both ways are possible, why not stick to one variant?)
is it better use a new section if the text is long and detailed?
Don’t include the whole text in a section! But when you use sub-headings in the article, you are "encouraged" to use explicit section elements to group the heading and its content.