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.
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.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Homepage Headline</h1>
<p>This is a paragraph.</p>
</body>
</html>
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 <html>, <head> and <body>. 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 html> <!DocType html> <!Doctype html> <!doctype html>
The Doctype tag is the only Basic HTML Structure tag that does not need a closing tag or a closing “/”.
The Root Tag
The <html> element represents the root of an HTML document and it contains all other HTML components, except for the Doctype declaration.
The <html> tag should always have a corresponding closing tag represented by </html>
While the main purpose of the <html> tag is to contain the <head> and <body> tags, its secondary function is to tell the browser what language the content of the page is written in.
You can find a list of all the language codes here.
The following example contains all of the code we have discussed with the language attribution
<!DOCTYPE html> <html lang="en"> </html>
The Head Tag
The <head> element separates <html> and <body> tags and can be considered for metadata.
Metadata is the information about the HTML document and is not shown when the HTML document renders in the browser.
Other very specific tags can be included in the <head> tags, such as <title> (see below), character sets, viewport settings, styles, and scripts. Click here to find out what tags you should include in your head tag.
The Title Tag
The title of the document is defined by the <title> tag. Title tags are the only required meta tags that need to be included in your <head> tag, and every HTML document needs to have a title tag.
Title tags are text-only tags and are vital for search engine optimization (SEO).
Good title tags normally contain flowing text that is longer and more descriptive, but less than 60 characters.
Your Basic HTML Document Structure should now, at a minimum, look like the below
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic HTML Page Structure</title>
</head>
<body>
</body>
</html>
The Body Tag
The body is what it sounds like; it creates the body of your webpage, all of its content.
The body tag normally contains various tags and content to make your website functional and facilitate styling. Examples of other tags you would find on the body section are <h1> to <h6>, <ol> and <img> to name a few Basic HTML tags.
The body can also get more complex with the addition of Semantic HTML.
What is Semantic HTML
Semantic tags convey more information about the content on a page to browsers and, importantly, search engines. These Semantic tags are nested within your <body> tag and allow you to break your web page down into different sections.
As a new coder, it may seem over the top to want to include semantic tags; however, there are some serious benefits as to why you should learn these and include them in your HTML – here are 4 benefits of Semantic HTML
Conclusion:
So there you have it – a basic overview of HTML document structure and how to use semantic HTML to make your content easier for both humans and search engines to understand. This is just the beginning though – there are plenty of other ways to improve your website’s SEO, which we will cover in future blog posts. In the meantime, why not try using some of the techniques we’ve talked about in this post? Experiment with different combinations and see what works best for you. And as always, if you need any help or advice, don’t hesitate to get in touch. We love hearing from our readers!
I hope this article inspired you to take that leap and start learning to code. Click Here to meet other new coders like you and join our community.
