Document structure

In the previous article we talked about setting up the development environment.

Let’s get on with creating a file to start building a website.

You can create files you want by clicking on

If you choose VS Code / Cursor AI ->

File -> New File

If it is Webstorm ->

File -> New -> File

type in the name and extension, you can create a index.html file.

copy the following code snippet on to your file text editor and save the file, then open the index.html file in your web browser.

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

you can see the Hello World! rendered in your browser

index file in browser

Lets walkthrough the elements in the above snippets

Structure of documents

<!DOCTYPE html>

This ensures proper rendering of HTML elements in browser. We have discussed in previous article HTML is a markup language with predefined elements having meaning to it. doctype ensures based on the version of HTML defined in it, the browser uses the correct meaning to the element. Here we are using HTML 5 , <!DOCTYPE html> helps browser to map the content in our html file to render it using HTML5 standards.

If we wanted to use HTML 4 standards, doctype should be like the following example
```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things.

However, these days, they don’t do much and are basically just needed to make sure your document behaves correctly. That’s all you need to know for now.
<html></html> This element wraps all the content on the entire page and is sometimes known as the root element. It also includes the lang attribute, setting the primary language of the document.
<head></head>

This element acts as a container for all the stuff you want to include on the HTML page that isn’t the content you are showing to your page’s viewers. This includes things like and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
<meta charset="utf-8">

This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages.
<meta name="viewport" content="width=device-width">

This viewport element ensures the page renders at the width of viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down.
<title></title>

This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.
<body></body>

This contains all the content that you want to show to web users when they visit your page, whether that’s text, images, videos, games, playable audio tracks, or whatever else.