You can still use div

Mike Robinson — Tue, 13 Jul 2010 13:30:37 +0000

“Sorry, can you say that again?”, I hear you ask. Certainly: you can still use

! Despite HTML5 bringing us new elements like

, and

, the

element still has its place. Let the HTML5 Doctor tell you why.

Status: Unchanged

In HTML 4, the

element was defined to be a generic element for structuring a page. Although you can allude to the nature of its content by assigning id and class attributes with meaningful names, a

has almost no semantic meaning. The HTML5 definitionis basically the same as in HTML 4:

The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.

W3C Specification

is literally a container for flow content*, a collection of (hopefully) more semantically marked-up content that may need to be grouped together. It lies at the opposite end of the semantic spectrum from the new HTML5 structural elements.

* For those who haven’t encountered this term before, flow content elements are the same as HTML 4’s block-level content elements.

vs semantic elements

The new semantic elements (

, and friends) justifiably capture a lot of

’s territory, but

still has a place in the HTML5 world. You should use

when there is no other more semantically appropriate element that suits your purpose. Its most common use will likely be for stylistic purposes — i.e., wrapping some semantically marked-up content in a CSS-styled container.

Ask yourself questions about your content: Is it part of the site’s navigation? Is the content secondary to its surrounding content? If this content were printed on a page with nothing else, would it make sense? You will need to evaluate your content carefully, thinking about what it is and pairing it with an appropriate element. I recommend taking a look at The Amazing HTML5 Doctor Easily Confused HTML5 Element Flowchart of Enlightenment to help you choose the right element for your flow content.

Example Uses

Below are a few examples of how you can still use

appropriately in your HTML5 sites.

Site Wrapper

While you can use the element as a “natural” wrapper for site content, many people like to use

as top-level container for styling the entire site. This is an appropriate use of

, as a site wrapper has no meaning or purpose other than to aid styling.


  
    
      My Happy Blog

Intro paragraph

If you want to style a particular block of content, like the intro to an article,

is a perfectly suitable element:


  Big announcement
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  
  Sed massa metus, molestie nec facilisis non, lobortis ac orci. Suspendisse porttitor laoreet mi, at laoreet dolor rhoncus non. Sed ut massa quis mi placerat iaculis non sit amet odio. Cras tempus urna vitae felis rutrum porta.
  Maecenas auctor lacus eget mauris tincidunt consectetur. Donec molestie malesuada ligula, sed feugiat massa consequat sit amet. Pellentesque orci metus, ultricies sit amet adipiscing eget, gravida fringilla dui. Vestibulum accumsan dui diam, eget venenatis urna. Sed eu lobortis justo. Aliquam erat volutpat. Aliquam erat volutpat.

The first two paragraphs aren’t really that different from the rest of the article, but by wrapping them in a

, they can be styled to capture the reader’s attention and draw them into the article. Of course, if you only want to style the first paragraph, you could use a CSS selector like h1 + p {} or article p:first-child {}. But if you want to style an article’s first paragraph only sometimes, or you need the style to work in older versions of Internet Explorer, or (as in this case) you want style more than one paragraph, a wrapper

is the way to go.

Other uses for

As previously stated, use of

will decline in favour of the new semantic elements. If you’re using lots of

s and only a few of the semantic elements in your HTML5 sites, then you’re really not taking advantage of what HTML5 has to offer.

That said, you may need to rely on

as you transition into the world of HTML5. For example, if many of your site’s visitors use Internet Explorer with JavaScript disabled, then you won’t be able to style the new elements for these users. A piece of advice we gave back in our article on how to use HTML5 in your client work right now was to use

with classes named after the new semantic elements, getting you to think about how you would use the new semantic elements without actually using them.


  
    My blog post
    An example using divs with classes instead of the new elements.
  
  



  
    My blog post
    The same article but switched to the new elements.

This makes it simple to switch to the new elements when it becomes practical (think “search and replace”).

Recap

You will certainly use

less often in HTML5 than you did in HTML 4, but it’s still a valuable element to have in your toolkit. Sure, it’ll be picked last for the team because everyone else is better, but it’ll be the best damn generic container element there is!*

Look at the more semantically valuable elements and consider whether your content would benefit from what they offer. Need help deciding? Take a look at some of these articles right here on HTML5 Doctor:

For more, check our article archive. And if all else fails, use a

* As it should be, it’s the only one apart from . That said, if your content is just text, perhaps the oft-overlooked

would be more appropriate.

Share and Save:

You can still use div originally appeared on HTML5 Doctor on July 13, 2010.

The dl element

Mike Robinson — Thu, 03 Jun 2010 14:00:10 +0000

The

element existed in HTML 4, but it’s been repurposed in HTML5. Let the Doctor explain what’s changed and how it can be used.

It’s all in the description

In HTML 4,

was considered a “definition list”, containing groups of terms and their definitions. The terms and definitions were a many-to-many relationship: one or more terms to one or more definitions. The element was often misunderstood and therefore misused or not used at all in favour of more widely used and (perhaps) less semantic markup.

To address these issues,

HTMLdescription list

The dl element represents an association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more names (dt elements) followed by one or more values (dd elements). Within a single dl element, there should not be more than one dt element for each name.

It maintains the many-to-many relationship between names and values. These groupings use

to represent the term or name and

for the description. Also note the last line of the quote, stating that a name should not be used more than once within a single

Example Uses

I’ve put together a couple of appropriate uses of

to get your creative juices flowing.

Glossary

can be used to mark-up a glossary of terms, although you must remember to use to indicate that the word is defined here:


  The article element
  An independent piece of content, one suitable for putting in an
    article element, is content that makes sense on it’s own. This yardstick
    is up to your interpretation, but an easy smell test is would this make sense
    in an RSS feed? Of course weblog articles and static pages would make sense
    in a feed reader, and some sites have weblog comment feeds..
  ...
  
    Glossary
    
      RSS
      An XML format for aggregating information from websites whose
        content is frequently updated.
      Weblog
      Contraction of the term "web log", a weblog is a
        website that is periodically updated, like a journal

The example content is from our recent post on the article element. In the example, I plucked out the terms “RSS” and “weblog” and defined them in a handy glossary. Since this information is supplementary to the article, the glossary has been placed in an

Metadata

) to one key (
). Multiple keys ( ) to a single value As mentioned above, a may map many keys ( ) to many values ( ). This means that one term might have multiple descriptions, or there may be multiple terms that mean the same thing. Related s should follow each other immediately before their descriptive . colour color The visual result of light in their emission, transmission and/or reflection. This perception is determined by the hue, brightness and saturation of the light at a specific point. Here I have indicated that there are two different spellings of “colour” and grouped these terms to match them with the same description. It is not appropriate, however, to use the same key multiple times within a single . You can’t define “car” as one thing at the start of a and then define it again at the end of that same . If you have multiple descriptions for a single term, you should list both s directly under the same . Chips Strips of potato usually deep fried in fat. Commonly referred to as "french fries". A small fragment that has been broken off from a larger body (e.g. stone). What it should not be used for Dialogue was a suggested use for in HTML 4, which was widely debated and often considered inappropriate. This application of the element is no longer recommended in HTML5, and the new definition of the element does indeed back this up. When marking up a conversation, you’re not describing the speaker, but rather stating what they said. With the demise of , conversations have no specific markup element. Instead, the specification makes recommendations of how to mark up conversations. Summary The changes to are fairly minor, but the new definition should clear up confusion and enable developers to use it more appropriately. You can use this element to represent key-value pairs semantically and couple it with other elements like and to give context to this information. Where do you see yourself using in HTML5? Perhaps details about a downloadable file? Or are you going to give your more technical blog articles a glossary? Let us know in the comments! Related Posts: The article element A little more conversation with dialog HTML5 Doctor Glossary Aside Revisited Understanding aside Share and Save: The dl element originally appeared on HTML5 Doctor on June 3, 2010.
) to a single value

HTML5 Doctor Speaking and Training Appearances

Mike Robinson — Fri, 16 Apr 2010 13:30:40 +0000

Even after slaving away at the web’s operating table, the HTML5 Doctors still find time to speak about HTML5 at industry events. We’d like to make sure you don’t miss out on future chances to see the doctors in action.

For your convenience, we’ve put together a list of events where we’ll be speaking and even the ones we’re simply attending. Read on for some of our upcoming HTML5 appearances.

We’ll continue to maintain this page with new listings, so check back often. Otherwise you might miss us!

Upcoming Talks

Here are some of the HTML5 talks we will be giving at various events. Make sure you mark them down in your calendars!

In Attendance

Of course, we aren’t always talking. We still attend events to listen to talks ourselves. If you see us there, come and say hi.

Designing for iPad; our experiences so far

21 Jul – Oli Studholme – Apple Ginza

Build

10 Nov – Jack Osborne – Waterfront Studio, Belfast

Run an event? Get in touch!

If you organise an event or workshop and would like us to speak (or you’d just like to see us there), then we’d love to hear from you.

Share and Save:

HTML5 Doctor Speaking and Training Appearances originally appeared on HTML5 Doctor on April 16, 2010.

Aside Revisited

Mike Robinson — Wed, 28 Oct 2009 14:23:57 +0000

Since the HTML5 specification is not yet final, we can expect changes to improve on the good bits and cut out the bad bits. aside — a misunderstood good bit — has now been tweaked based on feedback from the web development community. In this article, we’ll take a look at what’s changed.

Aside redefined

When we previously discussed aside in “Understanding Aside“, its definition suggested that it should be used for content tangentially related to the content surrounding it, such as related reading links and glossaries. It did not appear to be an appropriate element for holding secondary content related to the site as a whole, typically known as a “sidebar”.

From the comments here and elsewhere, you can see this definition was not accepted by developers. The spec writers listened, and aside is now acceptable for secondary content when not nested within an article element.

Examples of `aside` in two different contexts

With the new definition of aside, it’s crucial to remain aware of its context. When used within an article element, the contents should be specifically related to that article (e.g., a glossary). When used outside of an article element, the contents should be related to the site (e.g., a blogroll, groups of additional navigation, and even advertising if that content is related to the page).

The two uses of aside can be best illustrated with an example:


  
    My Blog
  
  
    My Blog Post
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
      
      Glossary
      
        Lorem
        ipsum dolor sit amet
      
    
  
  
    
    Blogroll
    
      My Friend
      My Other Friend
      My Best Friend

Conclusion

The aside element can now represent secondary content when used outside of an article. Keep in mind that aside — and, more generally, secondary content — does not necessarily mean “sidebar”. The style of the content should not dictate the use of the element. For content that is not the primary focus of an article (or page) but is still related to the article (or page), aside is what you need, regardless of its visual design.

Share and Save:

Aside Revisited originally appeared on HTML5 Doctor on October 28, 2009.

Draw attention with mark

Mike Robinson — Tue, 18 Aug 2009 13:10:43 +0000

Other than allowing Marks everywhere to rejoice that they have an element that shares their name, HTML 5 introduces mark as a way to highlight text to indicate its relevance to the user. Read on as we tally up the uses of this new element.

As always, the defining text passed down to us in the specification:

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader’s attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user’s current activity.

Both uses are aimed at drawing attention to what is relevant to the user. mark can provide a very useful aid to the user with appropriate styling.

Examples

Search Results

A prime example of how to use mark today is to highlight the term a user has searched for. Many search engines already do this using other methods to mark the text, which shows the need for this new element.

716,000,000 search results for the query "HTML 5"

  
    HTML 5 - Wikipedia, the free encyclopedia
    HTML 5 is the next major revision of HTML ("hypertext markup language"), the core markup language of the World Wide Web. The WHATWG started work on the ... Read more
  
  
    HTML 5
    A vocabulary and associated APIs for HTML and XHTML. Editor's Draft 16 August 2009. Latest Published Version: http://www.w3.org/TR/html5/; Latest Editor's ... Read more
  
  
    HTML 5
    Multiple-page version: http://whatwg.org/html5; One-page version: http://www.whatwg.org/specs/web-apps/current-work/; PDF print versions: ... Read more
  
  
    HTML5 Gallery | A showcase of sites using HTML 5 markup
    A showcase of sites using html5 markup, with twin primary aims to help web designers and developers of how to implement html5 into their sites now, ... Read more
  


  
    1
    2
    3
    4
    5
    ...

View a live example

Any instance of “HTML 5″, and even simply “HTML”, has been marked as relevant to the user’s search. This can help the user see how relevant their search results are, so they can pick the best results for what they need. When implementing this in a language like PHP, you can use functions like str_replace() or some clever regular expressions to find the search term within your output and wrap mark around each instance.

Quotes

In all the brilliant things that have been said, there is always a chance that someone will come back to scrutinize parts in the future. These pieces of text or speech may not have had any importance when they were original formed, and hence not been given such emphasis, but now have attracted particular interest by a another party. mark can be used in quotations to highlight such text.

Mike once said:
Google won't last, they will fail at search and advertising as nothing will topple Yahoo.
Of course, we now know he was wrong. Google has not failed, they excelled in search and online advertising, making them a very profitable company.

Here I have quoted myself, highlighting where I was wrong in my original statement and then immediately correcting this error in the following paragraph.

Differences from strong and em

Previously, you may have used em and strong for adding emphasis or importance, respectively, to portions of text. mark differs from these two as it is used purely for highlighting the relevance of a piece of text to the user and/or page’s content. In the past you may have used em and strong for this purpose, which was arguably valid at the time due to the lack of a better element, but the introduction of mark simply means their use will be more strict.

Use strong when you need to indicate the importance of a piece of text, such as an error or warning message, and em should be for adding emphasis to text, stressing words to adapt the meaning of a sentence.

Final Thoughts

The addition of mark to HTML is welcome, preventing stretching the definitions of strong and em too thin. There are many practical uses of mark in the world today, particularly for search and educational articles like tutorials. Put your highlighter pens down and start using mark to highlight relevant text (it’s better for your screen!).

Disclaimer: I have nothing against Google, this was merely a fictitious example vaguely related to the use of mark in search. Long live Google?

Share and Save:

Draw attention with mark originally appeared on HTML5 Doctor on August 18, 2009.

A little more conversation with dialog

Mike Robinson — Wed, 12 Aug 2009 13:57:12 +0000

Less action, more conversation. That’s how that Elvis song went, right? OK, perhaps not. Regardless, the new dialog element introduced in HTML 5 is all about marking up the conversation, and it uses a couple of elements you may have already heard of. Sure, it’s a little less action than something like audio, but it is still a useful element to semantically mark up many forms of dialogue.

Defining dialog

The HTML 5 specification defines dialog as follows:

The dialog element represents a conversation, meeting minutes, a chat transcript, a dialog in a screenplay, an instant message log, or some other construct in which different players take turns in discourse.

That’s a lot of different types of dialogue that can be marked up. A dialog element contains the dt element for a speaker’s name, and dd for what they said. That’s right, dialog borrows two elements from dl to pair up a speaker and what they say. The definition of a dl itself has changed in HTML 5 to become an association list, pairing names (dt) with values (dd). dialog uses this in a similar way, pairing a name of a speaker with whatever they said.

This means that the dt is the source (speaker) of what is within the following dd, and the dd contains a quotation from that source. Therefore, dialog does not require the use of cite, blockquote or q. The only time a q would be appropriate within dialog would be if what one person said contained a quotation from someone else. It is also possible to use p within a dd, should you need to mark-up large responses as paragraphs.

Also, despite the fact both dialog and dl share dt and dd, a dialogue should never be marked up with a dl. However, appropriate uses of dl is beyond the scope of this article and will be revisited in a separate article.

Enough talk, let’s get practical

Marked Up Humour

My first example is very straight forward. Using dialog, I will mark up a hilarious “Knock, Knock” joke.


  Sam
  Knock, Knock.
  Eric
  Who's there?
  Sam
  Justin.
  Eric
  Justin who?
  Sam
  Justin time for dinner!

Note that two people are in this conversation, Sam and Eric. Their names are marked up with dt and what they said is placed in dd. Wrap it all up in a the fresh dialog, and you have a semantically marked up conversation!

Once your sides have stopped splitting, I’d like to direct you to something a little more complex: how Twitter can take advantage of dialog.

A Twitter Conversation

Twitter is a prime example of where dialog can be used in the real world. When a user posts a tweet, other users can reply by starting their tweet with @username, where username is whoever they are responding to.


  @akamike, 13 minutes ago
  Where is a good place to eat in town?
  @brucel, 11 minutes ago
  @akamike Have your tried The Swine's Flu pub lunches?
  @Rich_Clark, 11 minutes ago
  @akamike If you like seafood, try the restaurants at the waterfront
  @jackosborne, 9 minutes ago
  @akamike What @brucel said, or there are lots of good bakeries on the high street.
  @spambot148, 4 minutes ago
  @akamike Gain 1000 followers in 5 minutes!

View a live example

Here, I have marked up an example of a conversation on Twitter, with users replying to the original speakers tweet. Once again, each person has had their name marked up in a dt but also uses the new time element to define the time of the tweet. In the new definition of dt, there is an example of using time this. Finally, the content of each tweet is placed in a dd. This shows how dialog could be used today in even some of the most popular services on the web.

Wrapping up

dialog is quite an easy element to grasp, and you’ll quickly find yourself marking up conversations, chat logs and more with this new element. As seen with the Twitter example, there is scope to add extra value to dialogue used in the real world. Now, go forth and have conversations knowing that you can easily mark them up in HTML 5!

Share and Save:

A little more conversation with dialog originally appeared on HTML5 Doctor on August 12, 2009.

Understanding aside

Mike Robinson — Fri, 19 Jun 2009 13:00:21 +0000

HTML 5 offers a new element to mark additional information that can enhance an article but isn’t necessarily key to understanding it. However, in the interpretation of

there lies confusion as to how it can be used, and with that there is demand for the Doctor to step up and clear the air. In this article I will look at what

was created for, including sample uses and how not to use this useful, misunderstood element.

First, a look at how the HTML 5 specification defines

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

What can often trip-up someone reading the specification is the use of the word “sidebar”. I will go into detail about this later in the article, for now you should be aware that what is said there might not quite mean what you first think. Content within an

should be stand-alone information that is related to the article in context. If your

content meets this requirement, then you have a useful element to not only semantically wrap that content but to even hook CSS styles on.

How strict should this relationship be? Very. Good

content examples include pull-quotes, a glossary or even related links.

Example Uses

As suggested in the specification, a pull-quote is an excellent example of a piece of content that is separate from the main article body but still related. Points of interest highlighted.


    
        Lorem Ipsum Dolor Sit Amets
    
    Aliquam erat volutpat. Vestibulum eleifend pellentesque urna, at
    sodales est faucibus sit amet. Praesent in mi dui. Aliquam sed
    bibendum nisl. Mauris pharetra enim sit amet ipsum dictum placerat. Sed
    lacinia pulvinar iaculis. Nam sit amet hendrerit purus. Sed a urna
    laoreet lorem pulvinar fermentum. Aenean vel luctus libero. Ut tincidunt
    metus sagittis ante viverra feugiat.
    
        Mauris pharetra enim sit amet ipsum dictum placerat.
    
    Nulla quis lacus non quam luctus vestibulum. Pellentesque imperdiet
    risus gravida ante consectetur fermentum. Vivamus et est nec risus volutpat
    elementum. Ut faucibus, lectus consectetur volutpat dapibus, quam diam
    luctus enim, vitae mollis enim purus non ante.

For more about the

element see Richard’s article, “The

Element.

On a styled web page or, more common, in a printed article this would be represented visually as a highlighted quote to the side of the main article. This

is related to the content but does not need to be part of the article body as it can be understood without the extra information, or in this case without the duplicate quote.

Another example would be a glossary of terminologies used in an article:


    
        Web Technologies
    
    Curabitur dignissim lorem a CSS diam posuere tempor. Nam hendrerit,
    eros vel condimentum tempor, ipsum justo cursus justo, quis vestibulum
    turpis turpis sit amet tellus. Quisque quis PHP magna eget ipsum faucibus
    bibendum at non diam. Sed sapien est, cursus ac ullamcorper id, egestas vel
    urna JavaScript. Nullam aliquam dolor vitae quam pharetra auctor.
    
        
            CSS
            A set of standards for styling documents presented on the
            World Wide Web.
            PHP
            A server-side scripting language suited to dynamic HTML document
            generation for the web.
            JavaScript
            A client-side scripting language used for manipulating HTML documents
            within a browser.

Incorrect use of

It is easy to confuse this element for something it isn’t, and as mentioned earlier the definition of

can trip-up a few developers. The most common misconception of how this element should be used is for the standard sidebar. While there is usually a degree of relation between sidebar content and the content in an article, it is not enough to be considered fit for an

. Navigation, ads, search boxes, blogrolls and so on are not directly related to the article and therefore do not justify the use of an

In the definition of

it is key to note that it refers to sidebars in printed media, such as a magazine or leaflet. A “sidebar” in a magazine might contain additional notes on the article in context, translating this to HTML 5 would consider this an

. If the printed article on PHP had an ad for “Superior, Cheap, Web Hosting” as a sidebar, this would not be classified as an

. In such cases, look at other elements for more semantic mark-up.

Closing Thoughts

Like any HTML element, when used correctly the

element can be very useful in semantically marking-up page content. An

can be used to enhance an article with additional information, or highlighting parts that the reader may find interesting. Asides are stand-alone, non-essential as part of an article but when used correctly it can be an extra level of information for your content. Don’t try to force content into an

, if it’s not tangentially related to the article then it shouldn’t be there. HTML 5 offers many new elements to mark-up your web pages, use them wisely.

Share and Save:

Understanding aside originally appeared on HTML5 Doctor on June 19, 2009.

HTML5 Doctor » Mike Robinson

You can still use div

Example Uses

Site Wrapper

Intro paragraph

Big announcement

Other uses for

My blog post

Recap

Related Posts:

Example Uses

Glossary

The article element

What it should not be used for

Summary

My Blog Post

HTML 5 - Wikipedia, the free encyclopedia

HTML 5

HTML 5

HTML5 Gallery | A showcase of sites using HTML 5 markup