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.
Simple illustrations with color coding and annotations for every point are used to teach the coding rules.
The reference pages are also color coded, with HTML shown in blue and CSS in pink as well as results examples.
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.
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.
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.
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.
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.
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.
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.
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.