HTML5 Doctor » header

Avoiding common HTML5 mistakes

Richard Clark — Tue, 26 Jul 2011 13:38:05 +0000

Between curating sites for the HTML5 gallery and answering readers’ questions here at HTML5 Doctor, I see a host of HTML5 sites and their underlying markup. In this post, I’ll show you some of the mistakes and poor markup practices I often see and explain how to avoid them.

Don’t use section as a wrapper for styling

One of the most common problems I see in people’s markup is the arbitrary replacement of

s with HTML5 sectioning elements — specifically, replacing wrapper

s (used for styling) with

s. In XHTML or HTML4, I would see something like this:



    
    My super duper page

Now, I’m instead seeing this:



    
    My super duper page

Frankly, that’s just wrong:

is not a wrapper. The

element denotes a semantic section of your content to help construct a document outline. It should contain a heading. If you’re looking for a page wrapper element (for any flavour of HTML or XHTML), consider applying styles directly to the element as described by Kroc Camen. If you still need an additional element for styling, use a

. As Dr Mike explains, div isn’t dead, and if there’s nothing else more appropriate, it’s probably where you really want to apply your CSS.

With that in mind, here’s the correct way to mark up the above example using HTML5 and a couple of ARIA roles. (Note: you may need one

depending on your design.)


    
    My super duper page

If you’re not quite sure which element to use, then I suggest you refer to our HTML5 sectioning content element flowchart to guide you along your way.

Only use header and hgroup when they’re required

There’s no sense writing markup when you don’t have to, right? Unfortunately, I often see

and being used when there’s no need for them. You can get up to speed with our articles on the

element and the element, but I’ll briefly summarise:

The
element represents a group of introductory or navigational aids and usually contains the section’s heading
The element groups a set of
—
elements representing a section’s heading when the heading has multiple levels, such as subheadings, alternative titles, or taglines

Overuse of header

As I’m sure you’re aware, the

element can be used multiple times in a document, which has popularized the following pattern:



    
    My best blog post

If your

element only contains a single heading element, leave out the

. The

ensures that the heading will be shown in the document outline, and because the

doesn’t contain multiple elements (as the definition describes), why write code when you don’t need to? Simply use this:

  
  My best blog post

Incorrect use of

On the subject of headers, I also frequently see incorrect uses of

. You should not use in conjunction with

when:

there’s only one child heading, or
the would work fine on its own (i.e., without the
).

The first problem looks like this:



    
    My best blog post
  
  by Rich Clark

In that case, simply remove the

and let the heading run free.


  My best blog post
  by Rich Clark

The second problem is another case of including elements when they’re not necessarily required.



    
    My company
    Established 1893

When the only child of the

is the , why include the

? If you don’t have additional elements within the

(i.e., siblings of the ), simply remove the

altogether.

  
  My company
  Established 1893

For more

examples and explanations, read the detailed article about it in the archives.

Don’t wrap all lists of links in

With 30 new elements (at the time of writing) introduced in HTML5, we’re somewhat spoilt for choice when it comes to creating meaningful, structured markup. That said, we shouldn’t abuse the super-semantic elements now made available to us. Unfortunately, that’s what I see happening with

. The spec describes

as follows:

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.

Note: 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.

WHATWG HTML spec

The key phrase is ‘major’ navigation. We could debate all day about the definition of ‘major’, but to me it means:

Primary navigation
Site search
Secondary navigation (arguably)
In-page navigation (within a long article, for example)

While there isn’t any right or wrong here, a straw poll coupled with my own interpretation tells me that the following shouldn’t be enclosed by

Pagination controls
Social links (although there may be exceptions where social links are the major navigation, in sites like About me or Flavours, for example)
Tags on a blog post
Categories on a blog post
Tertiary navigation
Fat footers

If you’re unsure whether to mark up a list of links with

Common mistakes with the figure element

Ah,

. The appropriate use of this element, along with its partner-in-crime

, is quite difficult to master. Let’s look at a few common problems I see with

Not every image is a figure

Earlier, I told you not to write extra code when it’s not necessary. This mistake is similar. I’ve seen sites where every image has been marked up as a

. There’s no need to add extra markup around your images for the sake of it. You’re just creating more work for yourself and not describing your content any more clearly.

The spec describes

as being some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document. Therein lies the beauty of

, that it can be moved away from the primary content — to a sidebar, say — without affecting the document’s flow.

If it’s a purely presentational image and not referenced elsewhere in the document, then it’s definitely not a

. Other use cases vary, but as a start, ask yourself, Is this image required to understand the current context? If not, it’s probably not a

(an

, perhaps). If so, ask yourself, Could I move this to an appendix? If the answer to both questions is ‘yes’, it’s probably a

Your logo is not a figure

Segueing nicely on, the same applies to your logo. Here are a couple of snippets that I see regularly:



  
    
      
    
    My company name

There’s nothing else to say here. It’s just plain wrong. We could argue until the cows come home about whether your logo should be in an

, but that’s not what we’re here for. The real issue is the abuse of the

element.

should be used only when referenced in a document or surrounding sectioning element. I think it’s fair to say that your logo is rarely going to be referenced in such a way. Quite simply, don’t do it. All you need is this:

  
  My company name

Figure can be more than an image

Another common misconception regarding

is that it can only be used for images. This isn’t the case. A

could be video, audio, a chart (in SVG, for example), a quote, a table, a block of code, a piece of prose, or any combination of these and much more besides. Don’t limit your

s to images. Our job as web standards affectionadoes is to accurately describe the content with our markup.

A while back, I wrote about

in more depth. It’s worth a read if you want more detail or need a refresher.

Don’t include unnecessary type attributes

This is probably the most common problem we see in HTML5 Gallery submissions. While it isn’t really a mistake, I believe it’s best practice to avoid this pattern.

In HTML5, there’s no need to include the type attribute on

Instead, you can simply write:

You can also reduce the amount of code you write to specify your character set, amongst other things. Mark Pilgrim’s chapter on semantics in Dive into HTML5 explains all.

Incorrect use of form attributes

You may be aware that HTML5 has introduced a range of new attributes for forms. We’ll cover them in more detail in the coming months, but in the meantime, I’ll quickly show you a few things not to do.

Boolean attributes

Several of the new form attributes are boolean, meaning their mere presence in the markup ensures the behaviour is set. These attributes include:

autofocus
autocomplete
required

Admittedly, I only rarely see this, but using required as an example, I’ve seen the following:


required="true" />

required="1" />

Ultimately, this causes no harm. The client’s HTML parser sees the required attribute in the markup, so its function will still be applied. But what if you flip the code on its head and type required="false"?


required="false" />

The parser will still see the required attribute and implement the behaviour even though you tried to tell it not to. Certainly not what you wanted.

There are three valid ways for a boolean attribute to be applied. (The second and third options only apply if you’re writing XHTML syntax.)

required
required=""
required="required"

Applying that to our above example, we would write this (in HTML):

required />

Summary

It would be impossible for me to list here all the quirky markup patterns and practices I’ve come across, but these are some of the most frequently seen. What other common markup mistakes have you spotted around the web? Which areas of HTML5 require further clarification? We’d love to help get the wording or examples in the spec changed to make them a little more specific, so leave your thoughts below, and don’t forget to escape your HTML!

Thanks to Ian Devlin, Derek Johnson, Tady Walsh, the HTML5 Gallery curators, and the HTML5 Doctors for their input to this article.

Avoiding common HTML5 mistakes originally appeared on HTML5 Doctor on July 26, 2011.

Your Questions #15

Richard Clark — Fri, 14 Jan 2011 14:30:23 +0000

The clinic is busy as ever with more HTML5 ills. This week, we’ll cover marking up Wikipedia infoboxes, anchors in

for avatars, header(s), and how to use

 and .


  Wikipedia Infoboxes
  Andrés asked:
  
    Hello. I want to ask how I can code some stuff based on Wikipedia infoboxes with HTML5, which most of the time uses tables. I think that all of these can be surrounded by a figure tag, but I’m not sure about the subtleties.

    Reference page: http://en.wikipedia.org/wiki/Help!_%28album%29. It has a main infobox that:

    
    	Has a heading
    	Has a thumbnail image
    	Has 3 sections each separated by a faux table heading:
    		
    			One that has a table with two columns, one with keys and other with labels, which I believe that can be done better with definition list but not sure if table is suited too
    			One that has a list of links of magazines that have reviewed the disc. I believe it is fine as is coded but still
    			One with a “chronology”, which is like a navigation menu in a table with the previous, current (no link) and next installment. Not idea if there’s an ideal way to markup it
    		
    	
    

    There’s a 2nd infobox that feature a long list of links of related contents divided by some kind of table headings. I suppose it may better done by lists but there’s may be another approach. The 3rd infobox repeats the chronology noted above.
  
  
  It’s a blessing and curse of HTML that there is often more than one correct answer. This is even more true with HTML5. Let’s look at the Help! album page:

  
  	Is the infobox essential to understanding? If yes, use ; if no, use  (inside ). If this data is just a summary of information already in the article,  would be appropriate. If it contains unduplicated data, I prefer . I don’t think  is the best container element for the infobox.For the “studio album” details section, either  or 

  	
 would be appropriate.“Professional reviews” and “chronology” both look like lists, although either could also be a table.
I actually find the chronology formatting quite strange, as it’ll only work well for 1–3 items. Assuming this would be used for a full chronology, an ordered list would be more suitable. I guess that this is only to list the previous and next albums (a partial chronology). I don’t think it’s suitable for  as the Beatles released more than three albums (but might be if all albums were listed). It’d be good to use rel="previous" and rel="next" attributes on these links.
The blue background titles would be best represented by –
  titles, ideally titling each .
I’m guessing the second infobox you refer to is the large table of links at the bottom of the page. This seems appropriate as a series of inline lists (ordered by time or alphabetically) in a table.
I’m also guessing the third infobox you refer to is the “US Release” one that uses the same template as the first. The first infobox notes apply here too.
Peace — Oli

	No anchor elements allowed in  elements
	Daniel asked:
	
		Consider the following code:




  Title
  Sub Title



    When using http://html5.validator.nu/ to validate my page, it says that this is invalid “Error: Element a  not allowed as child of element hgroup  in this context.”

    I know that this validator is in beta (at least I think so), so maybe it’s wrong, but would you tell me if this is really valid or invalid? If it is invalid, would putting the anchor tags inside the heading tags fix it (despite having to use more markup  
    
	
	
	This example is in fact invalid. Only 
– elements can be a child of .

	You can get around it using block-level links like so (but bear in mind some browsers have trouble with block-level links):



  Title
  Sub Title



  Hope that helps.

  Rich

	Using  and  as the avatar/id in a blog comment
	BigAB asked:
	
		Would this be a proper use of the figure and figcaption tags: representing the common case of avatar/username on comments (or forum entries) as a figure? Example:

   Comment on The Blog Article
   
       
       My Name
   
   I am commenting on our blog article. This is my comment. I have much to comment on and am doing so in this comment.
   Thank you for letting me comment here.  I think it good that we can comment.  Feel free to comment on my comment.

	

	Doesn’t feel right to me. The spec says this:
	
	
	  “The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.
    
    The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.”
    
    
      W3C Specification
    
  

  By “referred to”, I understand that to be “See figure 9″, but your example doesn’t do that. Personally, I’d just write:

  Bob Smith

  Cheers, Bruce

	HTML5 Header
	Josh asked:
	
		I have read up a lot on the header element, and nesting numbered headers inside the hgroup element, and so forth. I’ve put a lot of the things I’ve seen on HTML5Doctor.com into practice on my own site, but was wondering if I can actually put the numbered header anywhere in the header, instead of having the numbered header (eg, h1-h6) first.

    I was also wondering if putting links inside an h1-h6 itself would actually damage either page rank or usability. I mean, I don’t imagine how it would, but I like to be very careful, almost too careful with how I do things. I do auto-validations of all my markup constantly, and do manual validation once in a while. So, I’m a little OCD when it comes to items such as the header. Of course, putting the a element around the header itself may not hurt either – but like I said, I love to be careful.

    Plus, great work on the site and the organization, folks! Some friends and myself make some articles on topics such as CSS and XHTML, more-recently HTML5, and it’s refreshing to come here to see a view from some real experts!
	
	
	Thanks for your e-mail.
	
  
  	– elements can go anywhere inside , although we advise you to mark up your content first before thinking about CSS, so your page makes sense even without CSS.
  	If you have more than one – as children of a , wrap them in . If there’s nothing else in the , just use the  and not the .
  	If you only have one – and no other heading content, you don’t need either  or , although they might still be useful for a CMS template (where more stuff might be inserted) or as CSS hooks.
  	Links inside – don’t affect page ranking or usability in isolation (but might affect usability if, for example, the link is to the current page).
  	You can use block-level links around a  or , but test and be careful of Firefox’s vomit bug.
  

  Finally, while we applaud your studious approach to coding, do keep in mind that HTML is quite forgiving   As long as you validate occasionally and follow the spec, you’ll be fine. The web stack is a deep rabbit hole to go down, so while it’s great to do the best you possibly can, we also prescribe going outside once in a while  

  Peace — Oli

	 vs 

	Daniel asked:
	
		Dear HTML5doctors,

    How should I markup code example correctly? I have some that are inline inside my text, I think that’s code then, but others are multi lined. I need them to be white-spaced correctly as they would get them with pre, but isn’t that semantically wrong?

    Or do I put  inside 
?  inside ? Or is  to  as  is to ?

    Many thanks
	

	
	For inline code, just use ..., a phrasing (inline) element. For multi-line code, use 
...
.  is a flow (block-level) element. Finally, the entities < and > map to < and >, which you’ll need to escape inside any HTML code snippets (although you only really need to do the first one).

  Peace — Oli

	Got a question for us?
	That wraps up this round of questions. If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.
Related Posts:
Your Questions #14
The hgroup element
Your Questions Answered #7
Your Questions Answered 9
Avoiding common HTML5 mistakes
Your Questions #15 originally appeared on HTML5 Doctor on January 14, 2011.

Your Questions #13
Richard Clark — Tue, 28 Sep 2010 14:15:52 +0000
 The clinic is getting busy with more HTML5 ailments. This week, we’ll cover server-side validation, immutable images with , retrieving drawn objects from a , creating custom tags, the role attribute, and the effects of 
 on SEO.

Server-side validation
Brian asked:

We currently use PHP-Tidy to validate the HTML mark-up of content regions of our site. Our content regions have images that represent modules in our system that get translated into code for things like processing video, forms, etc. I’ve been making the move to upgrade these modules to use new HTML5 elements, but I’m finding that Tidy is stripping out these elements and I’m doing a lot of dancing around these issues right now. Are you aware of any server-side processing scripts that have been updated to work with HTML5 and perhaps with ARIA support as well?

The current contender is html5lib. The PHP version is v0.1, so YMMV.
It seems that HTML5 support won’t be coming to Tidy anytime soon.
Good luck! Peace – Oli


Immutable image with 
Mike asked:

We do have a medical app and we want to use  to let docs draw over a still picture.  The only thing I cannot do is keep the picture unchanged when they use an “eraser” (basically a white pen). I haven’t found any example on the web so may be it’s impossible. It seems that the background image either part of the canvas of a div containing the canvas becomes part of the canvas itself. If it’s possible what’s the secret? Thanks

This is possible in a variety of ways. Here’s a quick demonstration of one of the solutions. Open the demo up in Firefox 3.6 or later, drop an image in the box, draw over it, and click the “Drawn image as PNG” button to retrieve what you drew (without the background image).
Here’s what’s happening: the canvas is sitting inside of a 
 containing my still image, but I’m drawing on the nested  (I think you had it the other way around, which was causing your problems).
Hope that helps, Remy


Retrieving objects from 
DJ asked:

I wanted to know if there is any way in which the drawn objects say rectangle, circle, line, … within canvas can be identified based on the selection at later point in time (after they are drawn).
If there are no direct APIs how could we achieve it. Do we have to store the co-ordinates of each of the created object within and do the object identification based on mouse cursor? Thanks

Unfortunately, there’s no way to retrieve these objects unless you write your own system to handle it. There’s no native support for this in .
It sounds like you actually need to use SVG, which will allow to you to hook event listeners and query the DOM tree that’s created. If you need some convincing that SVG is the right tool for the job, have a look at the Raphaël JavaScript Library. It uses SVG exclusively and is able to create some very impressive drawings and animations.
Cheers, Remy


Custom tags
Mike asked:

So by using some JavaScript I can insert unfamiliar tags into IE, and using CSS I can format them. My question is why stop with HTML5 tags like section and nav? What are the pros and cons of custom tags like , , ,  or even , , ?

Custom elements go against having a standard like HTML5. Standards map out the set of elements, attributes, and APIs that the browsers need to implement so web developers can use them, and they provide those developers with a common approach to marking up a web page.
If custom elements were allowed, we would have an infinite number of ways to mark up content, many of which would share a common goal but require different implementations. As an example, here is a number of different elements I can dream up for some primary content: 
, , , , , , , , , , , , , , , , , , and . Many of them are bad ideas, but hopefully you see my point. This doesn’t even account for the more predictable , ,  that would likely also be used.
This sort of markup would make HTML a nightmare to maintain. A developer coming into an existing site would have to learn which elements have been used and what their purpose is. And it’s not just painful for developers. Browser vendors would have to find ways to parse these elements and define how they should be used. Is this element supposed to be block-level? Is it interactive? Should it impact the document outline? And what about search engines? How do they know that  defines the most important content on the page, the content that should really be indexed?
Standards narrow the possibilities and ensure developers, browsers, and machines (search engines and the like) are all speaking the same language. Many people spend a great deal of time debating the specification, trying to reach consensus on which proposals should be standardized and how they should be implemented.
So stick to the standards! They exist for everyone’s benefit. As browsers continue to implement the specification correctly (even IE is catching up), our jobs will be made easier and we can spend more time creating really cool things  
John Alsopp’s fantastic article Semantics in HTML5 goes into more detail about this issue. You can also see where some of the element names came from by looking at the work Hixie did researching class names in Google’s index.
Regards, Mike


The role attribute, SEO, and 
Robson asked:

What about the role attribute? Was it dropped from specification? What will be the “role” of the role attribute in HTML5?
Today, just the home page should have the name of the site into a H1 element. On others pages, the H1 should be used to the title of the articles. How do search engines interpret the HGROUP and multiples HEADER and H1 elements today? How to implement the HGROUP and the HEADER today without impact the SEO? Thanks, guys!

To answer your first three questions, role is in. You can use it belt-and-suspenders style until assistive technology catches up with HTML5. Just be careful: “Authors may use the ARIA role and aria-* attributes on HTML elements, in accordance with the requirements described in the ARIA specifications, except where these conflict with the strong native semantics described below”.
For the second part of your question, that’s not true. You can use more than one 
 in HTML 4/XHTML 1. It’s not advised to make every heading  in HTML 4/XHTML 1 (because historically some people did that to spam), but it may be appropriate in some cases — e.g., site name and page title. Using two ‘s on a single page has no effect on SEO.
With regard to 
 and , you’re asking the wrong question. Search engines care about high-quality, relevant content. Search engines penalise spamming, but writing markup according to the specification is not spamming. The HTML5 editor works at Google, so they’re well aware of the spec. html5doctor.com has implemented  and , and it hasn’t hurt our search engine rankings any  
For more, see our articles on the header element and the hgroup element.
You probably don’t want to use 
 everywhere anyhow, as CSS selectors are not that smart. If you wrap every - in a sectioning element (, , , ), you don’t have to worry about keeping a logical order for your headings. Doing this means you don’t need to overwrite CSS as much. The old style, however, with the requirement to keep a logical order for your headings, still works.
Again, you’re concerned with the wrong thing. Good SEO = good content. Worrying about placement or what search engines think is a waste of time — worry about good content.
Peace – Oli


Got a question for us?
That wraps up this round of questions. If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.


Related Posts:

Your Questions Answered #11
Your Questions #16
Your Questions Answered #7
Your Questions Answered #5
Your Questions 18


Your Questions #13 originally appeared on HTML5 Doctor on September 28, 2010.


Your Questions Answered #11
Richard Clark — Fri, 30 Jul 2010 14:00:13 +0000
 The clinic is busy as ever with more HTML5 ailments. This week, we’ll show you how (and whether) to store a  on the server, whether to use  or , more on 
, the placeholder attribute, and HTML5 minification.
    
    
      Getting info from a canvas to the server
      Stephen asked:
      
        I want to use a canvas element as a layout plan and allow people to move things about and the like but I then want to be able to submit the changed layout to the server so it can be kept not just as a bitmap but as the various current layout of the plan.  Is this possible?
      
      You could call canvas.toDataURL() and store this output on the server. (Note that canvas is the DOM node and not the 2D context.) This will store the current state of your canvas, but it’s effectively a bitmap at this point. If you want to store the element for later editing, I’d suggest you use SVG instead. You can achieve the same graphical effect, but you’ll have access to the actual vector data since it’s XML.

	  Hope that helps,
	  
	  Remy
    
    
    
      Progress or meter?
      Pierre asked:
      
        Hello doctor,

I’m beginning with HTML5. I just wonder if I’m using the progress and meter elements correctly. Just imagine a player. Is it correct to use: the progress element to specify a load bar; the meter element to specify the volume set.

Thank you Doctor, have a good day.  
      
       is spot on for a loading bar, yes.

	   is read only, however, so it’s not appropriate for a volume control. There are some examples in Tom’s article on . To create a volume control, you could use one of the new input types specified in HTML5, perhaps .

	  Cheers,
	  
	  Rich
    
    
    
      Headers
      Brad asked:
      
        Having read you can use the header tag within almost any other element, is it fair to say you no longer “design” the header but simply design the elements in each header?  How does that work?  Would you use header classes?
		
        In the past you define your header with an image or text etc.  You can no longer do that if you use multiple headers?
      
      The 
 element should be used if you have any related information within the “header” of that section that needs to be grouped. This means, for example, it isn’t necessary to wrap a lone  in a  element. Also remember that the header doesn’t have to appear at the top of a section of page.

    Our articles on the 
 element and  element explain this some more.

    Whether you need to use classes depends on your site.

    Ta,
    
    Rich
    
    
    
      The placeholder attribute
      José asked:
      
        I recall once having seen text inputs that had tips inside them. They didn’t need Javascript in order to manage those tips. Would you consider discussing that a little better? That’d be great! Thanks!
      
      We’re publishing an article on forms shortly, so be sure to look out for it.

	  Meanwhile, you’re looking for the placeholder attribute. Currently, this is supported only on Webkit browsers, although Mozilla is also working on it. You can use placeholder like this:

      
      
	  We’ve also written a JavaScript solution using feature detection (i.e., it will check whether the browser supports placeholder and adds support if not). Just add this script to the end of your markup (note that it should be the end since it needs to run once the DOM is ready).

	  Hope that helps,
	  
	  Bruce & Remy

    
    
    
      HTML5 Minified
      Grant asked:
      
        Hello! Big fan of your website. I wanted to know about the so called “HTML Minified” feature that allows you to strip the html, head and body tags from your page.

		The W3C Validator Conformance Checker for HTML5 says this is valid, but the Conformance Checker is beta and is supposedly unreliable. I haven’t heard from anywhere else that stripping these tags is a feature.

		So is it really a feature? Or just a bug (A BIG one at that) in the experimental validator? I know that it works, but I would like to see any confirmation other than the validator that this is in fact an intended standard before I start using it on my websites. Thanks!
      
      According to the spec, it is now explicitly permitted to omit all kinds of elements tags, including the ones you mention. Browsers are able to deduce the document structure based on context (e.g., some elements are only allowed within a  element) and will fix the DOM as they go. In fact, these have always been optional tags in HTML (but not XHTML).

	  Browsers are so good at this, though, because they’ve had to deal with the pants code out there on the interwebs. Going this route means you’re relying on browser error handling to render your document (although said error handling has admittedly been standardised in HTML5). I personally see it as a more extreme version of quoting element attributes. Of course you don’t have to, but being strict makes errors much easier to find, helps out parsers that may not be as sophisticated as a full-fledged browser (like text editor syntax highlighting), and makes it easier for beginners and veterans alike to learn and use HTML.

	  In general, machines understand you better when you’re explicit, so I’d advise against omitting these elements.
      
      For more detailed articles on HTML5 minification, check out Remy’s HTML5 Boilerplates and Bruce’s A minimal HTML5 document.

	  Peace,
	  
	  Oli
    
    
	
		Got a question for us?
		That wraps up this round of questions. If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.
	
Related Posts:
Your Questions Answered 9
Your Questions Answered #7
Your Questions #13
Your Questions Answered #5
Your Questions Answered #8
Your Questions Answered #11 originally appeared on HTML5 Doctor on July 30, 2010.


Your Questions Answered 9
Richard Clark — Fri, 14 May 2010 14:15:57 +0000
 The Doctor is in with another round of patient questions about HTML5. This week, we’ll cover offline viewing on requests, the drag-and-drop API, using href on any element, the 
 element, and headings.
Offline viewing on requests
Johan asked:
It is possible to let Firefox 3.5/3.6 save a page for offline viewing with the manifest file?

In that case Firefox asks for permission to save the site the same second you arrive – not very user-friendly.
Is it possible to send the save-it-locally request via Javascript on a click?
Basically I want a link/button which will fire the request – and not on document load.

While it isn’t possible to make Firefox 3.5/3.6 save a page for offline viewing with the manifest file, there is a way to do this. It all depends on how you write the “save-it-locally request” code. You have two options:

If you want to store an arbitrary document that is not explicitly listed in your manifest, you could run an Ajax request for that document and store its contents in localStorage. When you want to view that document, load it from localStorage and overlay it on the existing page.
Dynamically manage a manifest file for individual users, so that if a user requests a new file that isn’t in their manifest, register this on the server side and add it to the manifest — which is bespoke to this specific user — on the fly.

I’m not sure what you’re seeing with regards to the permissions error. When I test the manifest (offline **cache**), it doesn’t ask twice.
Note: you asked about Firefox 3.5 — the offline manifest doesn’t work properly at all in this version.
Thanks, Remy
Question about dragging
Marc asked:
Evening,
I’m trying to get my head around the drag and drop (DnD) possibilities of HTML5. I have a “simple” task: Read the content of a XML file, using JavaScript, and do some manipulations of he XML. Without the use of server side scripts.
I tried my way with Google, but apart from people complaining about the DnD specs, I wasn’t able to find much insightful informations.
Can you point me toward resources to understand the DnD possibilities of HTML5?
Thank you Doctor, a French canadian HTML5 fan  

Absolutely! There’s actually an HTML5 Doctor article covering native drag-and-drop. It also includes links for further reading and related posts (such as accessibility experiments).
I hope that helps.
Cheers, Remy
About the href on any element
Luan asked:
I’ve heard a long ago that href would work in any tag, such as a 
 or a h1, even a div and others… but I don’t see anything about this in the last days. Do you know if this is going to work?

That was in XHTML2 (on which the W3C have now stopped work).
The HTML5 equivalent is to wrap an  around the other tags. It’s called block-level linking, and we’ve written an article about it.
Cheers, Bruce
W3C Validator for the  element
Fjpoblam asked:
I have a (prospective) structure containing 8 figures: each an image with a caption. My goal is an image gallery, each image clickable toward an individual htm file containing a slide show. (In html4 I structured each “figure” as a div: figure seemed ideal for the task.)
Problem is, I tried to follow the *validator* hint with a dd for the image and a dt for the caption (each surrounded by an a). Upon doing so, the validator pops up an error. When I try a straight image with a legend, it is also rejected for want of a dd and an optional dt.
What gives? Do you have a hint? Or better, simply, point me doofus to the correct doc so’s you’ll “teach a man to fish”.

I’m not sure if the validator is up to date or not, but you shouldn’t be using 
/
 in  anymore. Please use .
See our article on the 
 and  elements for more.
Also see our glossary for more examples.
Cheers, Rich
Headings
Thomas asked:
Dear Doctors,
you covered the new header tag in an article. The header tag should contain a heading element, like h1-6. So far so good, but how do I structure my headings further on. E.g. I’ve got this:

	
		My major heading
		Subheading
		Abstract text...
	
	... lorem ipsum ....
	Heading within my article
	... dolor sit amet ...
	Subheading in my article

Which heading-level would be appropriate in my example? h1 because it starts again? or h3 because it continues?
Thank you

If the first  is a new subheading and not related to the 
 already there, then  would be an . Then  would be an  if it is a subheading of the above .
However, if you’re splitting the article into sections, then you could use an 
 each time. See our article on the section element for more.
Thanks, Tom
Got a question for us?
That wraps up this round of questions! If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Related Posts:

Go offline with application cache
Your Questions Answered #10
Your Questions Answered #7
Your Questions Answered #11
Your Questions Answered #4


Your Questions Answered 9 originally appeared on HTML5 Doctor on May 14, 2010.


Your Questions Answered #8
Richard Clark — Wed, 05 May 2010 13:00:55 +0000
 We’re back with more of your questions (and our answers) about HTML5. In this article, we’ll discuss using a 
 at the top of your markup, how to skip to certain parts of a video, styling form elements and attributes, and more.
HTML5  on top
David asked:
Hi!
I wonder if it possible to put the footer on top such as www.perfectfools.com with HTML5 and still make the HTML validate.
Thanks a lot and best regards!
David

HTML elements should always describe their content, so if you think that 
 is most suitable for your content, then you’re absolutely entitled to use it. Despite its name, ‘s position is in no way restricted — visually or ordinally — within a document.
Cheers, Rich
Skip to certain parts of a video file
John Paul asked:
Hello
supposing I have a very long video file in an accompanying video element, without using the controls, how do I skip to certain time stages through the API? Much as one would on a DVD menu, for example.
Apologies if this has been asked already.
JP

You can achieve this using JavaScript and data attributes. Check out these articles from Bruce Lawson and Patrick Lauke from Opera. They’ve used data attributes to add subtitles, but you could just as easily use the attributes to jump to specific parts of a video.

Introduction to HTML5 video
Accessible HTML5 video with scripted captions

For example, set data-start and data-end attributes on your  element. You can then use JavaScript to read the attribute values, set the current position of the video using the currentTime attribute, start playing the video via the play() method, and even stop playing the video by listening for the timeupdate event and stopping the video with pause() once it’s reached a specified time. See the spec for the HTMLMediaElement object for more details.
Cheers, Rich
In addition to this, the recent addition of the track element will make this more easily achievable. We will cover the track element in more detail soon.
s within navigation links
Benjamin asked:
Hey,
I’m currently doing up the new version of my website, and decided to do it in HTML5.
One area I’m confused about is whether or not for navigation links I should be using a h1 or h2 element.
For example:

    
        Actions
    
    
        Sitemap
        Login
        Search
        Enquire
    

Should those span.title elements be wrapped in a h2? My thoughts on why this would be required is for an outline, as navigation should appear in the outline right?
Thanks a bunch.

In theory, yes, navigation should appear in the outline. I personally don’t think it should require a heading, and I know there have been requests to the developers of the outline algorithm to make 
 show as a ‘Navigation’ element rather than ‘untitled section’.
If you want to use a heading within your 
 element, using an  would be fine. You don’t really need the  element in there too. The outline would be calculated correctly without it. With current browser implementations, however, I don’t think it would make much difference if you used an .
You don’t need the  elements in the 
s. They aren’t required in the outline unless they’re providing a table of contents for the document.
I hope that answers your question. We plan to write an article regarding outlining soon.
Cheers, Rich
Styling supported HTML5 form elements and attributes
Mike asked:
First off, I wanted to say I really appreciate the service this site is doing. I have found this site to be a very valuable resource and is always the first place I look when I have a question about implementing HTML5.
How do I style/edit/change the UI generated feedback for the new HTML5 form elements and attributes. For example, In Opera, is there a standard CSS notation to style the error message so that it doesn’t necessarily show up under the field in red? Where in the DOM is it inserted? Is the message for a required field customizable? Finally, is this information specified in the HTML5 spec or are the implementation details left up to the browsers?

There is currently no way to use CSS to style error messages. As the HTML5 spec isn’t finished yet, it’s a bit early to start specifying new CSS.
The HTML5 spec defines no UI requirements regarding how browsers should display messages.
You can override a browser’s default behaviour with JavaScript. I’m not a scripter, but I reckon you would need to attach an event handler to the error event and have the handler cancel the default action and show a custom error message. I think that as long as you call evt.preventDefault() within the event handler, it should prevent showing the default error message. Then you can add an element into the DOM and style it as you wish, with the default error handling as a fallback for those without JavaScript. If anyone gives this a go and gets it working, we’d be very interested to see the results.
Ta, Bruce
Section headers
Tibor asked:
Hi. I would like to know, how to use section’s headers. Is this code correct?

	header 1


	header 2

or I have to use header element inside every aside, article, section etc.

	
    	header 1
	


	
    	header 2
	

Tibor

Your first example is correct. You only need 
 to group items within a header. If the header contains only a single – element, you don’t need to wrap it in a .
Thanks, Bruce
Got a question for us?
That wraps up this round of questions! If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Related Posts:

Your Questions Answered #5
Your Questions Answered #7
Your Questions Answered #4
Your Questions #14
Your Questions Answered 9


Your Questions Answered #8 originally appeared on HTML5 Doctor on May 5, 2010.


Your Questions Answered #7
Richard Clark — Tue, 20 Apr 2010 14:10:51 +0000
 Here we are again with another round of patient questions about HTML5. In this article, we’ll be covering AJAX, the eternal question of 
 or , our old friend Internet Explorer, how to mark up multiple blocks of content in a sidebar, and using  with .
HTML and AJAX
Arie asked:
I’m still learning about html5 and javascript, I’m wondering how html5 makes doing a lot of the things currently done in ajax and javascript more simple.  Is it by providing things like the canvas that unify ideas?

Certain parts of HTML5 will indeed simplify or reduce the need for JavaScript. One such area of improvement is Web Forms 2.0, which will handle client-side form validation in the browser and provide new input types (like  that checks for a valid email address). Of course, you’ll still need to validate your forms on the server, but at least the browser will catch the most obvious mistakes before the user actually submits the form.
Other parts of HTML5, like Web SQL Databases and , are essentially JavaScript APIs. They may not cut down on your need for JavaScript, but they do provide a consistent interface to some powerful functionality and will enable your application or site to do more things within (or outside of) the browser.
Cheers, Rich
 or ?
Paul asked:
Hello
I see you are using divs on your website, I thought divs should be replaced by more semantic tags such as sections or article. what did I miss?
Thanks

Hi Paul,
Just like with HTML4, you shouldn’t use 
s or s where another, more precise element would fit the bill. But for grouping arbitrary content, s and s remain the way to go.
Thanks, Bruce
HTML5 and IE6
Adam asked:
Greetings HTML5 Doctor,
Is it at all possible to have a HTML5 layout while 30% of our users are running IE6? We are an IT company and our website is very large so having separate versions is completely impractical. HTML5 would allow us to move on and keep our markup a lot simpler but with no concrete guarantees regarding universal support is HTML5 ever going to get off the ground within 5 years while not having to resort to javascript solutions?

Simply change the doctype and you’ll be writing HTML5! If you want to use new elements, however, you’ll need to use JavaScript to support them (for all versions of IE up to IE8). The best place to start? Read Remy’s article on How to get HTML5 working in IE and Firefox 2.
I think we’re in a position to do something about this. By using the new doctype, block-level links, and new form input types (that degrade gracefully), we can start promoting HTML5 right now.
Cheers, Rich
Multiple blocks in a sidebar
Bart asked:
On my page (revora.net) I have a sidebar with content that I deem appropriate for the aside element. The sidebar contains several blocks of content. I’ve currently made the whole bar aside and made the blocks div. Is this correct, or should I do it the other way around?

It sounds like your first approach is correct. The 
s might be s or maybe  elements though, depending on their content. I suggest you read our article (and the comments) on the  element.
Thanks, Tom
Header with 
Diego asked:
Hi,
This structure is right?

   
       
           Foo Bar
           Baz Bat Qux
       
   
   lorem ipsum

What I mean is, if I have a HEADER with just 2 H(n) I need to put these into a HGROUP ? Or… I can remove the HEADER and leave just a HGROUP? What’s the better solutions for it?
Thanks for all,
Diego Tres

What you have is correct. Basically, in the document outline, you will only see “Foo Bar” as the heading for that section. “Baz Bat Qux” will be hidden from the outline.
You don’t have to use a 
 within your  or an  within your . Similarly, you don’t have to use a  around your .
To summarise, the best solution (if you don’t require the 
 to appear in the document outline) is what you’ve already got.
Cheers, Rich
Got a question for us?
That wraps up this round of questions! If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Related Posts:

Your Questions Answered #5
Your Questions Answered #8
Your Questions Answered #11
Your Questions Answered #6
Your Questions Answered 9


Your Questions Answered #7 originally appeared on HTML5 Doctor on April 20, 2010.


The hgroup element
Richard Clark — Tue, 23 Mar 2010 15:45:12 +0000
One of the new elements defined in HTML5 is 
, used for grouping titles with their associated subtitles. But why do we need  when we’ve already got the  element? In this article, we’ll do our best to answer that question.

What is the  element?
Here’s what the spec says about 
:
The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.
W3C Specification

So what does that mean?
 acts as a wrapper for two one or more related heading elements possibly contained within a  element. It can only contain a group of – element(s), and it should be used for subtitles, alternative titles, and tag lines.

The easiest way to demonstrate proper use of 
 is through some examples. Thanks to Dr. Oli for letting us use his examples.

An article with one title
The title consists of a single 
, so neither  nor  is required:

  Title goes here
  Lorem Ipsum dolor set amet


An article with a title and metadata
Here we’re using 
 to group the title and associated metadata, so an  is not required:

  
    Title goes here
    20th March, 2010
  
  Lorem Ipsum dolor set amet


An article with a title and subtitle
An 
 contains the title and subtitle of the article:

  
    Title goes here
    Subtitle of article
  
  Lorem Ipsum dolor set amet


An article with a title, subtitle and metadata
An 
 contains the title and subtitle of the article, and then a  contains the metadata and the :

  
    
      Title goes here
      Subtitle of article
    
    20th March, 2010
                  
  Lorem Ipsum dolor set amet



Real world examples
On Alex Gibson’s MiniApps, he uses 
 to include a tag line after the main “MiniApps” heading. (This is also what we’ve done on this site if you view the source.)


	
    Screenshot from Alex Gibson’s MiniApps site


So why use ?
It’s all about the document outline. When grouping headings in an 
 element, the outline algorithm will mask the lowest level all but the highest level heading in the group from the resulting document outline. Using MiniApps as an example again, in his markup (although this is simplified), Alex uses:

<header>
  <hgroup>
    <h1><a href="/">Mini Apps</a></h1>
    <h2>Web applications for iPhone, Android & other mobile platforms</h2>
  </hgroup>
</header>


The 
 contains both  and  elements, but the outliner only includes the . This is illustrated in the image below. (Please ignore the “untitled section” as well. This is caused by the nav element, and a change request has been submitted to address this.)


	
    Document outline of miniapps.co.uk


We’ll be covering document outlines in another article, so I won’t go into detail here. You can test your own pages in the HTML5 Outliner to ensure that you’re using the heading elements within 
 correctly.

Summary
In this article, we’ve demonstrated how to use the 
 element effectively. To recap:


  If you have a simple title with a single heading element (–), you do not need an .
  If you have a title with subtitle(s) or tag lines (i.e., more than one consecutive –), group them in an .
  If you have a title with subtitle(s) and other metadata associated with the section or article, place both the  and the metadata within a single  element.


Let us know how you’re using 
 in your HTML5 projects!
Related Posts:
The hgroup hokey cokey
Document Outlines
The header element
Your Questions Answered #7
Your Questions 18
The hgroup element originally appeared on HTML5 Doctor on March 23, 2010.


Your Questions Answered #5
Richard Clark — Tue, 02 Mar 2010 14:30:55 +0000
 We’re back with our first roundup of your questions for 2010. In this article, we’ll be covering a range of topics including sections and sectioning, the  element, scaling video, and a proposal for a  element. 
Headers and sidebars
Ad asked:
Hello,
I have 2 questions:
1. If I have my main navigation above the masterhead would best practise be having the nav tag inside of a header tag with the h1 and h2 in a hgroup? Or should the nav and header tag be separate?
2. I am building a blog in HTML5. It has a blog-like sidebar with articles, contact info and about info in it. Would the best tag to wrap this in be section or aside?
Thank you so much for your time,

Ad Taylor
Placing your 
 within your  is fine and valid. However, if it makes more sense to leave it outside, then you can do that too. You don’t need to put the  inside the  though.
See our articles on 
 and  for more on this.
Regarding your second question, I would use 
 (as we’ve done on the HTML5 doctor site) and then use multiple sections within that. Also see Bruce’s article on Designing a blog with HTML5.
Hope that helps.
Cheers, Rich
HTML5  element
Martijn asked:
As you are, according to the slogan, “helping [me] implement HTML5 today,” I thought to bother you people with a spec. related question.
What should an UA do with an image without specified width and height attributes?
The dimension attributes part of the specification keeps stating “if specified” for every rule but doesn’t give any “if not specified”.
The part of the specification defining the img element itself does not state anything of importance about the dimension attributes apart from how the attributes in the DOM should be created by the UA.
Interesting is to note that they have omitted these attributes in all their img element examples.
In the dimension attribute section they go state the following.
 – The dimension attributes are not intended to be used to stretch the image.
So we can only use them to make images smaller? This is odd as well so let’s say by stretch they mean to say both expending and shrinking in size. In this case the attributes can only be used for two cases:
1. To state the exact width and height of the image. Something that seems redundant unless not using those attributes means the UA can display the image at any size (which it might, as nothing about this is defined in the spec.).
2. To give a 0 in both attributes. By this I am telling the UA that the image is not to be seen by the user.
Am I missing something or is the specification missing this?
Looking forward to getting your prescription  
Kind Regards, Martijn
If no dimension attributes are specified, the browser will leave no space for the image, and once the image has been loaded (after the rest of the page), it will then need to reflow the entire page, as that’s the first time it knows the size of the image. This can cause the content you’re reading scrolling off the page.
If you give the size of the image as attributes in the HTML, the browser will leave space and render the image there once it’s loaded without reflowing the page. On a mobile phone, reflowing the page unnecessarily drains the battery, and users can get vertigo from the page’s text jumping around to accommodate images.
Thanks, Bruce
Section and Sectioning
Yanoo asked:
Hi,
What do you mean when you are talking about “sectioning”? And why don’t header and footer require sectioning?
I think about section and sectioning like about part of something defined. News, comment, page content, sidebar, *header*, and *footer*. Is it bad representation?
Sectioning relates to the headings in some block of related content and defining what is related to what in a hierarchy of headings (
–). The outlining algorithm can produce a table of contents from the nested , , , and  elements.
Headers and footers themselves do not change the outline; a header or footer may contain no headings. If a header or footer does contain a heading, then that heading does come into the outline. See our article on the section element.
Thanks, Bruce
Scaling the Video
Ian asked:
Hi there,
Not sure if this question is an appropriate one, but any help would be really appreciated.
I’m going about updating my video website, chutney.ie, and would love to implement HTML5. I am interested in replicating the scaling effect/style used on the Mozilla welcome page.
Not being overly knowledgeable in this area, I would love to know how to begin — is this effect a Flash based animation, or something that can be achieved with HTML alone?
Again, any nudge in the right direction would be great.
Many thanks,
Ian
I’m not sure how Mozilla did it, but you can use some of the Webkit and Mozilla transforms on the  element. For example, you can cause the video to grow on hover — see this example in Chrome, Safari, or Opera. You can also use the :target pseudoclass to initiate animations. Alternatively, you can use a JavaScript onClick event to create the same effect. 
You can also combine  and  to provide some interesting results (laying the  over the ). For more on the  element and what it can do, please read the Introduction to HTML5 Video on dev Opera written by Bruce Lawson and Patrick Lauke.
Cheers, Rich
We need a  tag
John wrote in and proposed a field element:
Hey there. First off thanks for the site. I was excited to find it. I spent a little time on the W3C site and honestly couldn’t figure out how to submit suggestions there. So going to submit mine to you guys and maybe you can pass it on (if it is good) or point me to someone that can help. Ok to the point:
We are getting nice new tags to with HTML5 (nav, footer, etc) to help us create more semantic code. I think what we really need is a field tag — after all what are fieldsets sets of?
Everyone wraps up their labels and inputs with some element. Some of us do this with UL, some people do it with DT/DD, some with DIVs and some people out there insist that a form is tabular data.
We are all just bastardizing these elements because there is no clear semantic wrapper for field elements of a form.
I think you get the point. I’m trying to keep this email short. If you think there is anything to this argument, I have a more detailed summary (with example code) at:
http://john.mirick.me/2009/10/what-is-really-set-of-shouldnt-we-have.html
I would love to hear your thoughts on this.
Thanks!

John
While a field element would be nice — it would stop the argument over how best to mark-up forms — you have to ask yourself whether or not it actually adds any semantic or functional value to an HTML document. Yes, wrapping inputs and their labels in a field would make things easier to read and drop the need for the for attribute on the label (since the relationship can be assumed), but doing so would not be backwards compatible. In theory, we could continue to add for until there is a suitable time to drop it, but again I question the value of such a tag.
The purpose of wrapping form input/label pairs is generally to ease styling. My personal stance is that unless there are case studies showing how such an element can add more value to HTML forms, this proposal won’t make it very far.
Regards, Mike
Got a question for us?
That wraps up this round of questions. If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help. 

Related Posts:

Your Questions Answered #8
Your Questions Answered #7
Your Questions Answered #11
Your Questions Answered #6
Your Questions 18


Your Questions Answered #5 originally appeared on HTML5 Doctor on March 2, 2010.



September HTML5 spec changes
Remy Sharp — Thu, 17 Sep 2009 12:00:20 +0000
September being one month before the HTML5 spec goes to last call in October, there’s been a few significant changes to the HTML5 spec that we wanted to briefly share with our patients.



Clarification over section and article

The spec has been clarified to help authors correctly choose between when to use section and when to use article, and Bruce’s section post has also been updated.

footer now works like header

This was a big one and causing confusing to people coming to HTML5 for the first time.  Originally you couldn’t include a nav element inside a footer, or a section. 

Now the spec has been changed to match the header element.

details and figure saved

Instead of using legend, which didn’t work, Jeremy suggested (although slightly tongue in cheek) to use dt for the title and dd for the body.  Ian Hickson agreed, and it’s in

Example:


 
 
Exhibit B. The Rough Copy trailer.


aside has better examples

The documentation has been updated to specify better examples of how the aside element can be used.

Better examples help us authors understand how it can be used.

Dropped Elements

The following elements have been dropped from the HTML5 spec (though bb and datagrid were some time ago, and datagrid has been postponed rather than dropped entirely):


dialog
bb
datagrid


Ch-ch-changes

We’ll be posting in more detail about some of these changes, and as further changes come out of the editing process we’ll no doubt keep you all up to date, either via our Twitter account (which you should follow) or feel free to let us know too!
Related Posts:
Legend not such a legend anymore
The section element
The figure & figcaption elements
dd-details wrong again
The Footer Element Update

September HTML5 spec changes originally appeared on HTML5 Doctor on September 17, 2009.

HTML5 Doctor » header

Avoiding common HTML5 mistakes

Don’t use section as a wrapper for styling

My super duper page

Only use header and hgroup when they’re required

Don’t wrap all lists of links in

Common mistakes with the figure element

Not every image is a figure

Your logo is not a figure

Figure can be more than an image

Don’t include unnecessary type attributes

Incorrect use of form attributes

Boolean attributes

Summary

Related Posts:

Your Questions #15

Wikipedia Infoboxes

Title

Sub Title

Title

Sub Title

Server-side validation

Immutable image with

Retrieving objects from

Custom tags

The role attribute, SEO, and

Headings

. However, if you’re splitting the article into sections, then you could use an

each time. See our article on the section element for more. Thanks, Tom

Got a question for us?

Related Posts:

Summary

–), you do not need an .

), you do not need an .

–), group them in an .

The `role` attribute, SEO, and

.

However, if you’re splitting the article into sections, then you could use an

each time. See our article on the section element for more.

Thanks, Tom

–
), you do not need an .

–
), group them in an .