Coders' Guidebook

How to create an HTML webpage

Most webpages are written in a code language called Hypertext Markup Language (HTML). An HTML file organises and displays content and so will often be the first document you create when building a website. This tutorial will show you how to create a new HTML file and introduce you to its structure.

Create a new HTML file

Begin by opening your code editor of choice and starting a new document. On the first line, type:

<!DOCTYPE html>

The DOCTYPE declaration tells any programme opening the file (e.g. a web browser) that it is dealing with a HTML file.

The root element

HTML files are made up of many different elements. The term 'element' describes the individual components and sections of the HTML file. The first element we will add to our HTML file is <html>. <html> is called the 'root' element. It goes just below the DOCTYPE declaration and will contain all the other HTML elements.

The root element is also where we define the language of the webpage: <html lang="en-GB">. In this example, 'en' identifies the language and 'GB' identifies the country (you can view the other available language and country codes here).

There is just one more thing we need to do to complete the root element. <html> is an opening tag. It requires a complimentary closing tag to enclose its content (i.e. our webpage). The closing <html> tag looks like this: </html>. This closing tag is always at the very bottom of the HTML file and any further code you add from this point onward should go between <html lang="en-GB"> and </html>.

Currently, the HTML file (equipped with HTML declaration and root element) should look like this:

<!DOCTYPE html>
<html lang="en-GB">

</html>

Save your work

At this point, it would be a good idea to save your code. If you are using Notepad++ then you can do this by clicking File > Save As... Create a folder where you want to store all your website files. In this folder, save your webpage by changing the 'Save as type' to Hypertext Markup Language file (*html) and setting the file name to 'index' (so the complete file name will be 'index.html'). The 'index.html' file is the default page that many servers will return when a web browser loads your website.

create-new-html-file.png

<<< Previous

Next >>>