HTML5 Starter Info

teapoted
teapoted
~Posts: 7,089 in Web Design
This page is under construction, it will be fleshed out over the next week, feel free to add or comment if you believe something is wrong. Still needs a bunch of examples, resources, and other information, will come some other time.

HTML5 Starter Info

This guide is intended for anyone with at least a basic understanding of HTML principles. I don't want to fill this guide with gaff, if the spec sufficiently explains the usage of an element (which it often does) then that is all that will be provided at the moment.

1. Examples
-> Basic Structure Example
-> Basic Structure Example Commented
-> Extended Structure Example
-> Extended Structure Example Commented

2. The Outline

3. HTML5 Sections
-> <article>
-> <section>
-> <aside>
-> <h1-h6> & <hgroup>
-> <nav>
-> <hgroup>
-> <header>
-> <footer>


1. Examples

Basic Structure Example

Via The real HTML5 boilerplate — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts
[HTML]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 boilerplate—all you really need…</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body id="home">

<h1>HTML5 boilerplate</h1>

</body>
</html>[/HTML]


Basic Structure Example Commented

Via The real HTML5 boilerplate — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts
[HTML]<!DOCTYPE html>
<!-- The HTML5 Doctype -->

<html lang="en">
<!-- Insert appropriate language Language information and text direction -->

<head>

<meta charset="utf-8" />
<!-- Unicode character encoding, if you're curious : UTF-8: The Secret of Character Encoding - HTML Purifier -->

<title>HTML5 boilerplate—all you really need…</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- HTML5 shiv, allows for older browsers to interperate HTML5 elements. -->


</head>

<body id="home">

<h1>HTML5 boilerplate</h1>
<!-- Highest Level heading of the body sectioning element -->

</body>
</html>[/HTML]


Extended Structure Example

[HTML]<body id="home">


<header>

<hgroup>

<h1>
<img src="x.png" alt="Site Title" />
</h1>

<h2>Sub Heading</h2>

</hgroup>

<nav>

<h1>Main Navigation</h1>

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

</nav>

</header>


<div>

<h2>Sections</h2>

<section>

<h1>Section 1</h1>

<article>

<header>
<hgroup>
<h2>Article 1:1</h2>
<h3>This Article Subheading</h3>
</hgroup>

<a href="#comments">Skip To Comments</a>
</header>

<h3>Article Subheading</h3>
<p>Article Content</p>

<h3>Article Subheading</h3>
<p>Article Content</p>

<footer>
Written By Someone.
</footer>

</article>

<article>
<h2>Article 1:2</h2>
</article>

</section>

<section>

<h1>Section 2</h1>

<article>
<h2>Article 2:1</h2>
</article>

<article>
<h2>Article 2:2</h2>
</article>

</section>

</div>


<footer>

<p>Copyright © 2012</p>

</footer>


</body>
[/HTML]
Extended Structure Example Commented

[HTML]<body id="home">


<header>


<hgroup>

<h1>
<img src="x.png" alt="Site Title" />
<!-- Yes, you can just use alt tags with images without text-indent nonsense, google says it's fine -->
</h1>

<h2>Sub Heading</h2>

</hgroup>
<!-- This hgroup ensures that the sub heading doesn't interfere with the page document outline. So the lowest level heading read is still H1 from this hgroup. -->

<nav>

<h1>Main Navigation</h1>
<!-- This is an h1 since the nav is a sectioning element, and no matter header we put in here, it will be the highest level heading. This is a bit confusing, I'd recommend using lower level headings, as it doesn't make any difference but it is easier to make sense of a page. -->

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<!-- Just because you are using a nav section doesn't mean you shouldn't use a list. Ultimately if your links are in a list, put them in a ul (or ol). -->

</nav>

</header>


<div>
<!-- You can still use divs, as you can see this one has to importance to the structure of the document, only for styling purposes, so it shouldn't be a section. -->

<h2>Sections</h2>
<!-- Since we used an hgroup above, the highest level heading is the top level of the hgroup, so an h1. As this heading is right after that one in our document outline, we use an h2. -->

<section>

<h1>Section 1</h1>
<!-- We are now in a new section, so the top level heading would be an h1. As I said before, this can get confusing, so feel free to use whatever numbers you want, as long as the heirarchy makes sense from top to bottom level. -->

<article>

<header>
<hgroup>
<h2>Article 1:1</h2>
<h3>This Article Subheading</h3>
</hgroup>

<a href="#comments">Skip To Comments</a>
</header>

<h3>Article Subheading</h3>
<p>Article Content</p>

<h3>Article Subheading</h3>
<p>Article Content</p>

<footer>
Written By Someone.
</footer>

</article>

<article>
<h2>Article 1:2</h2>
</article>

</section>

<section>

<h1>Section 2</h1>

<article>
<h2>Article 2:1</h2>
</article>

<article>
<h2>Article 2:2</h2>
</article>

</section>

</div>


<footer>

<p>Copyright © 2012</p>

</footer>


</body>
[/HTML]




2. The Outline


The Spec: HTML5
Simplified: Document Outlines | HTML5 Doctor

A well defined outline is important to maintaining a logical hierarchy in the content of your page. In HTML4 this was primarily achieved through the h1-h6 elements, however in HTML5 there are sections which give us a greater set of tools to manage the hierarchy of our documents.




3. HTML5 Sections


<article>

The Spec: The article element 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.

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.


Notes: An article doesn't necessarily have to be the complete version of the content that it contains. E.g. on a news website front-page you may have articles with headers and excerpts. There is no solid guideline for when you shouldn't use article for a truncated post, however you should probably not be using article if it only contains a title, as a standard list would be more appropriate.

Individual products can be placed inside of the article element.

Examples coming.



<section>

The Spec: The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Notes: The primary ways to use sections are either to separate out different types of content e.g. Genres of books, or to break up an individual piece of content e.g. "Canon" & "Sony" in an article about camera manufacturers.

A section is not a replacement for a div, there should be a significance of it (the section) in the outline of the document.

Examples coming.




<aside>

The Spec: The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.


Notes: Will Come Later.




<h1-h6> & <hgroup>

The Spec: The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.

The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.


Notes: Using hgroups allows you to have a subheading without interfering with the rest of your outline. Do not use hgroups for a single heading or in the case where there are more iterations of a heading except the highest on the same level. (see example for clarification)

[HTML]<!-- This is an example where hgroup shouldn't have been used. -->
<hgroup>
<h1>Fruits</h2>
<h2>Apples</h2>
</hgroup>
<p>Content</p>

<h2>Orange</h2>
<p>Content</p>[/HTML]

There are some arguments weather or not you should be using h1 elements as the highest level heading in each section as it may cause confusion for screen readers, search engines, and developers. As far as I'm aware there isn't too convincing of an argument not to use it from a technical standpoint, however using h2's will generate the same document outline as long as it's the highest level heading in the section and that choice is completely up to you.




<nav>

The Spec: The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request.


Notes: You can place headings in nav elements. You can also place lists in nav elements, if you would traditionally have used a list for a menu, you should still do so.

[HTML]<nav>

<h1>Main Navigation</h1>

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

</nav>[/HTML]

More notes later.




<header>

The Spec: The header element represents a group of introductory or navigational aids.

A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.


Notes: Headers & footers can be used in any sectioning element, they are not required although typically used to define the header/footer of the entire page (sectioning element being the body) or for a specific piece of content (sectioning element: article).

More notes later.




<footer>

The Spec: The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.

Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer. Footers don't necessarily have to appear at the end of a section, though they usually do.


Notes: Headers & footers can be used in any sectioning element, they are not required although typically used to define the header/footer of the entire page (sectioning element being the body) or for a specific piece of content (sectioning element: article).

More notes later.



The Best Resource: HTML5

Comments

  • Tom
    Tom
    Keeping d*d Happy Posts: 11,595
    Shall we sticky this?
  • Limbo
    Limbo
    Established Norm Posts: 27,388
    Good stuff Teapot.
  • teapoted
    teapoted
    ~ Posts: 7,089
    Tom wrote:
    Shall we sticky this?
    Well it needs a lot more until it's finished, but if you want to.
  • rusty
    rusty
    Senior Member Posts: 1,887
    Excellent stuff teapoted, this is exactly the core info I'm after.
  • Shiro
    Shiro
    &#31038;&#38263; Posts: 15,053
    Good stuff Teapoted.
  • ian
    ian
    éireannach Posts: 1,960
    Are you intending on adding stuff about multimedia and all the other elements (e.g. time, small, the input types) too?

    Incidentally hgroup is still under threat of disappearing from the spec. and it's been advised that the nav element doesn't necessarily require a heading even though the outliner would mark it as an untitled section.
  • pmek
    pmek
    Banned Posts: 9,297
    Nice one Tea, I'll have a read through this later
  • socreative
    socreative
    deal with it Posts: 8,926
    i find this rather difficult to masturbate to


    good stuff teapot. it will be very useful for beginners ;)
  • Sherbs
    Sherbs
    Oo-ee-oo Posts: 2,961
    Thanks Ian =)
  • teapoted
    teapoted
    ~ Posts: 7,089
    ian wrote:
    Are you intending on adding stuff about multimedia and all the other elements (e.g. time, small, the input types) too?
    Whatever I find time for, or someone else writes.
    ian wrote:
    Incidentally hgroup is still under threat of disappearing from the spec.
    The situation is a bit off a mess, if it changes again, I'll change the post. I'll have to put something in the introduction (which needs to be written) that people can't expect the spec not to change.
    ian wrote:
    and it's been advised that the nav element doesn't necessarily require a heading even though the outliner would mark it as an untitled section.
    Well you can have untitled section elements as well according to the spec, although not advised. I guess if you want to be really fussy about it you can put a visually hidden heading in all your navs, not very elegant though.
  • ian
    ian
    éireannach Posts: 1,960
    teapoted wrote:
    Whatever I find time for, or someone else writes.

    Hopefully I'll have the time for an attempt at the multimedia one, since I know a bit about it ;)

    The time element, something I've been actively involved in changing with the W3C and the WHATWG is a tricky one as it's still largely in flux.
  • Limbo
    Limbo
    Established Norm Posts: 27,388
    Niceone Ian - thought you might be able to contribute - I would, but then everything I know is from your book innit ;)
  • teapoted
    teapoted
    ~ Posts: 7,089
    This is kind of confusing as both of our names are Ian.
    Hopefully I'll have the time for an attempt at the multimedia one, since I know a bit about it

    The time element, something I've been actively involved in changing with the W3C and the WHATWG is a tricky one as it's still largely in flux.
    I have little experience with multimedia elements so that would be best. There's really no rush though, if it takes a month until the thread at least has something about everything, who cares.

    As for time, well it can still be added, I'd rather put things in there and say "this topic is under discussion" than ignore it.
  • Sherbs
    Sherbs
    Oo-ee-oo Posts: 2,961
    I meant you in my original post. Normally people use pseudonyms online instead of their real name.
  • Alex{R}
    Alex{R}
    Code Monkey! Posts: 190
    Very nice post.. good job.
  • BlackBolt_
    BlackBolt_
    pew-pew Posts: 366
    Cool. I've been having trouble discerning the usage of section.
  • jonasmarsh621
    jonasmarsh621
    Registered User Posts: 36
    @teapoted Many thanks for posting this. Its been quite confusing for me to do HTML and stuff.
  • pentolaccia
    pentolaccia
    Registered User Posts: 15
    Great. Now in my evernote. ;)
  • adamchrist2013
    adamchrist2013
    Registered User Posts: 2
    Nice tutorials.
  • BohdanNykon
    BohdanNykon
    Banned Posts: 1
    I think its not good. Where you have used html 5... its not html 5 its simple html. don't try to fool us.
  • Nick
    Nick
    Cream of DT Posts: 18,196
    haha! That's teapoted told.
  • handcraftedweb
    handcraftedweb
    thought leader Left coastPosts: 6,813
  • handcraftedweb
    handcraftedweb
    thought leader Left coastPosts: 6,813
    And all the HTML5 input elements on one page:

    http://nativeformelements.com/
  • handcraftedweb
    handcraftedweb
    thought leader Left coastPosts: 6,813
    Not exactly starter info but I'm going to put this here anyway. HTML5 and ARIA (Accessible Rich Internet Applications).

    5 HTML5 and ARIA design patterns | Feature | .net magazine
  • CodyDeegan
    CodyDeegan
    Registered User Posts: 5
    That was a very informative post. It was a big help to those begginers. thanks for the post!
  • handcraftedweb
    handcraftedweb
    thought leader Left coastPosts: 6,813
    Current thinking on the <section> tag:
    Using the HTML5 section element | The Paciello Group BlogThe Paciello Group Blog

    The html5.1 spec currently says:
    “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1 – h6 element) as a descendant of the section element.”

    Basically, a <section> should be able to accommodate a header.
  • thrills
    thrills
    Senior Member Posts: 397
    That's one of the problems with HTML5. A lot of the elements are still too ambiguous. People simply just use them for styling, rather than what they're actually intended for.
  • handcraftedweb
    handcraftedweb
    thought leader Left coastPosts: 6,813
    <header>, <footer>, <nav> and <main> are obvious enough, but the whole <section> <article> mess is very amateurish.
  • RockMeAmadeus
    RockMeAmadeus
    Banned Posts: 3,938
    It's important to remember that the standard is still evolving. Tags come and go, and I wouldn't be surprised if those two are deprecated over time.
  • handcraftedweb
    handcraftedweb
    thought leader Left coastPosts: 6,813
    No they're not going to be deprecated. It's getting somewhat straightened out in the 5.1 spec.
  • mr.WebDesigner
    mr.WebDesigner
    Registered User Posts: 12
    Nice presentation
    but one more advice, it will be better if you added Xhtml to your Html 5 ;)
  • teapoted
    teapoted
    ~ Posts: 7,089
    Nice presentation
    but one more advice, it will be better if you added Xhtml to your Html 5 ;)
    By better do you mean pointlessly semantic for no tangible or even perceivable gain?

    HTML is supposed to be flexible and loose. It always was.
  • mr.WebDesigner
    mr.WebDesigner
    Registered User Posts: 12
    teapoted wrote:
    By better do you mean pointlessly semantic for no tangible or even perceivable gain?

    HTML is supposed to be flexible and loose. It always was.

    I mean that XHTML makes sure that your document is "well-formed"
  • teapoted
    teapoted
    ~ Posts: 7,089
    Your goal when writing HTML should always be to make it readable. That is its entire purpose. If it wasn't then we wouldn't need different elements at all, you can make entire websites with just the <u> element and headings (for some search engines) in the body if you wanted to and it would function perfectly fine in every regard.

    XHTML forces some consistency, but it doesn't teach people anything about good page structures. It is better for people to do the correct things for a logical reason than a limitation set by the language.
  • mr.WebDesigner
    mr.WebDesigner
    Registered User Posts: 12
    yea youre probably right
  • Limbo
    Limbo
    Established Norm Posts: 27,388
    No. He's definitely right. And he uses grammar correctly, which is to be encouraged in all forms of communication, to stop one looking like a nincompoop.
  • handcraftedweb
    handcraftedweb
    thought leader Left coastPosts: 6,813
    A nice collection links to specs and standards of HTML5, a collection of references if you will. Not exactly starter info but it doesn't hurt for a starter to be aware of this.

    The Web Platform: Browser technologies
Sign In or Register to comment.
© Copyright 2003 - 2016 - DT by Kooc Media