What is HTML5?
HTML is the primary markup language used to structure and present content on the World Wide Web (WWW). HTML5 is the latest standard recommended by the World Wide Web Consortium (W3C).
Contemporary websites use all three technologies to create dynamic, appealing webpages.
Let’s go over the basic structure and components of an HTML document.
The DOCTYPE Declaration
The first thing to notice is that most HTML tags have an opening and closing tag. Closing tags always contain a slash which is how your browser knows it’s reached the end of an HTML elements content. Elements that can’t have content, like the meta tag, don’t require a forward slash in HTML5. These are known as “void elements”.
The first line of every HTML document needs to be a doctype declaration.
The doctype tells the browser what kind of information to expect in the rest of the document. Here the doctype tells the browser to expect the HTML5 standard.
It is also necessary to understand how the elements of an HTML document are structured. Often HTML elements are nested inside of each other and improper nesting will affect how the browser renders the page.
The <head> and <body> elements should be separate from each other, with both elements nested inside the <html> element.
The header is the container for metadata about the website, and none of the content is visible in the browser. However, header information is invaluable to browsers and robots skimming the website for information.
Components that should be in every HTML header are:
The <title> element usually holds the title of the webpage. Whatever content is in the <title> element will display at the top of the browser.
The <link> element(s) tell the browser where any additional files, usually CSS files, that go along with the HTML document live. The browser needs to access the styles before it renders the rest of the website. Otherwise, it has no way of knowing what colours, fonts, layouts etc. to use while creating the site.
A <meta> element with a charset attribute. Charset is short for “character set”. What a character set is and why it’s important deserves a separate blog post. But its essentially a collection of letters, numbers and other symbols that the browser can display. The default charset for HTML5 and the preferred charset of most emails is UTF-8, which will represent any character in the Unicode Standard.
<meta> elements that provide a brief description of the website and who authored it. While Google has stated that meta tag content doesn’t affect it’s search rankings this information does appear in many Search Engine Results Page (SERPs) and will likely be the first content users of your website will see.
Finally, you should always include a <meta> tag that automatically scales the viewport (the visible part of the web page) to the device width, the main principle behind responsive design.
The Body Content
All the visible content of an HTML document gets placed between the body tag: headers, paragraphs, images, tables etc.
I’ll write more about the various HTML elements later. But, all HMTL page should include at least one <h1> element. The <h1> should be close to the top of the page and should contain title or headline information about the website. Proper use of header tags helps websites SEO and usability.
Every website on the internet starts with these primary elements. A fully commented HTML template is available as a gist on my GitHub page.
Please leave any questions in the comments.