HTML has been the frontend for our favorite websites for as long as we can remember. Designers and developers have made sacrifices to accommodate its limitations.
Technology generally improves with time, and HTML is no exception. HTML5 is a more modern standard that offers a lot of stability and features. Even HTML4 and XHTML developers are well-versed in HTML5’s new features, which streamline the development process.
We’ve collected HTML5 examples that are fully valid and include all the essential components you would expect to see on a modern website. This article will provide you with the HTML5 examples you need. We’ve broken down each section in detail so you have a clear understanding of HTML5 and how to use it in your own projects.
You’ll find comments throughout the code with links to additional resources. So feel free to follow along while we explore an HTML5 document.
HTML5 Examples: HTML5 DOCTYPE and HTML Tag.
The DOCTYPE is the first line, which specifies the type of document to be served. HTML5 has simplified a lot of the previous HTML versions, such as XHTML. Now you only need to specify the type as html’, which is case-insensitive.
Following DOCTYPE, we include the standard HTML tag. Here, we also include the default language (lang attribute), of the page being served. Although the lang attribute is not required to be valid for HTML5, it is a good practice to include it. It allows search engines provide accurate language results, ensures proper font display and selection, and enables text to speech applications to read the content correctly.
Heading it up
The next section is called the head element. It is parent to many important elements such as metadata, page title and stylesheets.
Title & Metadata
Our metadata is placed inside the head element. We first specify the page’s character set, usually UTF-8. Metadata can include any combination of name or content you want, but a few are more common, such as author and description.
It is important to note that modern search engines, such as Google, no longer use the ‘keyword metadata” section of a page to determine search rankings and results. Instead, they opt to parse actual page contents.
Next, we have the title tag. This tag, just like in previous HTML versions specifies the title for the rendered page.
JavaScript and CSS Included
The links to our JavaScript and stylesheet files are located in the latter half of our head section. Modern browsers correctly assume that they can determine how to handle these files based upon the HTTP response. Therefore, type=’text/css is unnecessary. However, it is still necessary to specify the link’s relationship via rel=’stylesheet.
You will also see examples of conditional comment enclosing these stylesheet links. These comments have been around for a while as a (clunky!) workaround when dealing browser specific behaviors. They were most prominently displayed in earlier Internet Explorer versions. These allow developers to provide different stylesheets for different browsers. Microsoft has removed the need for conditional comments, and thus activated Internet Explorer 10 and higher.
Many developers still use this method to ensure complete backward compatibility. Click here to learn more about conditional comments and the coding.
We include any JavaScript files that are required. Stylesheets do not need to specify the type attribute. It is important to note that JavaScript includes should always be placed at the end HTML markup, right before the closing body tag.
This ensures that the script is loaded after the majority. It is best to place script tags at the end if the script modifies DOM elements with JavaScript. However, many JavaScript libraries invoke a function which requires the body to load first. This makes script tag placement a personal decision. Use your best judgement as a developer to decide whether certain scripts should load prior or after the rest.
Divs are dead!
We’re now at the body tag of the document. Now we can see how HTML5 changes really shine.
The most significant design change in HTML5 is the semantics of your markup. This refers to what your code actually means and what purpose each section or element serves. HTML5 introduces a number of new elements to HTML5, including divs, which are still valid elements.