The screenshot below shows all of the necessary elements of an HTML5 page.
Use the line numbers in the image for reference.
<!DOCTYPE html >
This line contains the Document Type Definition (DTD). The DTD tells the browser what type of markup language a page is using. The DTD is always the first thing in an HTML5 document.
Compared to older DOCTYPES, for XHTML for example, the HTML5 DOCTYPE is remarkably simple!!
You can read more about (X)HTML DTDs at the w3schools page on HTML <!DOCTYPE>
Declaration.
<html lang="en">
This is the start of the <html>
tag. Everything in an HTML5 document (other than the DTD) is enclosed by the html tag.
It is simply considered good form to point to the language of your web page. In this case it is English, indicated by the "en"
<head>
This is the start of the <head>
tag. The head section is where all of the "information" about the page is stored. Most of the stuff inside this section is not visible in the browser.
<meta charset="utf-8">
This is a <meta>
tag. There are lots of different types of meta tags. This particular one specifies the character set as utf-8. It's not terribly important right now to know what all that means, just remember to put it there.
<title>A Tiny HTML Document</title>
These are the opening and closing <title>
tags. The text between the two tags, in this case "A Tiny HTML Document", is what will be the title of the page. The title appears at the top of the browser window, and sometimes in the tab.
<link href="styles.css" rel="stylesheet">
<script src="scripts.js"></script>
These are the opening and closing <link>
and <script>
tags.
This information about where the browser can find the external stylesheet and Javascript is also included in the <head>
part of the HTML5 document.
</head>
This is the end of the head section. Note that this tag has a forward slash ( / ) in it. This indicates that it's a closing tag. Most HTML tags have an opening and closing tag.
<body>
This is the start of the <body>
tag. All of of the actual content of your web page should go between the opening and closing body tags.
</body>
This is the closing <body>
tag.
</html>
This is the closing <html>
tag, signifying the end of the HTML document. It should be the last thing in the document. Notice the forward slash that indicates it's a closing tag.
In summary, there are many changes from XHTML to HTML5, but most are in the direction of being less, not more strict. HTML5 is very forgiving, but there are some generic ideas that you can apply and some specific rules.
Generally, DOCTYPE
META content
element. <
and &
.