Understanding the Basics of HTML5 and Getting Started with HTML5

HTML5 is one of the most important languages used by today’s developers. Employers looking for web developers will certainly look for candidates with HTML5 fluency.

What is HTML5? 

First released in 2014, HTML5 attempts to address the absence of semantic clarity in older HTML elements. In doing so, it introduced what is called semantic elements. These elements clearly describe their meaning to both developers and browsers. HTML5 does not disregard older HTML elements. It just introduces additional elements to supplement and add context to their meaning.

HTML5 Elements

HTML5 brought with it many semantic elements. Semantic elements are used to clearly show the developer and the browser the meaning behind the element added to a page. Here’s a list of the more common elements that were introduced with HTML5.

• <header>
  The header element is what gives introductory content to a page. Usually, it contains the page’s heading and/or navigational aids. For example, apart from holding a <h1> or title, it can also hold a list of content for a page, or an image. A header is used to define the heading for each section on a page where you would use heading tags (<h1> to <h6>).
• <nav>
  The nav element is used to show a part of a page that links to other sections within a page or to other pages. The nav element is often used in a contents list to direct a person to another part of a page. Similarly, it is also used for a site’s menu or index. 
• <article>
  An article element is used to show a piece of content that is independent. It is standalone content that sits on a page. For example, it could be a blog post, an interactive widget, or even a user comment on an article. 
• <section>
  A section element is much like an article element. However, a section element can be used for content on a page that doesn’t necessarily relate to other content on that page. For example, if you take the home page of most sites, you will see different sections on it that stand alone and don’t necessarily represent anything to do with the other sections on that page. Another example would be a news site where sections are broken down by topics like Sports News, Travel News, Current Affairs, etc.  

Why are HTML5 elements important?

Why should you care about these elements? First of all, they increase the accessibility of your content. They provide more meaning to screen readers used by visually impaired users. Most government-based project contracts require a high level of accessibility on their sites and web applications. Search engines also like these semantic elements that HTML5 brings. Google no longer bases its search criteria on keywords alone. It bases them on intent. These elements highlight intent. 

Other HTML5 tags

MDN Web Docs have a comprehensive list of other elements with HTML5. Other tags that were introduced with HTML5 include: 

• <details>
• <embed>
• <footer>
• <video>
• <audio>
• <time>

HTML & web design

When it comes to website design, HTML5 operates across most platforms. While providing a fluid, user-friendly experience, it also displays and stores information in a way that facilitates the use of Title tags, a trait vital for SEO (Search Engine Optimisation).

HTML5 is written to build websites, primarily in structuring and presenting content online. Put simply, it is the overarching markup language of the HTML standard, including all the valuable attributes of its predecessors. It was designed to be an all-encompassing, cross-platform tool that would be suitable for developers who sought to deliver detailed content without the need for additional plugins.

Why is HTML5 important?

HTML5 has proven to be mathematically intelligent, and in doing so, it supports the writing of cleaner, more articulate code. Encouraging clear and descriptive code allows for the concise processing of subject matter. An understanding of the semantic value underlying HTML5 are summarised by Mike Robinson- html5 Doctor.com below.

‘Semantics are the implied meaning of a subject, like a word or sentence. It aids how humans (and these days, machines) interpret subject matter. On the web, HTML serves both humans and machines, suggesting the purpose of the content enclosed within an HTML tag. Until — and perhaps even after — machines can understand language and all its nuances at the same level as a human, we need HTML to help machines understand what we mean.’

Learn the basics for free

If you are new to code, there are a wide range of learning tools available to the budding HTML5 coder, not least our free 5 Day Coding Challenge, which will teach you some of the basics of HTML5. After one hour a day, over five days, you’ll have built your first-ever webpage, and you will understand more about the importance of HTML5 to software development.