I have a title and subtitle like so:
The Programmer
Saving the world with bikesheds and perl hacks.
Which I'm representing like this:
<h1>The Programmer</h1>
<p><strong>Saving the world with bikesheds and perl hacks.</strong></p>
However perhaps this is more appropriate:
<h1>The Programmer</h1>
<p class="subtitle">Saving the world with bikesheds and perl hacks.</p>
But since it seem to make sense to put a subtitle class on the element wouldn't this be better:
<h1>The Programmer</h1>
<h2>Saving the world with bikesheds and perl hacks.<h2>
Which would be more appropriate?
In HTML4, I'd maybe go for your 2nd approach but change the class name to tagline if you're not quite comfortable having a class of subtitle on a non-heading tag:
<h1>The Programmer</h1>
<p class="tagline">Saving the world with bikesheds and perl hacks.</p>
In HTML5 you could use a <section>, <header> and <hgroup> tag and wrap the <h1> and <h2> version, giving you something like:
<section>
<header>
<hgroup>
<h1>The Programmer</h1>
<h2>Saving the world with bikesheds and perl hacks.<h2>
</hgroup>
</header>
...
</section>
(Alternatively you could use an <article> tag instead of a <section> tag - or any other sectioning tag - due to the change in the way HTML5 works out the document outline).
Well i think it that using proper markup it's more appropriate, if it's an header (like the start of a chapter) you should definitly use <h2>. If it's just a way of emphasize content i think it's better to use the CSS class so that you explain what it is.
If you use html 5 you may be intersted in teh <header> tag like in this example:
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
<article>
<header>
<h1>Title of this article</h1>
<p>By Richard Clark</p>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>
here and here there are some quick info on the header tag in html5.
You can also read this chapter of "Dive into html5" for more complete reference (read the whole book while you are at it, it's good!)
Sometimes such "subtitles" are more of a teaser or short description (but in your case it actually seems like a subtitle); if you felt it was part of the title, you could stick it in the <h1> tag and perform special formatting. It's just a question of semantics: if you feel this is more a part of the header or more a part of the body, or neither.
I'd say my suggestion would be more appropriate, semantically and for screen readers, in this particular case. But the second case works well too, assuming these aren't huge descriptions.
First one is looking good. 2nd approach is also good, but for that you have to write a css class.
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>
With HTML 5 new semantic tags were introduced which includes header and footer.
But i am confused what should i use and why?
Use header tag directly or give class="header".Which one is better and why?
Use <header> and those semantic tags.
Why? Because they are meaningful, easier to read.
For example, consider
<header id="article-header">
...
</header>
and
<div id="article-header" class="header">
...
</div>
As you can see the first is shorter, and easier to read.
According to Inbound now, semantic tags are better in terms of SEO too.
Also, this and this question have interesting answers
Edit:
I'm quoting this from MDN:
Some of the benefits from writing semantic markup are as follows:
Search engines will consider its contents as important keywords to influence the page's search rankings (see SEO)
Screen readers can use it as a signpost to help visually impaired users navigate a page
Finding blocks of meaningful code is significantly easier than searching though endless divs with or without semantic or namespaced classes
Suggests to the developer the type of data that will be populated
Semantic naming mirrors proper custom element/component naming
Additionally, I have read somewhere quite some time ago that semantic tags are for defining the outline of the document, divs are more suitable for visual sectioning like box styling (I'm unable to find the source right now).
In CSS Definition
Class contruction:
. means a class
.header{
...........
}
HTML
<div class=header>
..........
<div>
while the header tag
This is calling the element name itself like body or any
header{
.............
}
HTML
<header>
................
</header>
It's better to use header tags. The header element represents a container for an introductory content or a set of navigational links. header tag has a block scope as same scope as a normal div tag .
<html>
<body>
<article>
<header>
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here.</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
</body>
</html>
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.
I want to change
<section>
<header>...</header>
<p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>
</section>
into
<section>
<header>...</header>
<article class="tweet">
<p>This is a tweet preview. You can... <time pubdate>6 Hours ago</time></p>
</article>
</section>
But after reading some articles on the <article> tag, I'm not sure that this is the best move. What would be better practice?
The important thing to understand about articles and sections is that they are sectioning elements. Each follows a common pattern:
<sectioning_element>
<heading_or_header>
... the body text and markup of the section
<footer>
</sectioning_element>
The footer is optional. Sectioning elements should have a "natural" heading. That is, it should be easy to write an <h?> element at the start of the section/article, that describes and summarises the entire content of the section/article, such that other things on the page not inside the section/article would not be described by the heading.
It's not necessary to explicitly include the natural heading on the page, if for example, it was self evident what the heading would be and for stylistic reasons you didn't want to display it, but you should be able to say easily what it would have been had you chosen to include it.*
For example, a section might have a natural heading "cars for sale". It's extremely likely that from the content contained within the section, it would be patently obvious that the section was about cars being for sale, and that including the heading would be redundant information.
<section> tends to be used for grouping things. Their natural headers are typically plural. e.g. "Cars for Sale"
<article> is for units of content. Their natural headers are usually a title for the whole of the text that follows. e.g. "My New Car"
So, if you're not grouping some things, then there's no need, and it's not correct, to use another sectioning element in between the header and footer of the section and your correct mark-up would be
<article class="tweet">
<header>...</header>
<p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</article>
assuming you can find a natural heading to go inside the <header> element. If you can't, then the correct mark-up is simply
<p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>
or
<div class="tweet">
<p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</div>
* There's a case for including the natural heading anyway, and making it "display:none". Doing so will allow the section/article to be referenced cleanly by the document outline.
<article> content
represents a self-contained composition in a document, page,
application, or site and that is, in principle, independently
distributable or reusable, e.g. in syndication. This could be a forum
post, a magazine or newspaper article, a blog entry, a user-submitted
comment, an interactive widget or gadget, or any other independent
item of content.
(from the html5 working spec)
in fact one of the examples illustrates nested <article> elements where the inner <article> is inside a <section>
Why don't you think it's a good move? It seems to me that a Tweet would fit perfectly in the W3C spec on what should be in an article. It would most likely depend on the context your sample code is in (which we can't tell from what you've provided).
It could also be put this way.
The semantics don't matter THAT much. You could very well do that if you wanted to and it would be fine. The thing with the article vs. section usage debate is that it's all subjective, to a point. I would recommend against how you're doing it in the second version though because it seems as though that just clutters the code more. What you could do is just replace the section tag with an article tag.
I went through quite a bit of head scratching to understand it because it seems to be confusing to quite a few but it really should be looked at a bit more literally. Here is an easy way to look at it:
Sections can contain elements from different topics.
Articles should contain elements from the same topic.
For example:
<section>
<section>
<article id="article_ONE">
<header>...</header>
<p>Not directly related to article_TWO</p>
<footer>...</footer>
</article>
</section>
<section>
<article id="article_TWO">
<article>
<header>...</header>
<p>Part 1 of article TWO</p>
<footer>...</footer>
</article>
<article>
<header>...</header>
<p>Part 2 of article TWO</p>
<footer>...</footer>
</article>
</article>
</section>
</section>
Let me just say first that I'm not looking to start a flame war :-)
I'm aware of the semantic meaning that tags such as <article> give a document, but what benefits does one get from using them?
Do search engines look at them differently? If not, what other benefits are there?
A Q+A on Google's Webmaster Central seems to suggest that the new HTML5 semantic elements have no impact currently, but will at some point in the future:
http://www.google.com/support/forum/p/Webmasters/thread?tid=2d4592cbb613e42c&hl=en
There are the obvious benefits that one day search engines might use them or microdata to associate more meaning to your site. I'm not totaly sure if that is the case yet, but some of the other answers so far provide some good links to answer that question.
Another benefit is cleaner markup. It helps to clean up the div soup that solved so many of our organization issues with HTML 4.01. Take this example:
<div class="post">
<h1>Example Blog Post</h1>
<div class="entry">
<p>Blog text goes here...</p>
</div>
<div class="entryFooter">
<p> Posted in example category.</p>
</div>
</div>
is not as readable or as clean as:
<article>
<header>
<h1>Example Blog Post</h1>
</header>
<p>Blog text goes here...</p>
<footer>
<p>Posted in example category.</p>
</footer>
</article>
Cleaner markup will make maintaining the markup a lot easier and that is always a benefit in my opinion.
Search engines will certainly look at Microdata differently.
Here's a tool that parses microdata:
http://www.google.com/webmasters/tools/richsnippets
To learn more about HTML5 Microdata:
http://diveintohtml5.ep.io/extensibility.html