Declaring the Document Type
The document type is used to tell the browser which version of HTML you'll be using. This helps the browser know how to read and render the page. Declaring a document type is a required piece of metadata that begins any HTML document.
To declare a document type, you will begin your HTML document with the following line of code: <!doctype html>. This tells the browser that your document is written in HTML.
Declaring the Document Language
The document language isn't always necessary, but is helpful for accessibility purposes. The language will help screen readers with enunciation, while also telling the browser what language the document should be read and rendered in.
To declare a document language, you will enter the following line of code on the line directly below the doctype specification: <html lang="en">. This tells the browser that your document is written in English.
If you're making a webpage for an international website that needs to be rendered in another language, you can change the language to the correct one. For example, a website written in Spanish would have the language declaration look like <html lang="es">, while a Chinese website would look like <html lang="zh">.
Current Code
After declaring the doctype and doc language, your HTML document should look similar to this:
<!doctype html>
<html lang="en">
Head
The head element is where all information about the document is placed. This includes any external styles, scripts, or instructions for the browser to render the site. None of the information contained in the head will be visible on a completed website.
The head element contains many other elements. As with all other HTML tags, the head element needs both an open and a close tag.
To open the head element, you should use: <head>. To close the head element, you should use: </head>.
The head element contains the metadata of the HTML page. The following metadata should always be included in the head element:
- meta charset
- Adding the <meta charset="utf-8"> line to your HTML code tells the browser that you are using the standard characters in your document. This helps the browser recognize the characters in your code.
- title
- Adding the title to the metadata provides a title for the page. Without a title added to the head element, the webpage shows up as an untitled page. Adding the title is done with an open and a close title tag, like so: <title>insert title here</title>
- Links
- The head element also contains links to a variety of other important information for the functionality of the HTML document. These include links to the CSS stylesheet, fonts, etc. These specific links will be discussed in the Links section of this guide.
Body
The body element contains all of the visible information on a page.
To open the body element, you should use: <body>. To close the body element, you should use: </body>.
Header
The header element is contained within the body element. It is a semantic tag that is used to help organize the layout of the page. The header typically includes the title and the navigation of the page. The header is different than the head or headings in that it is used as a sectioning element.
To open the header element, you should use: <header>. To close the header element, you should use: </header>.
Nav
Main
Footer
Article
Section
Div
Headings
Paragraphs