Lesson Four: HTML File Layout
In this lesson, you will build your first web page! Right now your Raptors page doesn't have any real HTML code in it, but you will change that very soon.
The <!DOCTYPE> Declaration - HTML5
Several versions of HTML have been created over time, and many websites on the Internet still contain a mixture of old and new code. It's important to mark each of your HTML files with a version to give the web browser some help understanding the page.
The <!DOCTYPE> declaration was introduced to help browsers interpret each web page. You can see this special tag starts with an exclamation point and is in all upper case letters. It does not have a closing tag.
The <!DOCTYPE> tag is required for all XHTML and HTML5 files and you will need to include this line on all web pages you create in this course. The <!DOCTYPE> tag must be very first line in the ".html" file – before any other elements, blank lines, or spaces!
The HTML5 version of the <!DOCTYPE> tag is written with the word "html" afterwards, inside the angle brackets.
<!DOCTYPE html>
Copy
Since you will be creating HTML5 web pages in this course, whenever you create a new ".html" file, the code above should be placed on the very first line.
The <!DOCTYPE> Declaration - Older Versions
While you don't need to use them yourself, there are some older versions of the <!DOCTYPE> tag that you may see on other pages. The following example can be used for older XHTML pages. We have shown the code broken across two lines because it's so long, but in a HTML file the entire element would go on a single line.
Copy
This example states that the web page is written in the XHTML 1.0 language. This is the strict version, so the browser will validate that the page uses only the allowed elements from the XHML standard; older elements are not supported. The browser can find a copy of these rules at the location "".
There is also a transitional version of the <!DOCTYPE>. This version will let the browser support a mixture of older HTML elements along with the XHTML elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Copy
Older versions of HTML encouraged the use of frames within a page. You can use a frameset version of the <!DOCTYPE> to show that the page contains frames.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
Copy
Browsers that support HTML5 will also support all older standards such as HTML4 and XHTML.
What happens if you don't use the <!DOCTYPE> tag on your web page? In that case, browsers can fall back to their own rules for handling tags (called "Quirks Mode"), which often shows the page incorrectly.
OK, now it's time to add the HTML5 <!DOCTYPE> tag to the top of your Raptors "index.html" file.
Work with Me: Adding <!DOCTYPE> to Raptors
Let's add the <!DOCTYPE> declaration to your Raptors "index.html" file. Open this file in your text editor, and delete all lines or other content that may be there already. Then add the full HTML5 <!DOCTYPE html> line at the very beginning of the file.
<!DOCTYPE html>
Copy
When you are done, keep your file open for the next set of changes.
Three Main Elements in Every HTML Page
Underneath the <!DOCTYPE> tag, every web page has one <html> root element that contains all other tags and data. Inside the <html> element are two other main elements, the <head> and the <body>.
HTML head and body containers
Every web page should have the essential mark-up pictured above. Each element (<html>, <head>, <body>) is actually a container that can hold other things. We have color-coded the containers to make them stand out visually.
Notice how the <html> element contains the other two. After the opening <html> tag, you find the complete <head> and then <body> elements. The <html> container finally closes with the ending </html> tag on the last line. This is like placing two smaller boxes inside one larger box.
Using Indentation for Clarity
It is best practice to use whitespace to help human readers understand your HTML code. Web browsers will ignore your whitespace - it doesn't change the visible result in the browser. However, it makes a big difference to human readers. In particular, you should use indentation (spaces to the right) to help show how some elements contain other elements. Each time you start a new element inside a larger container, indent that code a little bit to the right. You can also start each new element on its own line.
Both of the examples below would be processed exactly the same by the web browser. Which would you rather read as a human?
Without whitespace:
<!DOCTYPE html><html><head></head><body>Hello World!</body></html>
Copy
With whitespace:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello World!
</body>
</html>
Copy
In our code, if one element belongs inside another, we will indent that container code to the right. We encourage you to follow the same pattern in your own code.
Now, let's take a closer look at the <html>, <head> and <body> elements.
The <html> Element
The opening <html> tag is always the first tag in your web page after <!DOCTYPE>, and the closing </html> tag is always the last tag in the page. There is no visible effect from this element in your web browser. It simply serves as the largest container or box that holds all other HTML mark-up and content.
<!DOCTYPE html>
<html>
</html>
The <head> Element
The first element inside the root <html> is the <head> element. This is the "brain" of the page. The <head> area contains information about the page and instructions for the browser, but is not visible to people reading the page in the browser.
You will learn some of the specific tags that go in this area later. For now you can set up an empty <head> container in your Raptors "index.html" file. Follow the instructions below to add your <head> element now.
The <body> Element
The <body> element comes right after the closing </head> tag, and it contains everything the web browser shows in the content area. All visible text, images and links to other pages are stored in the body section. Let's add the <body> element to your new web page now.
You now have a basic web page with the three main elements. We started with the opening <html> tag, and then placed the <head> element inside the <html> container. The <body> element also fits inside the <html> container and is placed below the <head>. These three elements are all you need to call your file a web page!
1. What is the <!DOCTYPE> element used for on a web page?
2. What is the difference between a strict, transitional, and frameset <!DOCTYPE>s?
3. How is the HTML5 style of <!DOCTYPE> easier to use?
4. After <!DOCTYPE>, what is the first tag in a web page?
5. What is the first element inside the section of a web page?
6. What tag is responsible for holding all of the text, images, links and other visible information on a web site?
1. The <!DOCTYPE> element is used to declare the version and type of HTML that the web page is written in.
2. The strict <!DOCTYPE> ensures that the web page only uses elements from the specified version of XHTML and does not support older elements. The transitional <!DOCTYPE> allows a mixture of older HTML elements along with XHTML elements. The frameset <!DOCTYPE> is used for web pages that contain frames.
3. The HTML5 style of <!DOCTYPE> is easier to use because it simply requires adding <!DOCTYPE html> at the beginning of the file. It is a single line and there is no need to specify a specific version or type of HTML.
4. After <!DOCTYPE>, the first tag in a web page is the <html> tag.
5. The first element inside the <html> section of a web page is the <head> element.
6. The <body> tag is responsible for holding all of the text, images, links, and other visible information on a web page.
1. The <!DOCTYPE> element is used to declare the version of HTML that the web page is written in. It helps browsers interpret and render the page correctly.
2. A strict <!DOCTYPE> indicates that the web page conforms strictly to the specified version of HTML or XHTML and doesn't support older elements. A transitional <!DOCTYPE> allows a mixture of older HTML and XHTML elements. A frameset <!DOCTYPE> is used when the web page contains frames.
3. The HTML5 style of <!DOCTYPE> is easier to use because it is simpler and supports all older versions of HTML, such as HTML4 and XHTML.
4. After the <!DOCTYPE>, the first tag in a web page is the <html> element.
5. The first element inside the <html> section of a web page is the <head> element.
6. The <body> tag is responsible for holding all of the text, images, links, and other visible information on a web page.