HTML5 Archives - Page 2 of 29

Some Teaching Tips for HTML5 and CSS3 7th Edition

Where I teach, we use HTML5 & CSS3 Visual QuickStart Guide (7th Edition) to teach both the basic HTML and the CSS class. This version of the book came out in 2011.

There’s an 8th Edition released in 2013, but we haven’t switched to it yet. I’m sure we will soon, but for the moment, we are using the 7th edition.

Here are a few teaching tips if you are using the 7th edition, as I currently am.

At the time this book was written, there was no <main> element in the spec. I suggest you change the layout suggested in Chapter 3 to use the <main> element for the left column. Use the landmark role role="main" with it.
Chapter 3 contains a clear explanation of the purposes and uses of both the <section> and <article> element. If you want, you can include an example of these two elements inside the <main> element.
Remember that <hgroup> has disappeared from the spec.
The example files all show empty elements such as <img> with a closing forward slash included: <img />. This provides a perfect opportunity to talk about backwards compatibility, XHTML, and some of the personal choices that are acceptable when writing HTML5.

Review: HTML & CSS: Design and Build Websites

product

HTML and CSS: Design and Build Websites by Jon Duckett is from Wiley & Sons (2011). This book is a little old (4 years) but I was so impressed with the JavaScript book by the same author and in the same format that I requested a copy from the publisher for review.

Everything I said about pedagogy and color coding in the review of the JavaScript book applies to this book as well. In fact, this book is where the author first honed the techniques used in presenting information so simply and clearly.

An infographic page from the book — A diagram and infographic page from the book

Simple illustrations with color coding and annotations for every point are used to teach the coding rules.

A reference page shows the HTML (or CSS) and the results of using it.

The reference pages are also color coded, with HTML shown in blue and CSS in pink as well as results examples.

As with the JavaScript book, all the code is downloadable. And, as with the JavaScript book, the language used to explain each concept is exceptionally clear and simple. Here’s a quote from the page introducing CSS.

CSS Associates Style Rules with HTML Elements

CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed. A CSS rule contains two parts: a selector and a declaration.

The book went completely through all the HTML it included (page structure, text, lists, links, images, tables, forms, audio and video and a few other bits of HTML) before getting to any CSS. Normally that would bother me, but it worked in this book. The CSS part of the book included color, text, boxes, lists, tables, forms, layout, images and some info on layout using HTML5.

Where the book is a little out of date is the information about HTML5. It’s no fault of the author, it’s just that the book came out in 2011. A few things are included (like hgroup or codec issues with video elements) that have gone away, and a few things that are more recent (like the main element) didn’t get mentioned. I reduced the star rating on the book because of that, but if I’d seen the book and reviewed it 4 years ago, I would have given it 5 stars. I simply want anyone who buys and uses it now to be aware that small parts of the book in the HTML 5 descriptions are different now. The book is still a perfectly good way to learn HTML and CSS – in fact, the book is an excellent way to learn HTML and CSS.

A review by Virginia DeBolt of HTML & CSS: Design and Build Websites (rating: 4 stars). The rating is based not on the quality of the book but on the fact that some of it is a little out of date.

Summary: Detailed, careful, guide to HTML, CSS and more.

Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Here is my review policy. Links to Amazon are affiliate links. You can buy the book from Wiley, as well as Amazon. The link to Wiley is not an affiliate link.

Why isn’t the main element in Dreamweaver CC’s Insert panel?

One of the arguments Adobe uses to convince all of us that we want to fork over a monthly subscription fee for Adobe products is that we get all the latest updates.

So why isn’t the main element among the choices in the Insert panel?

The main element represents the main content of the body of a document or application. By definition, the main element is for grouping content; it is not considered sectioning content. (Sectioning content includes elements such as article, aside, and section which are expected to have headings and possibly navs and footers. Sectioning content shows up in the document outline. The main element does not show up in the document outline.)

Where would Dreamweaver put main?

Is main a structural element in the Dreamweaver menu system? It seems to me that when you are building a page in Dreamweaver by inserting structural elements one by one, the main element should be one of your choices.

Here’s what Dreamweaver CC currently has in the Structure category of the Insert menu.

The Structure category of DW's Insert panel — The Structure category of DW’s Insert panel

There are some helpful HTML5 choices in that menu such as article, section, header, and footer. Why not main? Aren’t we paying the big bucks every month to have the latest goodies at our fingertips? All the new HTML5 elements should be available to Dreamweaver CC users.

Tips on using the main element

The main element can only be used once on a page. The ARIA role="main" is implicit where the main element is used.

Why have a wrapper div?

Students may have a problem grasping is the need for a wrapper div. I frequently find myself explaining it numerous times until the message finally sinks in.

The metaphor I’ll use today will be to compare a wrapper div to a fence.

A wrapper div, or a container div, has no semantic meaning. It’s a generic container. Therefore, <div> is the proper tag. A <section> element should not be used as a container. [See: Sections and Articles are Not Generic Containers]

What does a fence do?

It demarks the edges of your property.
It contains animals or children within a prescribed area. It keeps them from getting out.
It creates a border between one area and another.
It can be plain or decorative.

A wrapper div in an HTML document does the same things but to a layout instead of to actual property.

The wrapper holds a design within certain boundaries.
The various areas of a design cannot escape from the boundaries set by the wrapper.
A max-width or min-width or varying width based on an @media query can be set for the wrapper that makes it size a design responsively.
The id identifying a wrapper provides a CSS hook which enables more than size constraints. Borders and other decorations can be added.

With a wrapper div in place, a layout can be centered on the page. The width of the design can be controlled for easier reading and line-length.

It’s necessary to create the wrapper with a div and an id:

<div id="wrapper">everything on the page goes in here</div>

One of the principles of HTML5 is to pave the existing cow paths. Hence we have all sorts of new semantic elements like header, main, and footer that were once created using the same div with an id technique.

If wrappers are so great, why isn’t there a new HTML5 element called wrapper? I don’t know the answer for sure, but I’m guessing it’s because a wrapper is not a semantic element. It’s merely a container, a boundary into which you place all your semantic content.

By the same token, there is no ARIA landmark role for wrapper or container divs. The container carries no semantic meaning, it just puts a fence around the content. There’s no need to indicate it as a landmark on the page.

Sections and Articles are Not Generic Containers

The proper use of section and article elements in HTML5 is one of the sticking points to good implementation. If you’re teaching HTML5, or just learning about HTML5, here’s a tip for you.

A section element (or an article element) should not be used as a container for styling purposes. However, any time you have some content that needs a heading or h1, h2, etc. at the beginning, sections and articles are semantic candidates for proper markup.

If what you are doing is wrapping something up in a container with an id or class that will be used for anything but content with a heading at the top, you should use a div. A div is, by definition, a generic container. It carries no semantic meaning. It needs no heading element. It is meant to hold blocks of the page for styling purposes.

The W3C offers this guidance:

Each section should be identified, typically by including a heading (h1-h6 element)as a child of the section element.

Each article should be identified, typically by including a heading (h1-h6 element) as a child of the article element.

HTML5 News

It’s time once again to bring something I curate on a daily basis to your attention: The HTML5 News.

It’s a compilation of HTML5 articles that get brought to my daily attention because of certain sites I monitor and certain keywords I monitor. I try to keep it really focused on actual HTML5, although some of the related technologies creep in because they are so interconnected. There are archives of past issues.

Most recently, there have been stories about a community for developers called HTML5 Hub, news from the W3C about lack of support for certain elements, and vulnerabilities in HTML5.

Take a look. You can subscribe if you want daily notifications of new articles.

HTML5 Video in Dreamweaver CC

I saw a nice post at Overdigital called HTML5 Video Guide – All You Need to Know for 2014. It contains information about current codecs, streaming, mobiles and more.

As I was reading it, I realized I hadn’t looked at Dreamweaver CC to see how it handled the video element. Dreamweaver 5.5, which is what I had before CC, had no help at all with HTML5 video element insertion. You could do it in Code View, of course, but no WYSIWYG help.

But many things in Dreamweaver have changed in CC. I took a look.

There’s now an HTML5 Video command in the Insert menu. Once you have a placeholder for the video element on the document page, the Properties Panel gives you all the options you need to manage your video in Document View.

Dreamweaver property panel for video element

The Properties panel includes places to add alt sources in different codecs, specify the poster image, the Flash fallback file, fallback text and more.

I’m happy to see that Adobe has given Dreamweaver users such an easy tool for using HTML5 video. This can only help with the adoption of the video element across many sites.