http://inspire.twgg.org/c/programming/html-css/28-you-need-to-know-the-new-html5-features-and-technology.html


Note – a couple times each week, this list will be updated with new tips. Eventually, it’ll be an insanely helpful resource.

This industry moves fast — really fast! If you’re not careful, you’ll be left in its dust. So, if you’re feeling a bit overwhelmed with the coming changes/updates in HTML5, use this as a primer of the things you must know. 

1. New Doctype

Still using that pesky, impossible-to-memorize XHTML doctype?

view plaincopy to clipboardprint?
  1. nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

If so, why? Switch to the new HTML5 doctype. You’ll live longer — as Douglas Quaid might say.

view plaincopy to clipboardprint?
  1. nbsp;html>  

In fact, did you know that it truthfully isn’t even really necessary for HTML5? However, it’s used for current, and older browsers that require a specified doctype. Browsers that do not understand this doctype will simply render the contained markup in standards mode. So, without worry, feel free to throw caution to the wind, and embrace the new HTML5 doctype.

2. The Figure Element

Consider the following mark-up for an image:

view plaincopy to clipboardprint?
  1. img src="path/to/image" alt="About image" />  
  2. p>Image of Mars. p>  

There unfortunately isn’t any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the

element. When combined with the
element, we can now semantically associate captions with their image counterparts.

view plaincopy to clipboardprint?
  1. figure>  
  2.     img src="path/to/image" alt="About image" />  
  3.     figcaption>  
  4.         p>This is an image of something interesting. p>  
  5.     figcaption>  
  6. figure>  

3. Redefined

Not long ago, I utilized the element to create subheadings that are closely related to the logo. It’s a useful presentational element; however, now, that would be an incorrect usage. The small element has been redefined, more appropriately, to refer to small print. Imagine a copyright statement in the footer of your site; according to the new HTML5 definition of this element; the would be the correct wrapper for this information.

The small element now refers to “small print.”

4. No More Types for Scripts and Links

You possibly still add the type attribute to your link and script tags.

view plaincopy to clipboardprint?
  1. link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />  
  2. script type="text/javascript" src="path/to/script.js">script>  

This is no longer necessary. It’s implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together.

view plaincopy to clipboardprint?
  1. link rel="stylesheet" href="path/to/stylesheet.css" />  
  2. script src="path/to/script.js">script>  

5. To Quote or Not to Quote.

…That is the question. Remember, HTML5 is not XHTML. You don’t have to wrap your attributes in quotation marks if you don’t want to you. You don’t have to close your elements. With that said, there’s nothing wrong with doing so, if it makes you feel more comfortable. I find that this is true for myself.

view plaincopy to clipboardprint?
  1. p class=myClass id=someId> Start the reactor.  

Make up your own mind on this one. If you prefer a more structured document, by all means, stick with the quotes.

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 天秤女~佳佳 的頭像
    天秤女~佳佳

    佳佳的窩

    天秤女~佳佳 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄