Structure of HTML Document

I feel so excited to start off with this first post about HTML😊. To come up with an HTML page, we follow a structure or sometimes called the skeleton. It is this structure that we’re going to focus on in this post. Like all the posts in these nuggets, we are going to have a code snippet whose output will always be displayed on the right. You can play around with it. If you want output only, you can choose that. If you prefer to only look at the code, you only choose HTML. With that, lets understand the snippet below 👇

See the Pen HTML Skeleton by bmutebi (@bmutebi) on CodePen.

The code above outputs Hello World to the screen. However, there are many lines of code. Lets break one by one.

The first code means the type of a document. Well, there are many times of documents running on the web but this is one is HTML document. That’s the meaning. This should always be your first code in any HTML page.

This is followed by <html> tag. This shows where the page starts from and ends. The <html> tag must be the last to be closed on a web page as you can see in the snippet </html>. Everything about a web page must be wrapped within the opening html tag and the closing. When you look closely, you see lang inside opening html tag (This should not necessarily be there for a page to work). This is indicating the language in which this page is written. It is English language. There are many languages the page can be written in like ar for arabic, fr for french, among others.

The next section of the code indicates the <head>. This tag is used by browsers and search engines when indexing web pages on the web. In this tag is where we include things like the meta, title of the page, links to external files, etc. (no need to worry about this now, we shall see these in later posts). This tag acts as the brain of the web page. It contains the title of the web page that is displayed in the browser tabs when it is previewed. This title is put inside the <title> tag.

Then we have the <body> tag that is closed at the end next to the html closing tag. All the HTML tags to be used to display content on the web page must be put inside this <body> element. No other HTML code must be outside this body element. In this example, we have the heading tags inside the body to display Hello World message on the web page.

All HTML files must be with a .html extension e.g., home.html. As you set yourself to learn more about HTML, ensure you take note of how the files are saved.

Now that you understand the structure of HTML page, feel free to rewrite it in your own web page. 👨‍💻