HTML5 Doctor » div http://html5doctor.com helping you implement HTML5 today Wed, 16 May 2012 11:31:21 +0000 en hourly 1 http://wordpress.org/?v= Your Questions Answered #12 http://html5doctor.com/your-questions-12/ http://html5doctor.com/your-questions-12/#comments Thu, 12 Aug 2010 13:45:15 +0000 Richard Clark http://html5doctor.com/?p=2369 The latest round of HTML5 prescriptions is in! This week, we'll briefly cover the HTML5 vs Flash debate, whether to use <body> or <div>, HTML5 rich text editors, and the HTML5 charset and doctype.

]]> Doctor treating a patient illustration The latest round of HTML5 prescriptions is in! This week, we’ll briefly cover the HTML5 vs Flash debate, whether to use <body> or <div>, HTML5 rich text editors, and the HTML5 charset and doctype.

HTML5 vs Flash

Yaniv opens the great debate:

Hi, why is it said all the time that HTML 5 is going to replace Flash and in the near future flash will not be used again?

This is over-simplifying.

Historically, Flash has been used especially for games, video, and rich interaction because it wasn’t possible to do these things natively (i.e., without using a plugin). HTML5 introduces <canvas> and a native <video> element, and recently JavaScript libraries like jQuery make it much easier to create rich interaction. An additional benefit of Flash was its ubiquity, but thanks to the iPhone and now iPad, this isn’t true anymore.

I expect the usage of Flash to decrease as browsers support web standards, but Flash will still be used for a while to come. The enormous number of pages using Flash aren’t going to vanish (or change) overnight.

Peace – Oli

Body or div?

Erik asked:

Hi there, I have noticed that several implementations of HTML5 (including this blog), set a width of the body rather than using a wrapping div-tag to create a centered layout.

It somehow feels awkward to set a width of the body, but is that the actual, proper way of doing it? I understand that a wrapping div is non-semantic, but how would one deal with background images etc, if the body has a width set to it? I’m guessing it would work to set background images on the html-tag, as well, though.

If you need a <div> for styling purposes, that’s perfectly fine. You could also achieve the same effect by doing as you suggest and setting a background on the <html> element. For more, take a look at our recent article You can still use <div>.

If you need any help on using <body> as a wrapper, check out Kroc Camen’s How to Centre and Layout Pages Without a Wrapper.

Peace – Oli

Rich text editor

Dave asked:

We use our own bespoke CMS and part of the admin has a Javascript based rich-text editor (ck editor i think)for editing the main content of the pages.

The problem we’ve come across is that I’m building the site in HTML5 and it appears the text editor doesn’t recognise the new HTML5 tags (section, aside, article etc.) Do you know of any text editor that can handle HTML5 as I can’t seem to find anything in terms of Javascript based components or any other alternative. Many Thanks

Generally, JavaScript-based WYSIWYG editors are complete shite (excuse my British ;-). Unfortunately, I don’t think this is gonna change soon because the established players were developed in the bad old days and have the code baggage to prove it. Perhaps with IE9 someone will cut the support anchor on older versions of IE (Safari, etc) and actually do a decent one, but don’t hold your breath :-)

You can customise most editors, however, and possibly even add your own elements. As a start, here’s an article I wrote on hacking FCKEditor into some semblance of shape for MT4.

Beyond that, the editor’s documentation and forums are the place to check.

In addition, migrating to HTML5 is not all-or-nothing. You can get benefits from just the doctype (better validator, more detailed spec). Also, <div> is still a perfectly fine HTML5 element. Should new structural elements overwhelm the editor, you can always do something like <div class="article"> and <div class="nav"> (so-called HTML4.5 ;-). This way you’re not using new elements, but you’re still benefitting from thinking in HTML5 semantics, and should you want to change down the road, you’ll already be half way there.

Peace – Oli

Recommended charset for HTML5

Guy asked:

I have always used ISO-8859-1 as things like £ work better (being UK based)

But I have noticed a strong tendency for UTF-8 when it comes to HTML5. Is there a reason for this? what do you recommend?

Many thanks, Guy

The HTML5 spec says use UTF-8: “Authors are encouraged to use UTF-8”. The reason is UTF-8 is a superset of ISO-8859-1, and can represent many more characters. To get a £ symbol, you can write &#163; (or &pound;), but with UTF-8, just writing “£” is fine.

In fact, using UTF-8 in HTML5, we only need to escape & and < (and maybe ‘,”, and > depending on context — e.g., alt text). All other UTF-8 characters can be used as-is (e.g., “” not &ldquo;&rdquo;). Just look at the source for this paragraph!

Peace – Oli

Mobile doctype

Franceso asked:

Hello guys! I was wondering, since I found no reference at all online… does the HTML5 doctype cause problems on mobile browsers (besides the iPhone/iPod/iPad. I tested it and it works like a charm)?

I don’t mean “advanced” HTML5 properties like video or even article and other semantic tags. Just the simple HTML5 doctype, that causes no problems whatsoever with classic desktop browsers. Because I tried it, and it does seem to cause layout problems on Symbian (the only other browser I could test it).

Any suggestions? Because I do use the video tag in there (to degrade gracefully in all mobile browsers but the iPhone’s, I’d hope), but I hate using that with the classic mobile XHTML doctype declaration. Thanks!

The HTML5 doctype was chosen to be backward compatible with current browsers, and for desktop I think that’s completely true. I doubt many mobile browsers were tested, though. Anything not running Opera Mini or Mobile Webkit is most probably still partying like it’s 1999, and YMMV. I’d recommend testing thoroughly.

By the way, anything that doesn’t support the HTML5 doctype definitely will not support <video>. Hope that helps.

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.

Your Questions Answered #12 originally appeared on HTML5 Doctor on August 12, 2010.

]]> http://html5doctor.com/your-questions-12/feed/ 2 You can still use div http://html5doctor.com/you-can-still-use-div/ http://html5doctor.com/you-can-still-use-div/#comments Tue, 13 Jul 2010 13:30:37 +0000 Mike Robinson http://html5doctor.com/?p=1853 “Sorry, can you say that again?”, I hear you ask. Certainly: you can still use <div>! Despite HTML5 bringing us new elements like <article>, <section>, and <aside>, the <div> element still has its place. Let the HTML5 Doctor tell you why.

Status: Unchanged

In HTML 4, the <div> 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 <div> 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.

<div> 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.

<div> vs semantic elements

The new semantic elements (<article>, <section>, and friends) justifiably capture a lot of <div>‘s territory, but <div> still has a place in the HTML5 world. You should use <div> 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 <div> appropriately in your HTML5 sites.

Site Wrapper

While you can use the <body> element as a “natural” wrapper for site content, many people like to use <div> as top-level container for styling the entire site. This is an appropriate use of <div>, as a site wrapper has no meaning or purpose other than to aid styling.

<body>
  <div id="wrapper">
    <header>
      <h1>My Happy Blog</h1>
      <nav>
        <!-- ... -->
      </nav>
    </header>

    <!-- ... rest of site content ... -->
  </div>
</body>

Intro paragraph

If you want to style a particular block of content, like the intro to an article, <div> is a perfectly suitable element:

<article>
  <h1>Big announcement</h1>
  <div class="intro">
    <p>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.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
  <p>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.</p>
  <p>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.</p>
</article>

The first two paragraphs aren’t really that different from the rest of the article, but by wrapping them in a <div>, 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 <div> is the way to go.

Other uses for <div>

As previously stated, use of <div> will decline in favour of the new semantic elements. If you’re using lots of <div>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 <div> 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 <div> 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.

<div class="article">
  <div class="header">
    <h1>My blog post</h1>
    <p>An example using divs with classes instead of the new elements.</p>
  </div>
  <!-- ... content ... -->
</div>

<article>
  <header>
    <h1>My blog post</h1>
    <p>The same article but switched to the new elements.</p>
  </header>
  <!-- ... content ... -->
</article>

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

Recap

You will certainly use <div> 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 <div>!

* As it should be, it’s the only one apart from <span>. That said, if your content is just text, perhaps the oft-overlooked <p> would be more appropriate.

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

]]> http://html5doctor.com/you-can-still-use-div/feed/ 43 Your Questions Answered #7 http://html5doctor.com/your-questions-answered-7/ http://html5doctor.com/your-questions-answered-7/#comments Tue, 20 Apr 2010 14:10:51 +0000 Richard Clark http://html5doctor.com/?p=1584 HTML5. In this article, we'll be covering a host of topics including AJAX, the eternal question of div or section, how to markup multiple blocks of content in a sidebar and using header with hgroup.]]> Doctor treating a patient illustration Here we are again with another round of patient questions about HTML5. In this article, we’ll be covering AJAX, the eternal question of <div> or <section>, our old friend Internet Explorer, how to mark up multiple blocks of content in a sidebar, and using <header> with <hgroup>.

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 <input type="email"> 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 <canvas>, 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

<div> or <section>?

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 <div>s or <span>s where another, more precise element would fit the bill. But for grouping arbitrary content, <div>s and <span>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 <div>s might be <section>s or maybe <nav> elements though, depending on their content. I suggest you read our article (and the comments) on the <aside> element.

Thanks, Tom

Header with <hgroup>

Diego asked:

Hi,

This structure is right?

<section id="choose-tip">
   <header>
       <hgroup>
           <h1>Foo Bar</h1>
           <h2>Baz Bat Qux</h2>
       </hgroup>
   </header>
   <p>lorem ipsum</p>
</section>

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 <header> within your <section> or an <hgroup> within your <header>. Similarly, you don’t have to use a <header> around your <hgroup>.

To summarise, the best solution (if you don’t require the <h2> 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.

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

]]> http://html5doctor.com/your-questions-answered-7/feed/ 14