First of all here is a screenshot of a valid html5 page. It passed the W3c HTML5 validation yet the document only contains two lines (32 characters). The parent doctype and also a title child element with a full stop. In addition to showing no errors and passing the HTML5 validator it will render in a browser. The ‘doctype‘ and also the ‘title‘ tags are the only required tags for a valid html5 document. Therefore the doctype and title tags are the bare minimum that must be included for the document to be identified as a HTML5 document.

Smallest Possible HTML5 page
Valid html5!

It is also a little known fact that head tags, body tags and closing html tags are optional. Therefore the a html5 document will render without these tags because they are part of the default and added if missing from the html5 document.

Since the head and body tags give structure to a document it is a good idea to include them.
The following code is a therefore a better example to begin with.

Go through this code line by line and note the order of where tags appear because this is especially relevant.

  • First of all on Line 1: The doctype tells the browser the document is written in HTML5.
  • In addition on Line 2: The opening html tag.
  • Also on Line 3: The opening head tag. Head tags contain all the meta information for the document.
  • And on Line 4: The title tags define the title of the document.
  • Also on Line 5: The closing head tag.
  • And on Line 6: The opening body tag, body tags contain all the content that will appear in the browser.
  • Furthermore on Line 7: The closing body tag.
  • Finally on Line 8: The closing html tag.

This is The Smallest Possible HTML5 Page

In conclusion ‘The smallest possible html5 webpage’ is a trivial example but it is especially relevant. Because highlights the fact that the only two required tags in a HTML5 page are the doctype and title tags. Browsers will consequently add the head tags if they are missing and even add the body tags if they are not present. For newcomers to web design it is probably wiser to include these tags for the moment because it will give the page some structure and meaning.

Most of all it is worth noting that the html, head and body tags are very important while using CSS (Cascading Style Sheets) and Javascript. Since both CSS and the Javascript languages use these tags as references to interact with the webpage. Consequently it is worth noting the order in which they appear in the code. Almost all the problems associated with web design are related to syntax errors. This holds true for almost all computer programming languages. Therefore it will probably save many headaches if you spend time learning the basic structures first while building webpages. As a result you will enjoy the experience of designing webpages and therefore improve as you gain experience.

Almost all of the problems I encountered early on involved leaving of a closing tag. Since the nature of HTML5 is one of an opening and closing tag syntax it is worth understanding this. Maybe the closing slash seems easy but be careful to include the correct ‘forward slash /’.


Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *