Creating a Basic HTML5 Document
Posted on 2010-10-11 by Jan Vantomme
Tags:
teaching, tutorial
In this article I'm going to cover the basic structure of an HTML5 document. The tags you'll learn should be in each HTML5 document you create. Not all of these tags and attributes are required to create a valid HTML5 document. Some of them are added for accessibility, usability or SEO.
The Doctype.
The doctype should be the first thing in an HTML document and is not an html tag. It simply contains information about the version of HTML the page is written in. Some older browsers need this doctype to trigger standards mode. The doctype for HTML5 is very short compared to the one used by an XHTML Strict document.
The HTML5 Doctype
<!doctype html>The XHTML Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">The <html> Tag
This is the first tag in your document and it wraps around all the other elements of your HTML5 document. For accessibility reasons, you should also add the lang attribute to tell screenreaders and browsers what language you are using.
<html lang="en"> ... </html>Language Codes
The table below shows most common language codes you will use here in Belgium. A "full list of language codes":https://en.wikipedia.org/wiki/ISO_3166-1 can be found on Wikipedia.
<table>
<tr>
<th class="table_3">Language</th>
<th class="table_2">ISO Code</th>
</tr>
<tr class="dotted-line-top">
<td class="table_3">Dutch</td>
<td class="table_2">nl</td>
</tr>
<tr class="dotted-line-top">
<td class="table_3">English</td>
<td class="table_2">en</td>
</tr>
<tr class="dotted-line-top">
<td class="table_3">French</td>
<td class="table_2">fr</td>
</tr>
<tr class="dotted-line-top">
<td class="table_3">German</td>
<td class="table_2">de</td>
</tr>
</table>The <head> Tag
The head tag is the first child of the html tag. The head tag is a container for metadata, links to CSS and JavaScript files, and the title tag. Note that everyting inside the head will not be visible to the end user.
Character encoding.
This meta tag should be the first element inside the head element. This tag tells the browser what character set to use to render the page. The best thing you can do is using the UTF-8 character set as shown in the code example below.
<meta charset="utf-8" />The <title> Tag
The title tag is one of the most important tags in your document. Your visitors will see the text of the title element at the top of their browser window, or on the tab if they use a browser that uses tabs. The text of the title element will also be used when your visitors add your web page to their favorites. When search engines like Google index your website, they use the text of the title element as the text for the hyperlink to your page.
<title>Title of This Web Page</title>
Meta Description
The meta description tag is another important tag for SEO. You should write a short text that describes the content found on your page. Try to write a text with a maximum length of 150 characters. Make sure that every HTML document you create has a different description.
<meta name="description" content="Description of the content of this web page." />If you want to know more about SEO, I can recommend the Google SEO Starter Guide (PDF).
!https://img.vormplus.be/blog/google-title-description.png(A screenshot showing where the title element and meta description end up on a Google Search Results page.)!
The <body> Tag
The body tag is the second child of the html element. It is a container for all the content on the page. This is where you add text, images, video, ... Everything between <body> and </body> is visible to your visitors in the browser window.
Your First HTML5 Document
The small piece of code is what your first HTML5 page should look like. Save this as a template so you can use it when you need to create a new one.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title of This Web Page</title>
<meta name="description" content="Description of the content of this web page." />
</head>
<body>
<p>My first web page.</p>
</body>
</html>
