HTML5 SEMANTICS TO OR NOT TO THAT IS THE QUESTION BY WILLIAM MURRAY

SEMANTICS Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang attribute represents the language of the content.ollang These definitions allow HTML processors, such as Web browsers or search engines, to present and use documents and applications in a wide variety of contexts that the author might not have considered.

HTML5 FEATURES: SEMANTICS Semantics is one of the most distinctive features of the Web Platform versus other application platforms. Developers usually ignore or de-prioritize such feature but the mastery of it can bring many benefits to our projects. The Web is text and text has a meaning. Ultimately the content that our browsers read is pure text. Web sites and web applications have been created in an ecosystem where text based content is linkable, searchable and mashable. In the open web scenario our content can be shown, fed and remixed by third parties, search engines and accessibility tools. All these benefits don't come for free. Automated tools can only do half of the job at recognizing the nature of the content. The better job the developer does at marking the right semantics of the content the easier will be for the rest of the agents to deal with it. HTML5 provides a series of tools to make developers life easier too: New media elements. New structural elements. New semantics for internationalization. New link relation types. New attributes. New form types. New microdata syntax for additional semantics.

HTML5: SEMANTICS There are two types of semantic tags introduced by html5, text-level and structural. Text-level semantics fall into what are currently inline elements. Ex.,,, Structural elements are the block level elements we use to structure pages. Ex.,,,,,

WHY USE SEMANTIC ELEMENTS? Because HTML conveys meaning, rather than presentation, the same page can also be used by a small browser on a mobile phone, without any change to the page. Instead of headings being in large letters as on the desktop, for example, the browser on the mobile phone might use the same size text for the whole the page, but with the headings in bold. But it goes further than just differences in screen size: the same page could equally be used by a blind user using a browser based around speech synthesis, which instead of displaying the page on a screen, reads the page to the user, e.g. using headphones. Instead of large text for the headings, the speech browser might use a different volume or a slower voice. That's not all, either. Since the browsers know which parts of the page are the headings, they can create a document outline that the user can use to quickly navigate around the document, using keys for "jump to next heading" or "jump to previous heading". Such features are especially common with speech browsers, where users would otherwise find quickly navigating a page quite difficult. Even beyond browsers, software can make use of this information. Search engines can use the headings to more effectively index a page, or to provide quick links to subsections of the page from their results. Tools can use the headings to create a table of contents (that is in fact how this very specification's table of contents is generated). This example has focused on headings, but the same principle applies to all of the semantics in HTML.

EXAMPLES OF HTML SEMANTIC ELEMENTS TagDescription Defines an article Defines content aside from the page content Defines additional details that the user can view or hide Defines a caption for a element Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. Defines a footer for a document or section Specifies a header for a document or section Specifies the main content of a document Defines marked/highlighted text Defines navigation links Defines a section in a document Defines a visible heading for a element Defines a date/time

HOW TO CHOOSE THE APPROPRIATE ELEMENT

PROPER USE OF SEMANTICS Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose, as doing so prevents software from correctly processing the page. This would make software that relies on these semantics fail: for example, a speech browser that allowed a blind user to navigate tables in the document would report the quote above as a table, confusing the user; similarly, a tool that extracted titles of works from pages would extract "Ernest" as the title of a work, even though it's actually a person's name, not a title.

A corrected version of this document might be:

THE CONTROVERSY: DO SEMANTICS MATTER? CONS We can become caught up in trying to use HTML5 Semantics wasting a great deal of time with little or no benefit. The web no longer consists of structured content. The structural elements of HTML5 currently don’t do much in visual browsers, though software such as screen readers are starting to use them. Almost every new HTML5 element currently provides to assistive technology as much semantic inform as a div elem. If searchability (SEO) is your grand purpose for using semantic mark-up, then know that most search engines do not give more credence to a page just because of its mark-up.

THE CONTROVERSY: DO SEMANTICS MATTER? PROS Semantics communicate meaning, and once that is established machines can do something meaningful with that data. Semantics make HTML5 a more flexible language. Semantics help search engines identify the correct web page content improving overall rating and placement in search engine results. A semantic web allows data to be shred and reused acoss applications, enterprises, and communities

FINAL THOUGHTS Once you learn to look past element names and think of their essential meaning, it gets a bit easier to write markup. Think of your chunks of content in terms of how they relate to each other and in which contexts they can be used. Try to keep things simple. Overthinking your markup will only cause more problems than it’s worth. And let’s face it: it’s not like you can’t change it later! Finally, try utilizing HTML5 markup in ways that gain the benefit of these new elements. Create tools, use your own documents to test how well-formed and structured they are, and test how portable your content really is. s not like you can’t change it later!