Coding up your first web page is a straightforward process, and we can get this done in less than 15 lines of HTML code. The following is all you need to construct your first web page using HTML. This might look a little different to anything you’ve seen before, but we’ll go through each line in detail.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My First Web Page</title> </head> <body> <h1>Hello World</h1> <p>My first web page.</p> </body> </html>
The first line
<!DOCTYPE html> informs the browser about the type of HTML version that is being used and is called the document type declaration. This simple statement means that HTML5 is the version of the markup that will be used for the rest of this document. The document declaration is always placed at the beginning of the file before writing any HTML markup.
The next piece of HTML code is the and this signifies the beginning of the document. As you will soon see, most elements come in pairs.
The element comes in a pair and encapsulates all the other elements. The pairs of elements have an opening, and this element is closed right at the end of the document with . The opening element has an attribute that specifies the language of the document; in our case we are setting the language as English with en.
This is not something that you have to do to every single HTML document, but it is one of those things that strictly specify which language will be used. It’s also useful for screen readers in terms of how they enunciate the text, and is also very helpful for online translators, so that they know which language they're dealing with. You can find all the ISO language codes here: http://www.html.am/reference/iso-language-codes.cfm.
The next element is the
<head>, which is inside
<html>. This is a required tag that should only be used once on the web page. The elements that reside inside the head tag aren’t displayed on the web pages and are hidden from visitors.
Inside this element, you can place metadata – this is accompanying information about the page. In our web page, the
<meta> element has an attribute called charset that is set to utf-8.
This simply specifies the character encoding for the HTML document. This is something you should do for each of your HTML documents. You always want to set the character encoding, and unless you're going to be using Russian, Japanese, and the Persian alphabet, or other types of characters, you're probably going to use utf-8. What this does is inform the browser which encoding to use - that way, it's going to use the proper characters when rendering content to the page. You also want to set this encoding as the very first thing after the head tag, so it's immediately set.
Meta tags don’t actually do anything to the content that is presented in the browser window, but they are used by the likes of search engines to catalogue information about the web page. You will notice that the
<meta> tag doesn’t have a corresponding closing tag. In HTML there are some tags that are self-closing, and the
<meta> tag is one of them.
The next element that sits inside
<head> is the
<title>. This element sets the title of the document. The text inside the pair of opening and closing tags of the
<title> element doesn’t actually appear in the main body of the document, instead the title appears in the tab or window of the browser
The closing tag for the
</head> element comes after closing the title tag, and this just closes the corresponding tag that was opened.
The next element in the document is the
<body> element, and inside this tag is where the main content of the document will actually be viewable to the user when the file is opened in a browser. Most of the markup tags will actually go inside the body element. There are two elements inside the main body element, h1, which specifies the type of heading – much like the heading 1 selection from a Word document, and the p element that signifies the beginning of a paragraph.
You could simply just write your text out inside the body element, but to follow good semantics and to make it easier to style different elements, it is best practice to wrap all paragraph text inside a p element. Finally, the body and html elements are closed off with closing tags.