Web Standards, HTML5

What are Web standards?

Web standards are technical criteria for creating and interpreting Web-based content, established by the World Wide Web Consortium (W3C) and other standards bodies. The structural and presentational languages that make up Web standards are important for designs to be displayed consistently and accessibly across multiple platforms and internet devices.

Benefits of Web standards

Web standards have become an excellent mark of quality in the Web development community.

  • Web standards help business by:
    • saving money on development costs – decreased time to build websites
    • saving money on server bandwidth costs – less code, faster loading pages
  • Web standards help users by:
    • speeding up page load times – less time waiting for content to load
    • improving accessibility – equal access to Web content
    • making content more findable to search engines
  • Web standards help developers by:
    • decreasing development time – redundant code avoided
    • decreasing maintenance time – changes to one file can affect entire site
    • increasing design capabilities – Cascading Style Sheets (CSS) has a number of advanced features

Web standards and accessibility

Building websites according to Web standards is one of the simplest ways to ensure accessibility. Structured markup conveys the meaning of the content that adaptive technology can access and make sense of, like headings, paragraphs and lists.

Web standards and findability

By adhering to Web standards you can improve findability – making content more meaningful and legible for search engines. Web standards ensure the marking up of content in a semantically meaningful way that helps search engines understand what the page is about and what’s most important.

HTML5 – the newest standard

HTML5 is the most dramatic step in the evolution of Web standards. It’s an updated version of the HTML4 specification that has been in place since 1997; the main difference being that HTML4 was mostly aimed toward the development of websites and HTML5 is focused on Web applications. Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets.

HTML5 is still under specification, but many aspects of it are stable and implemented in recent versions of all browsers. Web Simplicity creates websites to the HTML5 standard.

HTML5 is hardly visibly noticeable on screen – it is all in the coding and the structure of content, which ultimately aids accessibility. The new tags enable Web developers to define common page regions, such as headers, navigation, content and footers. Assistive technologies like screen readers can then target these elements, greatly increasing the accessibility of the content. The only way to really see the value of the updated specification is by studying the content hierarchy outline. The outline is the perceived hierarchy of the document’s content – not seen visually, but understood by devices that render it.

Compare the side-by-side typical page outlines of the same page – HTML4 versus HTML5: History is a subsection of Board of Directors in HTML4, which is incorrect.

HTML4 Example Outline

  1. BedRock Mining Support
    1. Board of Directors
      1. History is a sub section to Board of Directors in HTML4 and therefore incorrect
      2. Contact Us
        1. Executive Office: Pretoria
      3. Affiliations & Expertise
      4. BedRock Facts

HTML5 Example Outline

  1. BedRock Mining Support
    1. Main navigation
  2. About Us
    1. Board of Directors
      1. Derick Kruger
      2. Frans Brewis
      3. Chris Els
      4. Robert Muntz
      5. Louis Terblanche
      6. Leon Graham
      7. Sheila Galloway
      8. Martin Coetzee
    2. History is a sub section to About Us in HTML5 and therefore correct
    3. Contact Us
      1. Executive Office: Pretoria
    4. Affiliations & Expertise
    5. BedRock Facts
HTML5 allows us to create proper content hierarchies, which helps assistive technologies interpret content hierarchies to enhance accessibility.

Useful outline tools

History of Web standards

The commercial success of the internet grew rapidly from the first networks created to share scientific documents, to the rich multimedia we now experience. The technological underpinnings of the early internet preceded industry standards.

Separating presentation from content

Web pages are written in HTML, Hypertext Markup Language, the behind-the-scenes code that tell Web browsers what to display. HTML is a markup specification that gives content structure: a system of codes that identify parts and characteristics of documents like headings, paragraphs, lists and links.

The original HTML specifications authored by Tim Berners-Lee were not equipped to handle the desires of Web designers who wanted control over the visual appearance of pages. Due to these pressures, presentational tags started to creep into the language, polluting HTML with meaningless markup. In hindsight – structurally speaking – these tags made documents less useful. A FONT tag has no meaning. What does a FONT tag mean to an audio browser, for example? Presentational markup embedded into Web pages add to the amount of code, making unwieldy pages and difficult to maintain. For example, if you wanted to change the font style, you would have to change each tag on every page.

The W3C recongnised this and developed a standard called Cascading Style Sheets (CSS). The concept of style sheets was not new and goes back to the 1960s. With CSS, style can be separated from content, providing a number of advantages:

  • easily change the presentation of information
  • retain the integrity of the document structure
    • structured documents can work across multiple browsers, platforms and internet devices
    • structure allows for powerful indexing by search engines – users can search by page titles, headings and paragraphs, making content more findable
    • structured pages are more accessible – alternate browsers used by the visually-impaired can better understand the content and structure of documents
    • structured markup is easier to maintain

Advances in the CSS standard enable Web developers to implement complex design elements like drop shadows, rounded corners and fades, which previously would have been done using images and coding hacks to get the same effects.