Asides and Sidebars
Sometimes you have content that adds something extra to your main
content, such as pullout quotes, diagrams, additional thoughts, or related
links. You can use the new aside tag to identify these elements.
We’ll place the callout quote in an aside element. We’ll nest this aside
within the article, keeping it close to its related content.Our completed section, with the aside, looks like this:
Now we just have to add the sidebar section.
Asides Are Not Page Sidebars!
Our blog has a sidebar on the right side that contains links to the
archives for the blog. If you’re thinking that we could use the aside
tag to define the sidebar of our blog, you’d be wrong. You could do it
that way, but it goes against the spirit of the specification. The aside is designed to show content related to an article. It’s a good place to show
related links, a glossary, or a pullout quote.
To mark up our sidebar that contains our list of prior archives, we’ll
just use another section tag and a nav tag.
That’s it for our blog’s structure. The next we will talk abaouthoow to applying styles to
these new elements.
[Redefining a Blog Using HTML5 Semantic Markup -part1]
[Redefining a Blog Using HTML5 Semantic Markup -part2]
2011/12/08
Redefining a Blog Using HTML5 Semantic Markup [part2]
Sections and Articles
Sections are the logical regions of a page, and the section element is here to replace the abused div tag when it comes to describing logical sections of a page.
Don’t get carried away with sections, though. Use them to logically group your content! Here we’ve created a section that will hold all the blog posts. However, each post shouldn’t be in its own section. We have a more appropriate tag for that.
Articles
The article tag is the perfect element to describe the actual content of a web page. With so many elements on a page, including headers, footers, navigational elements, advertisements, widgets, blogrolls, and social media bookmarks, it might be easy to forget that people come to your site because they’re interested in the content you’re providing. The article tag helps you describe that content. Each of our articles will have a header, some content, and a footer. We can define an entire article like this:
We can use header and footer elements inside of our articles, which makes it much easier to describe those specific sections. We can also divide our article into multiple sections using the section element.
[part 1 tutorial]
Sections are the logical regions of a page, and the section element is here to replace the abused div tag when it comes to describing logical sections of a page.
Don’t get carried away with sections, though. Use them to logically group your content! Here we’ve created a section that will hold all the blog posts. However, each post shouldn’t be in its own section. We have a more appropriate tag for that.
Articles
The article tag is the perfect element to describe the actual content of a web page. With so many elements on a page, including headers, footers, navigational elements, advertisements, widgets, blogrolls, and social media bookmarks, it might be easy to forget that people come to your site because they’re interested in the content you’re providing. The article tag helps you describe that content. Each of our articles will have a header, some content, and a footer. We can define an entire article like this:
We can use header and footer elements inside of our articles, which makes it much easier to describe those specific sections. We can also divide our article into multiple sections using the section element.
[part 1 tutorial]
2011/12/07
New StructuralTags and Attributes of HTML5
In the first few chapters of this book, we’ll talk about how we can use
HTML5’s and CSS’s features to improve the interfaces we present to
our users. We’ll see how we can create better forms, easily style tables,
and improve the accessibility of our pages for assistive devices. We’ll
also see how we can use content generation to improve the usability of
our print style sheets, and we’ll explore in-place editing with the new
contenteditable attribute. First, though, let’s take a look at how HTML5’s
new elements can help us structure our pages better.
I’d like to talk to you about a serious problem affecting many web developers
today. Divitis—a chronic syndrome that causes web developers to
wrap elements with extra div tags with IDs such as banner, sidebar, article,
and footer—is rampant. It’s also highly contagious. Developers pass
Divitis to each other extremely quickly, and since divs are invisible to
the naked eye, even mild cases of Divitis may go unnoticed for years.
Here’s a common symptom of Divitis:
Here we have an unordered list, which is already a block element,1
wrapped with two div tags that are also block elements. The id attributes
on these wrapper elements tell us what they do, but you can remove at
least one of these wrappers to get the same result. Overuse of markup
leads to bloat and pages that are difficult to style and maintain.
There is hope, though. The HTML5 specification provides a cure in
the form of new semantic tags that describe the content they contain.
Because so many developers have made sidebars, headers, footers, and
sections in their designs, the HTML5 specification introduces new tags
specifically designed to divide a page into logical regions. Let’s put those
new elements to work. Together with HTML5, we can help wipe out Divitis
in our lifetime.
In addition to these new structural tags, we’ll also talk about the meter
element and discuss how we can use the new custom attributes feature
in HTML5 so we can embed data into our elements instead of hijacking
classes or existing attributes. In a nutshell, we’re going to find out how
to use the right tag for the right job.
In this chapter, we’ll explore these new elements and features:2
Defines a header region of a page or section. [C5, F3.6, IE8, S4,
O10]
Defines a footer region of a page or section. [C5, F3.6, IE8, S4, O10]
Defines a navigation region of a page or section. [C5, F3.6, IE8, S4,
O10]
Defines a logical region of a page or a grouping of content. [C5,
F3.6, IE8, S4, O10]
Defines an article or complete piece of content. [C5, F3.6, IE8, S4,
O10]
Defines secondary or related content. [C5, F3.6, IE8, S4, O10]
Custom data attributes
Allows addition of custom attributes to any elements using the
data- pattern. [All browsers support reading these via JavaScript’s
getAttribute() method.]
Describes an amount within a range. [C5, F3.5, S4, O10]
Control that shows real-time progress toward a goal. [Unsupported
at publication time.]
HTML5’s and CSS’s features to improve the interfaces we present to
our users. We’ll see how we can create better forms, easily style tables,
and improve the accessibility of our pages for assistive devices. We’ll
also see how we can use content generation to improve the usability of
our print style sheets, and we’ll explore in-place editing with the new
contenteditable attribute. First, though, let’s take a look at how HTML5’s
new elements can help us structure our pages better.
I’d like to talk to you about a serious problem affecting many web developers
today. Divitis—a chronic syndrome that causes web developers to
wrap elements with extra div tags with IDs such as banner, sidebar, article,
and footer—is rampant. It’s also highly contagious. Developers pass
Divitis to each other extremely quickly, and since divs are invisible to
the naked eye, even mild cases of Divitis may go unnoticed for years.
Here’s a common symptom of Divitis:
Here we have an unordered list, which is already a block element,1
wrapped with two div tags that are also block elements. The id attributes
on these wrapper elements tell us what they do, but you can remove at
least one of these wrappers to get the same result. Overuse of markup
leads to bloat and pages that are difficult to style and maintain.
There is hope, though. The HTML5 specification provides a cure in
the form of new semantic tags that describe the content they contain.
Because so many developers have made sidebars, headers, footers, and
sections in their designs, the HTML5 specification introduces new tags
specifically designed to divide a page into logical regions. Let’s put those
new elements to work. Together with HTML5, we can help wipe out Divitis
in our lifetime.
In addition to these new structural tags, we’ll also talk about the meter
element and discuss how we can use the new custom attributes feature
in HTML5 so we can embed data into our elements instead of hijacking
classes or existing attributes. In a nutshell, we’re going to find out how
to use the right tag for the right job.
In this chapter, we’ll explore these new elements and features:2
Defines a header region of a page or section. [C5, F3.6, IE8, S4,
O10]
Defines a footer region of a page or section. [C5, F3.6, IE8, S4, O10]
Defines a navigation region of a page or section. [C5, F3.6, IE8, S4,
O10]
Defines a logical region of a page or a grouping of content. [C5,
F3.6, IE8, S4, O10]
Defines an article or complete piece of content. [C5, F3.6, IE8, S4,
O10]
Defines secondary or related content. [C5, F3.6, IE8, S4, O10]
Custom data attributes
Allows addition of custom attributes to any elements using the
data- pattern. [All browsers support reading these via JavaScript’s
getAttribute() method.]
Describes an amount within a range. [C5, F3.5, S4, O10]
Control that shows real-time progress toward a goal. [Unsupported
at publication time.]
2011/12/06
Redefining a Blog Using HTML5 Semantic Markup [part1]
To get an idea of what we’re going to build, take a look at the picture, on the following page. It’s a fairly typical blog structure, with a main header with horizontal navigation below the header. In the main section, each article has a header and a footer. An article may also have a pull quote, or an aside. There’s a sidebar that contains additional navigation elements. Finally, the page has a footer for contact and copyright information. There’s nothing new about this structure, except that this time, instead of coding it up with lots of div tags, we’re going to use specific tags to describe these regions.
It All Starts with the Right Doctype
We want to use HTML5’s new elements, and that means we need to let browsers and validators know about the tags we’ll be using. Create a new page called index.html, and place this basic HTML5 template into that file.
Take a look at the doctype on line 1 of that example. This is all we need for an HTML5 doctype. If you’re used to doing web pages, you’re probably familiar with the long, hard-to-remember doctypes for XHTML like this:
Now, take another look at the HTML5 doctype:
That’s much simpler and much easier to remember. The point of a doctype is twofold. First, it’s to help validators determine what validation rules it needs to use when validating the code. Second, a doctype forces Internet Explorer versions 6, 7, and 8 to go into “standards mode,” which is vitally important if you’re trying to build pages that work across all browsers. The HTML5 doctype satisfies both of these needs and is even recognized by Internet Explorer 6.
Headers
Headers, not to be confused with headings such as h1, h2, and h3, may contain all sorts of content, from the company logo to the search box. Our blog header will contain only the blog’s title for now.
You’ r e not restricted to having just one header on a page. Each individual section or article can also have a header, so it can be helpful to use the ID attribute like I did on 1 to uniquely identify your elements. A unique ID makes it easy to style elements with CSS or locate elements with JavaScript.
Footers
The footer element defines footer information for a document or an adjacent section. You’ ve seen footers before on websites. They usually contain information like the copyright date and information on who owns the site. The specification says we can have multiple footers in a document too, so that means we could use the footers within our blog articles too.
For now, let’s just define a simple footer for our page. Since we can have more than one footer, we’ll give this one an ID just like we did with the header. It’ll help us uniquely identify this particular footer when we want to add styles to this element and its children.
This footer simply contains a copyright date. However, like headers, footers on pages often contain other elements, including navigational elements.
Navigation
Navigation is vital to the success of a website. People simply aren’t going to stick around if you make it too hard for them to find what they’re looking for, so it makes sense for navigation to get its own HTML tag.Let’s add a navigation section to our document’s header. We’ll add links to the blog’s home page, the archives, a page that lists the contributors to the blog, and a link to a contact page.
Like headers and footers, your page can have multiple navigation elements. You often find navigation in your header and in your footer, so now you can identify those explicitly. Our blog’s footer needs to have links to the AwesomeCo home page, the company’s “about us” page, and links to the company’s terms of service and privacy policies. We’ll add these as another unordered list within the page’s footer element.
We will use CSS to change how both of these navigation bars look, so don’t worry too much about the appearance yet. The point of these new elements is to describe the content, not to describe how the content looks.
[go to part 2 ]
Backward Compatibility
One of the best reasons for you to embrace HTML5 today is that it
works in most existing browsers. Right now, even in Internet Explorer
6, you can start using HTML5 and slowly transition your markup. It’ll
even validate with the W3C’s validation service (conditionally, of course,
because the standards are still evolving).
If you’ve worked with HTML or XML, you’ve come across the doctype
declaration before. It’s used to tell validators and editors what tags and
attributes you can use and how the document should be formed. It’s
also used by a lot of web browsers to determine how the browser will
render the page. A valid doctype often causes browsers to render pages
in “standards mode.”
Compared to the rather verbose XHTML 1.0 Transitional doctype used
by many sites:
the HTML5 doctype is ridiculously simple:
works in most existing browsers. Right now, even in Internet Explorer
6, you can start using HTML5 and slowly transition your markup. It’ll
even validate with the W3C’s validation service (conditionally, of course,
because the standards are still evolving).
If you’ve worked with HTML or XML, you’ve come across the doctype
declaration before. It’s used to tell validators and editors what tags and
attributes you can use and how the document should be formed. It’s
also used by a lot of web browsers to determine how the browser will
render the page. A valid doctype often causes browsers to render pages
in “standards mode.”
Compared to the rather verbose XHTML 1.0 Transitional doctype used
by many sites:
An Overview of HTML5 and CSS3
HTML5 and CSS3 are more than just two new standards proposed by
the Worl d Wide We b Consortium (W3C) and its working groups. They
are the next iteration of technologies you use every day, and they’re
here to help you build better modern web applications. Before we dive
into the deep details of HTML5 and CSS3, let’s talk about some benefits
of HTML5 and CSS3, as well as some of the challenges we’ll face.
better cross-site and cross-window communication to animations and
improved multimedia support, developers using HTML5 have a lot of
new tools to build better user experiences.
More Descriptive Markup
Each version of HTML introduces some new markup, but never before
have there been so many new additions that directly relate to describing
content. You’ll learn about elements for defining headings, footers,
navigation sections, sidebars, and articles, New Structural
Tags and Attributes. You’ll also learn about meters,
progress bars, and how custom data attributes can help you mark up
data.
Multimedia with Less Reliance on Plug-ins
You don’t need Flash or Silverlight for video, audio, and vector graphics
anymore. Although Flash-based video players are relatively simple
to use, they don’t work on Apple’s mobile devices. That’s a significant
market, so you’ll need to learn how to use non-Flash video alternatives.
, Embedding Audio and Video, you’ll see how
to use HTML5 audio and video with effective fallbacks.
Better Applications
Developers have tried all kinds of things to make richer, more interactive
applications on the We b, from ActiveX controls to Flash. HTML5
offers amazing features that, in some cases, completely eliminate the
need for third-party technologies.
Cross-Document Messaging
We b browsers prevent us from using scripts on one domain to affect
or interact with scripts on another domain. This restriction keeps end
users safe from cross-site scripting, which has been used to do all sorts
of nasty things to unsuspecting site visitors.
However, this prevents all scripts from working, even when we write
them ourselves and know we can trust the content. HTML5 includes a
workaround that is both safe and simple to implement. You’ll see how
to make this work in Talking Across Domains.
Web Sockets
HTML5 offers support for We b Sockets, which give you a persistent
connection to a server. Instead of constantly polling a back end for
progress updates, your web page can subscribe to a socket, and the
back end can push notifications to your users. We’ll play with that a bit
in Chatting with Web Sockets.
Client-Side Storage
We tend to think of HTML5 as a web technology, but with the addition of
the We b Storage and We b SQL Database APIs, we can build applications
in the browser that can persist data entirely on the client’s machine.
Better Interfaces
The user interface is such an important part of web applications, and
we jump through hoops every day to make browsers do what we want.
To style a table or round corners, we either use JavaScript libraries
or add tons of additional markup so we can apply styles. HTML5 and
CSS3 make that practice a thing of the past.
forced to use JavaScript and CSS to construct sliders, calendar date
pickers, and color pickers. These are all defined as real elements in
HTML5, just like drop-downs, checkboxes, and radio buttons. You’ll
learn about how to use them in Chapter 3, Creating User-Friendly Web
Forms, on page 45. Although this isn’t quite ready yet for every browser,
it’s something you need to keep your eye on, especially if you develop
web-based applications. In addition to improved usability without reliance
on JavaScript libraries, there’s another benefit—improved accessibility.
Screen readers and other browsers can implement these controls
in specific ways so that they work easily for the disabled.
Improved Accessibility
Using the new HTML5 elements in HTML5 to clearly describe our content
makes it easier for programs like screen readers to easily consume
the content. A site’s navigation, for example, is much easier to find if
you can look for the nav tag instead of a specific div or unordered list.
Footers, sidebars, and other content can be easily reordered or skipped
altogether. Parsing pages in general becomes much less painful, which
can lead to better experiences for people relying on assistive technologies.
In addition, new attributes on elements can specify the roles of
elements so that screen readers can work with them easier.
Advanced Selectors
CSS3 has selectors that let you identify odd and even rows of tables, all
selected check boxes, or even the last paragraph in a group. You can
accomplish more with less code and less markup. This also makes it
much easier to style HTML you can’t edit.
Visual Effects
Drop shadows on text and images help bring depth to a web page, and
gradients can also add dimension. CSS3 lets you add shadows and
gradients to elements without resorting to background images or extra
markup. In addition, you can use transformations to round corners or
skew and rotate elements.
the Worl d Wide We b Consortium (W3C) and its working groups. They
are the next iteration of technologies you use every day, and they’re
here to help you build better modern web applications. Before we dive
into the deep details of HTML5 and CSS3, let’s talk about some benefits
of HTML5 and CSS3, as well as some of the challenges we’ll face.
A lot of the new features of HTML center around creating a better
platform for web-based applications. From more descriptive tags andbetter cross-site and cross-window communication to animations and
improved multimedia support, developers using HTML5 have a lot of
new tools to build better user experiences.
Each version of HTML introduces some new markup, but never before
have there been so many new additions that directly relate to describing
content. You’ll learn about elements for defining headings, footers,
navigation sections, sidebars, and articles, New Structural
Tags and Attributes. You’ll also learn about meters,
progress bars, and how custom data attributes can help you mark up
data.
Multimedia with Less Reliance on Plug-ins
You don’t need Flash or Silverlight for video, audio, and vector graphics
anymore. Although Flash-based video players are relatively simple
to use, they don’t work on Apple’s mobile devices. That’s a significant
market, so you’ll need to learn how to use non-Flash video alternatives.
, Embedding Audio and Video, you’ll see how
to use HTML5 audio and video with effective fallbacks.
Developers have tried all kinds of things to make richer, more interactive
applications on the We b, from ActiveX controls to Flash. HTML5
offers amazing features that, in some cases, completely eliminate the
need for third-party technologies.
We b browsers prevent us from using scripts on one domain to affect
or interact with scripts on another domain. This restriction keeps end
users safe from cross-site scripting, which has been used to do all sorts
of nasty things to unsuspecting site visitors.
However, this prevents all scripts from working, even when we write
them ourselves and know we can trust the content. HTML5 includes a
workaround that is both safe and simple to implement. You’ll see how
to make this work in Talking Across Domains.
HTML5 offers support for We b Sockets, which give you a persistent
connection to a server. Instead of constantly polling a back end for
progress updates, your web page can subscribe to a socket, and the
back end can push notifications to your users. We’ll play with that a bit
in Chatting with Web Sockets.
We tend to think of HTML5 as a web technology, but with the addition of
the We b Storage and We b SQL Database APIs, we can build applications
in the browser that can persist data entirely on the client’s machine.
The user interface is such an important part of web applications, and
we jump through hoops every day to make browsers do what we want.
To style a table or round corners, we either use JavaScript libraries
or add tons of additional markup so we can apply styles. HTML5 and
CSS3 make that practice a thing of the past.
Better Forms
HTML5 promises better user interface controls. For ages, we’ve been
forced to use JavaScript and CSS to construct sliders, calendar date
pickers, and color pickers. These are all defined as real elements in
HTML5, just like drop-downs, checkboxes, and radio buttons. Creating User-Friendly Web
Forms. Although this isn’t quite ready yet for every browser,
it’s something you need to keep your eye on, especially if you develop
web-based applications. In addition to improved usability without reliance
on JavaScript libraries, there’s another benefit—improved accessibility.
Screen readers and other browsers can implement these controls
in specific ways so that they work easily for the disabled.
HTML5 promises better user interface controls. For ages, we’ve beenforced to use JavaScript and CSS to construct sliders, calendar date
pickers, and color pickers. These are all defined as real elements in
HTML5, just like drop-downs, checkboxes, and radio buttons. You’ll
learn about how to use them in Chapter 3, Creating User-Friendly Web
Forms, on page 45. Although this isn’t quite ready yet for every browser,
it’s something you need to keep your eye on, especially if you develop
web-based applications. In addition to improved usability without reliance
on JavaScript libraries, there’s another benefit—improved accessibility.
Screen readers and other browsers can implement these controls
in specific ways so that they work easily for the disabled.
Using the new HTML5 elements in HTML5 to clearly describe our content
makes it easier for programs like screen readers to easily consume
the content. A site’s navigation, for example, is much easier to find if
you can look for the nav tag instead of a specific div or unordered list.
Footers, sidebars, and other content can be easily reordered or skipped
altogether. Parsing pages in general becomes much less painful, which
can lead to better experiences for people relying on assistive technologies.
In addition, new attributes on elements can specify the roles of
elements so that screen readers can work with them easier.
CSS3 has selectors that let you identify odd and even rows of tables, all
selected check boxes, or even the last paragraph in a group. You can
accomplish more with less code and less markup. This also makes it
much easier to style HTML you can’t edit.
Drop shadows on text and images help bring depth to a web page, and
gradients can also add dimension. CSS3 lets you add shadows and
gradients to elements without resorting to background images or extra
markup. In addition, you can use transformations to round corners or
skew and rotate elements.
2011/09/21
HTML,The Living Language
The switch from the W3C to the WHATWG and back to the W3C again has led to a rather unusual arrangement. Technically, the W3C in charge of determining what is and isn’t official HTML5. But at the same time, the WHATWG continues its work dreaming up future HTML features. Only now, they no longer refer to their work as HTML5. They simply call it HTML, explaining that HTML will continue as a living language.
Subscribe to:
Comments (Atom)