<tag>

<tag2>

content

</tag2>

</tag>

Tags can only ever be closed directly after the opening tag. Think of it like putting a box inside another box; you need to close the inside box before closing the outside box. These tags within tags are referred to as nested elements.

When nesting elements inside other elements, it is considered best practice to indent the nested element by one tab space. This improves readability and helps us to easily see the nesting structure, and thus deduce how the tags are nested. This helps to stop documents from becoming messy and confusing. Conveniently, Sublime Text has an inbuilt tool to auto nest our tags. When we create a new tag inside another tag, Sublime Text will automatically indent the tag for us. On top of this, we are able to highlight all of the text in a document, then head over to edit > line > reindent – this will then auto- indent the entire document. Look at how much easier the text in Figure 2.1 is to read now that we have auto-indented it.

2.1

There are many different tags that can be used in our HTML document. Let’s use some now by starting our first webpage build.

Creating our website template

We will start by creating the foundation for our HTML document. Follow along with the steps below to put into practice what we are learning.

Each HTML document will start with the same tags, which simply describe your webpage as a whole to the browser. Start by installing and opening up your text editor of choice and creating a new file. Call it ‘index.html’. Inside this blank document, we will be constructing our very first webpage.

We’ll start by declaring the document type. This snippet of code is responsible for explaining to the browser what our document is and how to display it. The tag must appear only once in a document, and must appear at the very top of the page, before any other code is written.

The syntax of the code is as follows: