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