Lets say I want the header of my site done with HTML5 in a semantic way that will also be good for SEO. What's the correct hierarchy of elements? Here's what I've got, tell me if you see anything wrong, thanks.
<header>
<hgroup>
<h1>My Site Title</h1>
</hgroup>
</header>
Or should the tag be on the OUTSIDE and the anchor on the inside? What's best for styling, and just being semantic in general, thanks.
ETA: Also, try and go in depth, I'd love to understand more about hierarchy in headers.
Also, this is assuming I have more content in there, I included group just to add to the question.
No search engine uses header or hgroup at the moment. hgroup is under constant threat of being dropped from the spec and is ignored by everything. I use it because I build TOCs and outlines for my posts, but unless you are planning to do processing with it yourself, forget about it. hgroup even as specc'ed it only there if you have multiple hn elts inside it. header might be worth including if you are worried about future-proofing your template for future screen-readers.
Regarding a on the outside or inside of the h1, that depends mainly on how you want your users to browse. a on the outside is called a block level link, and users can click on the entire box the text is in to navigate; a on the outside inside means you have to actually click on the text itself. Apart from that, no real difference.
If you only have one <h1> tag, you don't need the <hgroup> element, plus, one could argue about placing the <a> inside the <h1> rather then the oppsite, it won't affect semantics, but putting it outside does have some styling default advantages (such as greater click area). So the semantically correct code (in my opinion) would be:
<header>
<h1>Site Title</h1>
</header>
Why no <hgroup>?
Because <hgroup>'s purpose is to group together headers which serve the same purpose, for example:
<h1>Site Title</h1>
<h2>Longer Site Description</h2>
Would yield unexpected results for screen readers and search engines, so <hgroup> is here to solve that issue:
<hgroup>
<h1>Site Title</h1>
<h2>Longer Site Description</h2>
</hgroup
Along with all you've already been told, Mr. Gariety, I urge you to read up on HTML5 validators and "linters". If this area is new to you, start by feeding a sample page to http://validator.w3.org/; you're likely to learn a lot.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm new to web layout so forgive me if my question seems amateurish. I am trying to layout a landing page consisting of text boxes which will contain links to other pages on the site. The rough design is here:
http://silvercoastlife.com/wptest/landing-page-tester/
So far I have been using div to define the elements on the page but now I have come across article and wonder if I should be using this instead, especially as for SEO purposes I would like each box to have individual h1 headlines.
Thank you in advance for any advice you can offer.
Article would generally be wrapped in a <div> in HTML4, and the subsections would only be suggested by <h1>-<h6> elements. In HTML5 the article should be wrapped in <article>, and the subsections of the <article> should be explicitly indicated by wrapping them in <section> elements, perhaps in ordered list items if you’d like section numbering.
<article>
<h1>Title</h1>
<section>
<h2>Section title</h2>
<p>Content</p>
</section>
<section>
<h2>Section title</h2>
<p>Content</p>
</section>
<section>
<h2>Section title</h2>
<p>Content</p>
</section>
</article>
For more you can use this reference.
HTML5 is made for exactly the thing you want my friend, the new HTML5 elements certainly serve a SEO purpose in that they can define a lot of portions of your website.
Here is a list of HTML5 tags
HTML5 tags can be used in a very flexible way as long as they serve the correct purpose.
For instance the <header> tag.
It could be used as a header for your website but could also be used as a header for an article. It's multi-purpose but still defines what it is.
I'm pretty sure that if you have a <header> tag within an <article> tag a smart search engine will know the difference between the information in the one within the <article> and a website <header> for instance.
Also - there's tags for every basic definition in a website (as seen in the list above)
Some of the more useful ones I'll list here
<header>
<footer>
<aside>
<nav>
<section>
<main>
These are just some examples and they all serve a semantically different purpose like the <main> tag which is supposed to represent the main content of website or as MDN puts it:
The HTML <main> element represents the main content of the <body> of
a document or application. The main content area consists of content
that is directly related to, or expands upon the central topic of a
document or the central functionality of an application. This content
should be unique to the document, excluding any content that is
repeated across a set of documents such as sidebars, navigation links,
copyright information, site logos, and search forms (unless the
document's main function is as a search form).
Each link above in the list goes to the MDN page for the specified HTML element, you can read up on the semantics per element if you want to know exactly how they should be used.
Furthermore the <div> tag is just a convenient tag to use when things start to get vague or you just need a container that only serves positioning purposes etcetera, it's not wrong or bad to use a <div> tag anywhere either - It's just better to use tags that fit the actual content of your site for SEO purposes.
A small side-note would also be that using these new HTML5 tags could cause incompatibility with older browsers but so far everyone's caught up pretty well. so In general that shouldn't be a problem unless you need to support older browsers.
Maybe the relevant element you are looking for is actually the <section> element as you are defining different sections related to the same page instead of separate articles on different topics.
The below is taken from the following article: http://oli.jp/2009/html5-structure1/
<div> — the generic flow container we all know and love. It’s a block-level element with no additional semantic meaning.
<section> — a generic document or application section. A <section> normally has a heading (title) and maybe a footer too. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface.
<article> — an independent part of a document or site. This means it should be able to ‘stand alone’, and still make sense if you encountered it somewhere else (e.g. in an RSS feed). Examples include a weblog article (duh), a forum post or a comment. Like <section> these generally have a header, and maybe a footer.
You should just take into consideration that article will not be recognized in IE8. As to SEO, HTML5 tags are easier to understand by a machine. Not just the word but the intent and if used properly, like in the Suvro's example and reference, it can actually help.
Is having a single section within the main tag acceptable or is redundant?
<main>
<section>
<section>
...
</section>
<section>
...
</section>
</section>
</main>
Or should I just put the two section tags within the main... even though all the content within it is relatable.
Also, is having a <header> within every single section acceptable? It is classified as “a group of introductory or navigational aids”. But seems like if I were to use it as I've described, it'd be just like using <h1>-<h6>.
The <section> element is used to represent a group of related content. There shouldn't be any issue in nesting these tags. You could also make use of other tags like <article>, <aside> etc.. The idea behind using these elements is to give more semantic meaning to your pages, allowing computer browser to understand your content better.
There are no restrictions on how to nest them and what tags to use in them. You can have the whole set of html tags with in them (you can use h1-h6, or other elements).
You might want to have a look at these articles:
How to Use The HTML5 Sectioning Elements
http://html5doctor.com/the-section-element/
Question: is the single section inside main redundant?
It depends on the semantic meaning of your page. Describe your
desired page layout in natural language. If you say "the main area
has a section that contains many sub-sections", then your HTML is
right on the money. If you say "the main area is broken down into a
few sections", then your single section sounds like an evolved form
of the div-itis virus - the one that left a lot trash behind: wrappers,
containers, container-wrappers, content-wrappers, main-content-wrappers,
wrapping-containers, containing-wrappers...
Question: is header within every section acceptable?
Yes. But again, do the above natural language litmus test to
determine if it is suitable.
There's also some confusion between <h1>-<h6> vs <header>. Think of header as an "introductory part" within a section. It may or may not be necessary in your markup. If your introductory part of the section consists of, say, only a <h1>, you should probably omit use of the <header>; but if your introductory part includes a few items, e.g. a heading, a logo, a nav bar, then it's probably a good idea to wrap them in a <header> tag.
I'm trying to create a site that has quite a few articles and wanting to have forewords in the more important ones, I've had a search and can't find anything that seems to identify what to do for this. All I can think of is using bold tags...
Is there an html tag for foreword and if not, what's the most semantic way to tag this?
EXAMPLE
<p>
<foreword>
The start of the article would go in here, typically the first sentence of the article.
</foreword>
Rest of the text for the article would go here.
</p>
No there isn't.
If you are looking to create a visually distinct lead paragraph then simply add a class that you can use to apply that styling, e.g.:
<p class="foreword">
I apply a visual intro style on my blog posts, using just a little CSS, eg:
.intro,
.post p:first-of-type {font-size: 1.3125em;}
The first paragraph in any post, or any element that I give the class .intro then adopts this visual style. Here's an example: http://internet-inspired.com/wrote/load-disqus-on-demand/
Semantically it's no different to any other paragraph though.
You should certainly not use bold tags, they do carry a semantic meaning and should not simply be used for the purpose of adding weight to your copy. To alter the visual appearance you should use only css.
Of course, html5 won't freak out of you do use a foreword tag, it wouldn't cause an error, but it just won't do anything. And it would carry less semantic value than a p tag, making it utterly pointless.
By forward do you mean introductory text? One option is to put it in a header element.
<article>
<header>
<h1>My Title</h1>
<h5>A really dull article on organic gardening</h5>
</header>
<section>
Organic gardening is.....etc. etc. etc.
</section>
</article>
According to HTML5 CR, the header element “represents introductory content for its nearest ancestor sectioning content or sectioning root element”, and a foreword can obviously be regarded as introductory. The description adds: “A header typically contains a group of introductory or navigational aids.” However, this is not meant to restrict the use to such “aids”, whatever that might mean. There is an example of a header element containing a greeting:
<header>
<p>Welcome to...</p>
<h1>Voidwars!</h1>
</header>
However, a header element is a collective element, typically containing a heading and something else. If that something else is (or contains) a foreword, there is no dedicated element for the foreword. It can be made a section element, but that’s general thematic grouping and not specifically any particular content. So you would use something like this:
<article>
<header>
<h2>Treatise on human misunderstanding</h2>
<section class=foreword>
The foreword goes here. It typically consists of a few paragraphs and a footer.
</section>
</header>
<section>The first section of the article.</section>
<section>The second section of the article.</section>
<section>And so on.</section>
</article>
However, since you say you considered using “bold tags” and show the dummy content of the “foreword” as “The start of the article would go in here, typically the first sentence of the article.”, it seems that you don’t actually mean a foreword at all. According to Merriam-Webster description, a foreword is “a section at the beginning of a book that introduces the book and is usually written by someone other than the book's author”.
I think you actually meant a headline. However, this really does not change much structurally. It could still be wrapped in a header element and even marked up as section, though that would not be very natural. A single-sentence “section” isn’t much of a section; rather, it could be a p element or just a div element, e.g. <div class=headline>...</div>.
This is all somewhat theoretical. The header element has no known impact on anything except being a block element (and its content normally causes block rendering anyway). The same applies to section. Use them if you like, but don’t expect them to “do” anything. You can use them in styling, but you could style div elements just as well.
Do you mean using forward links from one page to other? If yes, then use following anchor tag:
Name_You_Want_To_Give_To_The_Link
Eg-->
Click here
or
Click here
Within the Bootstrap CSS project, styles are provided for your heading tags (H1, H2, H3, H4, H5, H6), but there's also a series of class names based on the headings as well (.h1, .h2, .h3, .h4, .h5, .h6). What is the benefit gained from using the class name of a H1 without properly using the H1 tag? I would think that you always want to make sure your HTML mirrors your visual importance.
Any thoughts explaining a good reason for using .h1 instead of using a h1 tag would be appreciated.
You ask:
Why use .h1 instead of actual h1?
Short answer:
The goal is to use both, together.
The usefulness of the .h* classes comes into play when the size of the typography in the design does not correlate with the semantically appropriate heading levels. By splitting the problem in two, we can cleanly solve for both.
The first bit is the element/tag. The '<h*>' takes care of semantics, accessibility and SEO.
The second bit is the class. The '.h*' takes care of visual semantics and typographical hierarchy.
Long answer:
I believe that the origins of these classes come from OOCSS project:
Object-Oriented CSS
The latest iteration of OOCSS has changed a little since I last looked at it, but here's the relevant heading.css file, from an older commit, that has the .h1 - .h6 classes that I'm familiar with:
6e481bc18f oocss / core / heading / heading.css
From the comments:
.h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings
...
if additional headings are needed they should be created via additional classes, never via location dependant styling
Note the emphasis above.
For a good explanation as to why one would use these classes, see:
stubbornella.org: Don’t Style Headings Using HTML5 Sections (Nicole, the author of this post, is the creator of OOCSS)
csswizardry.com: Pragmatic, practical font sizing in CSS
Google Groups › Object Oriented CSS › Headings question: Basic concept/usage? (A question I asked back in September of '12)
Relevant quotes from the above links:
1. stubbornella.org
... [HTML5] Section elements are meant to help the browser figure out what level the heading really is, but not necessarily to decide how to style it.
So, how do we style headings in an HTML5 world?
... We shouldn’t use sectioning elements for styling. We should let them do the job they were designed for, which is sorting out the document tree, and solve styling issues another way that meets our goals better: with simple reusable class names that can be applied to any of our headings no matter how deep they may be in the sectioning content.
I recommend abstracting site wide headings into classes because then they are portable, predictable, and dry. You can call them anything you like.
2. csswizardry.com
Another absolutely stellar nugget of wisdom [Nicole Sullivan has] given us is what I call double-stranded heading hierarchy. This is the practice of defining a class every time you define a heading in CSS.
... By assigning a class along with each heading style we now have those styles attached to a very flexible selector that can be moved anywhere, rather than to a very specific and non-movable one.
3. groups.google.com
Here's a pseudo-html5 usage example (h/t Jamund Ferguson):
<body>
<div class="main">
<h1>Main Heading</h1>
<section>
<h1 class="h2">Section Header</h1>
</section>
</div>
<aside class="side">
<article class="widget">
<h1 class="h3">Sidebar Headings</h1>
</article>
<article class="widget">
<h1 class="h3">Sidebar Headings</h1>
</article>
</aside>
</body>
Please read full articles (and thread), via links above, for more detailed information related to this question/topic.
Most stylesheets have a set of font-sizes that correspond with heading styles 1 through 6. Sometimes, elsewhere on the page, web designers want to use those same font sizes on text which should not be a part of an actual heading element, for semantic reasons. Rather than providing names for each of those sizes like .size-12, .size-14, .size-16, etc, it's easier just to name them all with class names similar to your headings. That way, you know that the text will be the same size as an H1 element, even though it's not actually an H1 element. I've done this a few times myself.
A few reasons I can think of:
Using div instead of proper tag to get the visual of a header without an impact on SEO
To avoid complications from browser inconsistencies
Compatibility with other libraries and frameworks that choose to do the same for reasons 1 and 2
Design flexibility (as noted by #scrappedcola in the comments)
This allows for a separations of visual hierarchy form semantic hierarchy. eg, I want to tell the viewer one thing, while telling a computer (search engines) something else.
<article>
<h1 class="h1">Page Title</h1>
<p>Some content</p>
<section>
<h1 class="h2">Section Heading</h1>
<div class="h6">Sub Heading</div>
<p>Some content</p>
</section>
<section>
<h1 class="h2">Section Heading 2</h1>
<div class="h6">Sub Heading 2</div>
<p>Some content 2</p>
</section>
</article>
See:
http://www.w3.org/html/wg/drafts/html/master/sections.html#headings-and-sections (toward the botton of section)
http://html5doctor.com/html5-seo-search-engine-optimisation/
http://www.youtube.com/watch?v=GIn5qJKU8VM
The only thing I can think of offhand is for search engines. Many will look at an actual h1 tag as the title or subject of a page and use that for searches, etc. Having multiple h1 tags can confuse the search engine spiders and may screw up searches that would return results for your site (I've also heard it may get you on the "bad site" list with some spiders like Google).
Having the styles allows you to have the same visual look to an element without screwing up search engines.
Another reason I have come across recently... this is not particular to Angular but it serves as a good example:
I want to create dynamic/declarative forms in Angular (see Dynamic Forms in the Angular Cookbook) and allow styled text elements. Maximum flexibility would call for allowing me to declaratively add arbitrary HTML elements to my forms, but this is open to scripting attacks, and requires explicit subversion of the Angular compiler to even allow it. Instead, I allow text elements to be added to forms, along with a class for controlling style. So I can use the .h1 style but not the h1 element.
This would definitely help in-terms of SEO and google crawlers to understand your page better.
When it reads h1, it assumes that whatever is in there must be the focal point of the page. H2, would be the second components and so on. This way Google can understand the "scope" of what your page is covering in-terms of content.
Not entirely sure, but a big variable in my opinion would be the "read" mode of pages. This would allow devices and readers to organize content especially for devices used by visually impaired people.
Also it provides structure to the page and a sense of order.
I was checking the article 20+ Professional Examples of Websites Using HTML5 to see the good semantic uses of new HTML 5 tags and I found that this website http://bit.ly/bfgatc is using H2 before H1 in Header.
Is it ok in HTML5?
In my opinion, neither of those have any business being separate headers, and they definitely shouldn't be in an <hgroup>. They're one header, and should be inside a <header>, or maybe even in a <section>. They don't have separate levels; one's just styled bigger than the other. It's not semantically correct to use the two in either order.
So what I would recommend is, instead of:
<header>
<nav>...</nav>
<div>
<hgroup>
<h2>...</h2>
<h1>...</h1>
</hgroup>
</div>
</header>
would be:
<nav>...</nav>
<header>
<h1>I design user interfaces and strive for <strong>perfection.</strong></h1>
</header>
The element has been removed from the HTML5 (W3C) specification. As Ryan said. It would be better to put it in a tag.
Why not? The spec for hgroup says:
The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.
It seems to clear to me that a section title would be a H1 for example, and the subtitle a H2.
To expand: In this situation, it doesn't really make sense, but in general, there is technically nothing wrong with this (although a bit weird).