Coders' Guidebook

How to create an HTML webpage

The core code language of most webpages is called Hypertext Markup Language (HTML). HTML code is used to organise and display the content on a webpage and so an HTML file will often be the first file you create when building a website. In this tutorial, we will cover how to create a new HTML file and discuss its structure.

Create a new HTML file

Begin by opening your code editor of choice and starting a new document. All HTML files must include a declaration to tell web browsers that the document they are reading is in HTML format. The declaration always reads as follows and should occupy the first line of any HTML file:

<!DOCTYPE html>

With the declaration now in place, any programme or web browser opening the file knows that it is dealing with an HTML document.

The root element

The different components and sections of an HTML file are referred to as 'elements'. The first element of any HTML file is identified by the <html> tag, which is called the 'root' element and contains the entire contents of the HTML document. The root element is also where the language of the webpage is defined: <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. the 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 the opening <html lang="en-GB"> and closing </html> tags.

At this point, the HTML file complete with document type 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 selecting File > Save As.... Next, select or create the folder where you want to store your website's files and save the HTML file by changing the 'Save as type' to Hypertext Markup Language file (*html) and setting the file name to 'index'. The filename index.html has been chosen because this is the default webpage most servers will return when a web browser loads your website.

create-new-html-file.png

<<< Previous

Next >>>