Connect with us

HTML File Structure: A Learning Journey to Web Development


HTML File Structure: A Learning Journey to Web Development

Hello, folks! How’s your hacking going? HTML file Structure is what we’ll be learning today. Let’s Begin!

HTML File Structure

So, basically, An HTML file have 4 main parts. They are Document type Declaration, HTML, Head, and Body. These four parts split up an HTML file in sections that delivers different information to the browsers to serve a different purpose. We’ll now discuss each part in details.

First comes the Document type declaration. Before we begin writing our HTML code, we need to define which version of HTML we are creating. HTML have many different versions which we’ve learned in HTML History. All these versions are somewhat different from one another, Even though they share a lot of tags and attribute with the same name. So, We have to let the browser know the exact version of HTML we are using so that it can render the content correctly.

Document Type Declaration

DocType Declaration is the very first thing we do in our HTML file using the <!DOCTYPE> tag. It’s a self-closing tag, which means we don’t have to write a separate closing tag for this element. We write the tag and we add the version information as an attribute of the tag. For example, if we were to write an HTML file with the version 4.01, we had to write our doctype as following:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”””>

Looks complicated, right? The good news is, Since the release of HTML5, we don’t have to write those complex lines of wired codes. Rather, all we need to write is this:


When you say ‘HTML’ after ‘!DOCTYPE’, it’ll tell the browser that you are using the latest version of HTML which is currently HTML5. But even when the latest version of HTML gets promoted to other versions, your file would still be using the up to date definitions of HTML. Cool, right? And with that, we’re done with doctype declaration.

html Tag

The next part of an HTML file structure is the html tag itself. It’s just a simple notation of beginning the HTML codes. It marks the start point from where browsers start rendering content. This tag is the root of any HTML file. Everything we write in an HTML file goes inside this tag. Which means, this html tag is the descendant of every single element of a page.

We declare it like this:

<html> </html>

Simple as that!

head Tag

The next part of an HTML file structure is the head tag. This tag contains meta information about the page. In other words, the head part of an HTML file has all the information that is not directly shown in a web page But is necessary for showing them properly.

The example of this would be the character set of fonts we’re using in our content. Or the title of our page that usually shows up in the browser’s tab bar. These things don’t show up in the visible part of our web page but still is very necessary. So, head’s purpose is to deliver all the important information about rest of the page to the browser while they don’t really show up in visible parts of web pages.

We write the head tags right after (and inside) the html tags. Like this:

<!DOCTYPE HTML> <html>    <head>   </head> </html>

Easy as that!

body Tag

The body is the main part of HTML file structure. This is the part of HTML file that contains all the content that actually shows up on the page to the viewers. So, as you may have already understand, everything you see on a web page; your friends selfie on Facebook, that video on Youtube or that news on BBC, everything is part of this body tag.

Body tag doesn’t have any structuring rules about how we organize our content inside it. We dump everything we want our users to see inside the body. But HTML5 introduces a lot of semantic tags that provide guidelines on formatting our content in a nice way. We’ll discuss that in future.

We start the body tag after the closing of head tag, while we’re still inside the html tags. So, a complete structured but blank web page would look like this:

<!DOCTYPE HTML> <html>   <head>   </head>   <body>   </body> </html>

Putting it all together

So, now we know almost everything about HTML file structure. Remember that page we’ve created in the last post to show you some basic HTML tags? That page was unstructured. Let’s take that page and organize those content with the structure we’ve learned today. Take a look at it and see how organized and readable it becomes after it is structured. And as always, Feel free to alter the codes and see what happens.

See the Pen OdKqpO by Szabi Kisded (@szabi-kisded) on CodePen.

This is the standard structure that every single web page follows. While big and complex pages might contain a lot more tags and information in the major parts that we’ve discussed, But down to the skeleton, you’ll always find this simple structure in any web page exists on the web.

So, that is it. Now you’re capable of creating a real web page using a real structure that all the greatest web developers uses. Try creating some file on your computer and show it off to your friend. Show them what superpower you’ve gained.

Keep hacking with HTML file structure and we’ll learn about some major HTML tags in details soon. Till then, See ya!

Continue Reading
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

More in coding

About Me:

Szabi Kisded

Hey there, I'm Szabi. At 30 years old, I quit my IT job and started my own business and became a full time WordPress plugin developer, blogger and stay-at-home dad. Here I'm documenting my journey earning an online (semi)passive income. Read more

Sign up for my newsletter and get the YouTube Caption Scraper WordPress plugin for free
(worth 29$)!

All My Plugins In A Bundle:

My AutoBlogging Plugins:

My Online Courses:

A Theme I Recommend:

Featured Posts:

To Top