DEV Community

Cover image for Basic HTML Document Structure
Bronwen Gien
Bronwen Gien

Posted on

Basic HTML Document Structure

If you’re new to coding, building a website from scratch can be daunting. But don’t worry, it’s quite simple! In this post, we’ll look at the basic structure of an HTML document. The basic HTML document structure is the skeleton on which all websites are built, and once you understand this, you’ll be well on your way to creating your own beautiful website. Ready to get started? Let’s go!

When developing a web page, it’s critical to use the right HTML document structure. Web pages may break, or the search engine crawlers may not read the page if the Basic HTML document structure is incorrect.

The basic HTML document structure includes the <html><head> and <body> tags where a <title> tag is required to be nested inside the <head> tag. In this article, we will break down what you should include in each one of these and why.

HTML is a markup language, which means it’s used to “mark up” material in a document. In this instance, a webpage with structural and semantic information instructs a browser on how to display it.

Please note that this article references HTML5, which is the latest version and if you are starting to learn now, we suggest you start on this version.

Table Of Contents

  1. Basic HTML Document Structure
  2. Basic HTML Document Structure Tags
  3. Doctype Tag
  4. The Root Tag
  5. The Head Tag
  6. The Title Tag
  7. The Body Tag
  8. What is Semantic HTML
  9. Conclusion:

Basic HTML Document Structure

If you are looking for a quick copy and paste of the basic HTML Document structure and understand the meaning of all the tags, feel free to use the below.  If you want to understand the detail behind these tags and find out what should be included, please continue reading.

Basic HTML document structure

Basic HTML Document Structure Tags
The Basic HTML Document structure is pretty simple and is for the most part made up of 3 different tags, the ,

and . When you dive deeper into HTML, you will realise that the page structure can get a bit more complex due to new semantic features in HTML5 known as Semantic HTML tags.

Doctype Tag
The first line of code <!DOCTYPE html> is referred to as a doctype declaration that informs the browser of the page’s HTML version.

We are using the HTML5 doctype, the most recent version of the HTML language. Several distinct doctype declarations correlate to different HTML versions. In HTML 4 alone, 3 different doctype declarations could be used, just by starting with HTML5 Basic HTML Page Structure is already much easier!

The Doctype declaration is not case sensitive, and therefore, all of the below versions will work:

Doctype example

To learn more about the Basic HTML Document Structure Click Here.

Top comments (0)