Basic Structure of an HTML Document
In this blog, you will learn how an HTML page is structured. We will cover the essential elements required to create an HTML document.
If you are interested in creating web pages, HTML is a great language to begin your journey. It is a standard markup language for displaying documents in a web browser. This blog will help you build your first web page or HTML document from the ground up. We will explore the basic structure of an HTML document. Even if you have no prior coding experience, you can get started through easy-to-follow steps in this blog to create simple HTML web pages.
You can also explore: HTML Online Courses & Certifications
Must Check: How to Create Table in HTML
Table of Contents
Best-suited HTML & CSS courses for you
Learn HTML & CSS with these high-rated online courses
Prerequisites
To create an HTML page, you will need:
- A simple text editor or word processing program, for example, Notepad (Windows), TextEdit (Mac), Visual Studio Code, or Atom. We will use Notepad in this tutorial.
- You will also need a web browser such as Google Chrome or Mozilla Firefox. We will be using Chrome as the default browser.
Creating Your First HTML Document – Getting Started
Now, let’s understand HTML document structure and build your first HTML page. With the following steps, we will create an HTML page that displays ‘Hello, World’ text in your web browser.
Open the Text Editor
Open a text editor such as Notepad, Notepad++, or TextEdit to write the HTML code.
Write the HTML Code
Now, type the HTML code in the text editor. The HTML code starts with HTML5 DOCTYPE declaration and is written in the form of HTML elements that consist of HTML tags. Every tag consists of a keyword enclosed in angle brackets. For example, <html>, <head>, <body>, <title>, <h1>, <p>, etc.
HTML tags usually come in pairs like <html> and </html>. The first tag in a pair is the opening tag, while the second tag is the closing tag.
Syntax for creating an HTML page:
Here is the code to print ‘Hello, World’ on the web browser.
<!DOCTYPE html><html> <head> <title>Shiksha Online</title> </head> <body> <h1>Hello, World!</h1> <p>This is an example of HTML document structure</p> </body> </html>
Here’s how the code will look on Notepad:
Read Later
Saving the HTML File
Once you finish typing the code in a text editor, save it with the .html extension in a folder. For this, click on the File option in the Notepad and then click on Save As option.
Run the HTML File
Now go to the folder or location where you saved the file with the .html extension and run it. It will open and display the content on the web browser.
Output:
Conclusion
In this blog, we discussed the basic structure of an HTML document. We learned that we can write the HTML code as plain text in any text editor or word processor. Then, you can save it as an HTML file using the .html extension.
These .html files become the basis for a website’s pages and are put online as a live website through web hosting. Web browsers will then translate the tags to display the final output on the viewer’s screen. These tags tell the browsers how to structure into titles, headings, paragraphs, images, forms, tables, etc.
While you can create a simple website with HTML, you can build attractive and functional websites using CSS and JavaScript.
We hope you enjoyed this tour of the basics of HTML page structure. In our upcoming blogs, we will cover some other concepts of HTML to enhance your HTML knowledge and make it more useful. Stay tuned!
FAQs
Explain the structure of an HTML document.
The structure of an HTML document has the following elements: DOCTYPE, html, head, title, body
What is an HTML document type declaration?
The HTML document type or DOCTYPE declaration in HTML5 tells the browser what HTML version is used to write the document. DOCTYPE is not an HTML element or HTML tag. It tells what version or standard of HTML is used in the document.
This is a collection of insightful articles from domain experts in the fields of Cloud Computing, DevOps, AWS, Data Science, Machine Learning, AI, and Natural Language Processing. The range of topics caters to upski... Read Full Bio
Top Picks & New Arrivals
