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).
HTML describes the content of a web page. Cascading Style Sheets (CSS) provide styling information about the site: font-types, background colours, layout etc. JavaScript (JS) provides extra functionality allowing features like dynamic content updates or interactive maps.
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.
Nesting Order
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.
Header Information
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.
JavaScript
Similar to CSS style information properly designed websites keep scripting in a separate document that’s called from the HTML document. This document is usually called something like script.js and lives in a folder on the server called js or JavaScript.
There’s a bit of debate on where in an HTML document an external JavaScript file should be called. I prefer the convention of calling an external script at the end of the body element as HTML pages load from top to bottom. While internet connections are getting faster all the time, there are still plenty of pockets of the world where signals are slow. Placing the JavaScript link at the bottom of the body ensures the content of the site will load first so the user will have most of the websites information and some functionality even if the site crashes or load time starts to crawl.
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.
