Web Design Tutorials: Photoshop, HTML, Flash, PHP

HTML Tutorial – 28 HTML5 Features, Tips, and Techniques you Must Know

Posted on Oct 4th, 2011 in HTML Tutorials | 0 comments

1. New Doctype

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

  1. <!DOCTYPE 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.

  1. <!DOCTYPE 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:

  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 <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts.

  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. <small> Redefined

Not long ago, I utilized the <small> 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 <small> 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.

  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.

  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.

  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.

6. Make your Content Editable

Content Editable

The new browsers have a nifty new attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.

  1. <!DOCTYPE html>
  3. <html lang=”en”>
  4. <head>
  5.     <meta charset=”utf-8″>
  6.     <title>untitled</title>
  7. </head>
  8. <body>
  9.     <h2> To-Do List </h2>
  10.      <ul contenteditable=”true”>
  11.         <li> Break mechanical cab driver. </li>
  12.         <li> Drive to abandoned factory
  13.         <li> Watch video of self </li>
  14.      </ul>
  15. </body>
  16. </html>

Or, as we learned in the previous tip, we could write it as:

  1. <ul contenteditable=true>

7. Email Inputs

If we apply a type of “email” to form inputs, we can instruct the browser to only allow strings that conform to a valid email address structure. That’s right; built-in form validation will soon be here! We can’t 100% rely on this just yet, for obvious reasons. In older browsers that do not understand this “email” type, they’ll simply fall back to a regular textbox.

  1. <!DOCTYPE html>
  3. <html lang=”en”>
  4. <head>
  5.     <meta charset=”utf-8″>
  6.     <title>untitled</title>
  7. </head>
  8. <body>
  9.     <form action=”" method=”get”>
  10.         <label for=”email”>Email:</label>
  11.         <input id=”email” name=”email” type=”email” />
  13.         <button type=”submit”> Submit Form </button>
  14.     </form>
  15. </body>
  16. </html>
Email Validation

At this time, we cannot depend on browser validation. A server/client side solution must still be implemented.

It should also be noted that all the current browsers are a bit wonky when it comes to what elements and attributes they do and don’t support. For example, Opera seems to support email validation, just as long as the name attribute is specified. However, it does not support the placeholder attribute, which we’ll learn about in the next tip. Bottom line, don’t depend on this form of validation just yet…but you can still use it!

8. Placeholders

Before, we had to utilize a bit of JavaScript to create placeholders for textboxes. Sure, you can initially set the value attribute how you see fit, but, as soon as the user deletes that text and clicks away, the input will be left blank again. The placeholder attribute remedies this.

  1. <input name=”email” type=”email” placeholder=”doug@givethesepeopleair.com” />

Again, support is shady at best across browsers, however, this will continue to improve with every new release. Besides, if the browser, like Firefox and Opera, don’t currently support the placeholder attribute, no harm done.

Validation

21. Detect Support for Attributes

What good are these attributes if we have no way of determining whether the browser recognizes them? Well, good point; but there are several ways to figure this out. We’ll discuss two. The first option is to utilize the excellent Modernizr library. Alternatively, we can create and dissect these elements to determine what the browsers are capable of. For instance, in our previous example, if we want to determine if the browser can implement the pattern attribute, we could add a bit of JavaScript to our page:

  1. alert( ’pattern’ in document.createElement(‘input’) ) // boolean;

In fact, this is a popular method of determining browser compatibility. The jQuery library utilizes this trick. Above, we’re creating a new input element, and determining whether the pattern attribute is recognized within. If it is, the browser supports this functionality. Otherwise, it of course does not.

  1. <script>
  2. if (!’pattern’ in document.createElement(‘input’) ) {
  3.     // do client/server side validation
  4. }
  5. </script>

Keep in mind that this relies on JavaScript!

22. Mark Element

Think of the <mark> element as a highlighter. A string wrapped within this tag should be relevant to the current actions of the user. For example, if I searched for “Open your Mind” on some blog, I could then utilize some JavaScript to wrap each occurrence of this string within <mark> tags.

  1. <h3> Search Results </h3>
  2. <p> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </p>

23. When to Use a <div>

Some of us initially questioned when we should use plain-ole divs. Now that we have access to headers, articles, sections, and footers, is there ever a time to use a…div? Absolutely.

Divs should be utilized when there’s no better element for the job.

For example, if you find that you need to wrap a block of code within a wrapper element specifically for the purpose of positioning the content, a <div> makes perfect sense. However, if you’re instead wrapping a new blog post, or, perhaps, a list of links in your footer, consider using the <article> and <nav> elements, respectively. They’re more semantic.

For more, visit: net.tutsplus.com

you may also like:

Leave a Reply

Powered by WordPress | Designed by Elegant Themes