HTML5 Semantics, Structure and Forms   5 comments

The new semantic tags and structure that form part of HTML5  specification are the biggest new features that’s fully ready to be used regardless of your visitor’s browser. The semantics are important for better search engine optimization, more accessible content, easier to understand structure and improved maintainability.

Semantics is the study of language meaning. In HTML the  language meaning relates to the tags we use to mark-up our content. the <p> tag means that the marked-up content is a paragraph.

HTML has a limited number of tags. As designers we tend to use <div> to mark-up navigation menus,  sidebar, page header and so on. So in HTML5, rather than create a header using the code <div id=”header”></div>, you can now use the semantic <header> tag.  Similarly, tags have been introduced for <footer>, <aside>, <article>, <section> and <nav>.

From a  search engine optimization point of view, having universal tags that describe content is a big plus; using these tags helps search spiders to determine the most important content on the page and index accordingly. Using a semantic approach to you code also helps with screen-readers, allowing disabled visitors to get to your content more easily.

HTML5  forms

One of the challenges associated with designing web forms is helping the use to complete the form correctly. Dates have to be checked to ensure they are in the correct format, email addresses need to be validated and so on. Each time a form is deployed , therefore, we are compelled to use client or server-side validation , writing own routines to provide date picker, validate input etc.

HTML5 solves these problems with the introduction of new input types, browser- native user controls and input validation.  The new options use the same core tag that you are familiar with, <input>, but add content specific features. Examples include the email input, number, tel, date and url. Crucially, because <input> remains the primary tag, older browsers will simply ignore the new type declarations and fall back to type=”text”, allowing these enhancements to degrade gracefully.

The syntax for new input options is the same. Rather than use the code <input type=”text” name=”email”> you can now use <input type=”email” name=”email”>. In addition, there are some new attributes and CSS pseudo classes that allow you to make the most of native browser controls and validation. The required attribute will tell an HTNL5 ready browser to validate and require a field, while the CSS invalid pseudo class allows styling to be used to provide visual feedback to the user without the need for any external scripting at all. Elsewhere, the placeholder attribute allows you to specify some example content that demonstrates the type of input you’re expecting from the user. This will typically render as light grey text inside the form field which disappears once the field gains focus on the page.

Older browsers will simply fall back to treating each of the new types as standard text field, and will totally ignore any attributes they do not recognize.  For the time being you will need to provide your own validation.

Advertisements

5 responses to “HTML5 Semantics, Structure and Forms

Subscribe to comments with RSS.

  1. Useful information. Hope to view more beneficial posts down the road.

  2. interesting and informative blog thanks a lot for all the information provided. lista de emails lista de emails lista de emails lista de emails lista de emails

  3. Really glad you wrote all this.

  4. I have taken notice that in cameras, special devices help to target automatically. These sensors associated with some camcorders change in contrast, while others utilize a beam involving infra-red (IR) light, especially in low lighting. Higher specs cameras oftentimes use a mix of both programs and probably have Face Priority AF where the digicam can ‘See’ a new face while keeping your focus only upon that. Thanks for sharing your notions on this blog site.

  5. Hi there just wanted to give you a quick heads up and let you know a few of the pictures aren’t loading correctly. I’m not sure why but I think its a linking issue. I’ve tried it in two different browsers and both show the same results. Posted by 1daycarinsurance.ws.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: