Hello everyone,

 

I have built this website in html5 and it's my second attempt at grasping the new tags etc

 

I believe that each section/article etc must have a outline. (i use a chrome extension for to help with this).

My problem is that I have some 'Untitled Sections' for some of the area's on the site.

 

For example: (outline of a website)

1. Forest elephants

1.1 Habitat

1.2 Diet

2. Mongolian gerbils

 

Would the HTML5 experts out there, mind taking a look at the site and tell me how I can sort this out.

 

Much appreciated,

 

Huw

quick aside, I was reading an article off Noupe earlier and there's now version 1.4 of Lobster http://www.impallari.com/lobster/

 

(they got the year wrong on the release) but it's been redrawn.

To be specific whenever you use NAV, HEADER, SECTION, ASIDE or ARTICLE tags you must start with a HTML H1 heading, and any subheadings inside that tag must be correctly nested.

 

I see you have...

<aside>
<h3>Phone: 01685 666 666</h3>
</aside>

 

That should really be...

<aside>
<h1>Phone: 01685 666 666</h1>
</aside>

 

...but having a phone number as a heading doesn't make sense, so a better format may be...

 

<aside> 
<h1>Contact us</h1>
<p>Phone: 01685 666 666</p>
</aside>

To be specific whenever you use NAV, HEADER, SECTION, ASIDE or ARTICLE tags you must start with a HTML H1 heading, and any subheadings inside that tag must be correctly nested.

 

For all of them? I agree that HEADER, SECTION or ARTICLE tags should start with a HTML H1 heading, but NAV would surely be OK with just a ul tag. ASIDE might only be notes or comments and not need anything more than a p tag, unless it has a heading within it.

 

Did you get your advice from somewhere?

Thanks for your replies.

 

I have removed the h3 from the aside 'phone number' as it's not even a heading is it!

I also removed the h2, as this was not a heading either - just a paragraph of text.

 

I have also removed the two sections, and changed them to ordinary div's.

 

I think it is getting there! HTML5 outlines can be little confusing on times!

 

 

Thanks for your help :0

For all of them? I agree that HEADER, SECTION or ARTICLE tags should start with a HTML H1 heading, but NAV would surely be OK with just a ul tag. ASIDE might only be notes or comments and not need anything more than a p tag, unless it has a heading within it.

 

Did you get your advice from somewhere?

 

I'm with you. Not every tag needs a H1. What if you don't want a H1 lol?

I use nav exclusively like so:

<nav>
<ul>
<li><a>Link 1</a></li>
</ul>
</nav>

I'm with you. Not every tag needs a H1. What if you don't want a H1 lol?

I use nav exclusively like so:

<nav>
<ul>
<li><a>Link 1</a></li>
</ul>
</nav>

 

As far as I understand it, the HTML5 spec requires the heading elements to be used in order. So, although a H1 element is not required, if there are heading elements they should begin with H1, then run sequentially. So if a footer just contains copyright details that would be within the <p> tag, then it would not require a heading element. The same applies to navigation using an unordered list.

As far as I understand it, the HTML5 spec requires the heading elements to be used in order. So, although a H1 element is not required, if there are heading elements they should begin with H1, then run sequentially. So if a footer just contains copyright details that would be within the <p> tag, then it would not require a heading element. The same applies to navigation using an unordered list.

they should begin with H1, then run sequentially

I don't quite agree with that. On one of my HTML5 pages I have a h1 tag in the page <header> div, but in sections and articles I start with h3 or h4 because I don't want the h1 style with large font and a different color (I know I could create a class, but it seems easier to use h3 or h4) so as long as the order in which the h tags are used is numerical h3 then h4, etc, I don't think it's necessary to start each section, article or header tag with h1.

If I recall correctly, there is nothing that mandates that you must have sequential headings in each element. Semantically, you SHOULD use an h1 inside each new section or article, but only if those are standalone pieces of content.

 

In reality, the only requirement is that things are done consistently and logically. Semantic markup is really only meant to make life easier for humans and screen-readers.

 

I'll try to find my notes on Jeremy Keith's HTML5 workshop from this year's An Event Apart, he went over best practices for a lot of this stuff.

they should begin with H1, then run sequentially

I don't quite agree with that. On one of my HTML5 pages I have a h1 tag in the page <header> div, but in sections and articles I start with h3 or h4 because I don't want the h1 style with large font and a different color (I know I could create a class, but it seems easier to use h3 or h4) so as long as the order in which the h tags are used is numerical h3 then h4, etc, I don't think it's necessary to start each section, article or header tag with h1.

 

Exactly, that's what I meant - sequentially through the document or in nested elements.

 

According to HTML5 & CSS3 for the Real World 'each element that falls under the category of "sectioned content" creates a new node in the document outline.' (p38)

Edited July 12, 201115 yr by pippin62

they should begin with H1, then run sequentially

I don't quite agree with that. On one of my HTML5 pages I have a h1 tag in the page <header> div, but in sections and articles I start with h3 or h4 because I don't want the h1 style with large font and a different color (I know I could create a class, but it seems easier to use h3 or h4) so as long as the order in which the h tags are used is numerical h3 then h4, etc, I don't think it's necessary to start each section, article or header tag with h1.

 

You should use tags based on semantics, not style. On your sections and headers give them id's so you can better style your h tags.

lovin the design

For all of them? I agree that HEADER, SECTION or ARTICLE tags should start with a HTML H1 heading, but NAV would surely be OK with just a ul tag. ASIDE might only be notes or comments and not need anything more than a p tag, unless it has a heading within it.

 

Did you get your advice from somewhere?

 

Logically speaking the NAV element defines a section of a page so it should have a heading appropriate to the structure of the page, if it hasn't got a heading the NAV block then becomes an "undefined" section. The same applies to all HTML5 sectioning tags.

 

The key to it is to learn about the document outline...

 

https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document

http://html5doctor.com/document-outlines/

Logically speaking the NAV element defines a section of a page so it should have a heading appropriate to the structure of the page, if it hasn't got a heading the NAV block then becomes an "undefined" section. The same applies to all HTML5 sectioning tags.

 

The key to it is to learn about the document outline...

 

https://developer.mo..._HTML5_document

http://html5doctor.c...ument-outlines/

 

PS: it's ok to have a HTML heading and hide it off screen

I also find it difficult to insert a H1 within a NAV section... So I have so far not added one. (in past projects)

Am i committing a HTML5 crime by doing so?!!?

 

 

Love all the responses in this thread.

Great thread.

 

Personally if I'm using sections I'll start any headings with H2 for the strongest header and work my way down through H2, H3 etc saving the H1 for extremely strong headings such as page titles, call to actions and tag lines.

 

I think it's really up to the developer themselves.

I've decided to follow BlueDreamer's links' advice from

https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document

 

I now include an h tag in all header, section, article, aside and footer tags (and any others) and if I don't want the text to show I code it with a class="offpage" which has

.offpage { text-indent: -9999px; height: 0; line-height: 0; font-size: 0; margin: 0; padding: 0; }

 

According to the link, you should start with h1 [*see edit] unless the tag is nested inside another tag, so a section would have h1 and a nested section inside would start with h2 as would an aside or article nested in a section (that's a brief outline from the link which is quite complicated).

 

It seems bloated, but I suppose it will help search engines and other computer analysis of page code.

 

Edit: you can start a new element which is a top-level parent with a lower ranking h tag like h3 as long as other h tags and those in any nested elements have a lower rank eg h4, etc.

Note that the rank of the heading element (in the example <h1> for the first top-level section, <h2> for the subsection and <h3> for the second top-level section) is not important: though less clear and not recommended, any rank can be used as the heading of an explicitly-defined section.

Edited July 13, 201115 yr by Wickham

It does seem bloated but it does make sense.

I found the trusty Web developer toolbar to be invaluable - do Information>View document outline and that will give you a schematic overview of a page by heading and heading hierachy.