, , , and , forming the foundation of an HTML document.
declaration informs the browser that the document is written in HTML5, ensuring proper rendering.
section contains metadata such as character encoding () and viewport settings, which are important for page performance and SEO.
section contains all visible content on the webpage, including text, images, links, and other elements.
, , , ![]()
, and lists (
,
, ) help organize and display content within the body of the document.
If you are just starting your journey into web development, one of the first things you will master is creating HTML structure of the webpage. HTML, short for Hypertext Markup Language is one of the most basic building blocks in the construction of web sites. The orgaizational structure of HTML respectively means the frame of HTML documents through which browsers distinguish the position of the elements of a webpage, i.e., text, images, hyperlinks etc.
In this tutorial, we shall take you through the parts which make up standard HTML tag together with meaningful examples. At the start of studying HTML, or if you have some forgotten knowledge this guide will help you improve your understanding of how the HTML documents are built.
Before going into further detail about HTML, let’s first learn about the basic document structure by using only HTML. Formatting of web page involves formulation of several basic compounds that when put together provides a working webpage. Here’s the basic structure:
Basic HTML Structure
Welcome to HTML!
This is an example of the basic HTML structure.
To understand the basic HTML structure better, let’s understand some common tags used within the body of an HTML document:
to : These are heading tags; the is first-levelling for a page, and the
These assist in the organizations of the content starting with the highest level of the hierarchy. is the least important.
This is the main heading
This is a subheading
tags is considered plain text by the browser no matter how big or small the amount.: This tag is used where there is a likelihood of having paragraphs. Anything put in-between
This is a paragraph of text.
: The html tag named is used to show images which are present in a webpage in the browser.
, and : These tags are used to accomplish list building. The gives list in the form of bullet points,
forms the list in the form of numbers and
- Item 1
- Item 2
The fundamental layout is important to SEO because search engines extract and evaluate content based on it. For example:
It’s important to organize your HTML well so that a search engine can easily understand what it has crawled. If you are interested in further SEO recommendations you can click on this link to the Google Search Central Blog where they have guidelines regarding HTML structure and SEO.
Once you learnt the basic HTML tags that create the structure of your page the next step is to style your page using CSS (Cascading Style Sheets) and add functionality using JavaScript. The following technologies let you style your page and make it interactive to help you create an interesting website.
The declaration is used to tell the web browser which version of HTML the page is written in. In modern web development, it specifies that the page is using HTML5. It helps the browser render the page correctly according to the HTML standards.
The basic elements of an HTML document include:
: Declares the document type.: The root element that wraps all HTML content.: Contains metadata about the document, such as the title, character encoding, and links to stylesheets.: Contains the content of the webpage that is visible to users.The section contains meta-information about the document (such as the title, meta tags, and links to CSS), which isn’t directly visible to users. The section contains the content of the webpage (text, images, links, etc.) that users can see and interact with.
The tag provides metadata about the HTML document. For example, the tag defines the character encoding for the document, ensuring that all characters display correctly. Another common use of the tag is setting the viewport to ensure the webpage is responsive on different devices.
Semantic HTML tags help describe the content more clearly, both for developers and search engines. These tags improve the accessibility of your webpage and provide better structure, which can lead to improved SEO (search engine optimization). For example, the tag indicates the top section of a webpage, while the marks the bottom.
HTML document also goes by the name of web document, which is a text file only containing the HTML code used in the construction of web pages. HTML starts with the and other elements of the documents it organizes for display in web browsers containing , , or among others.
HTML was first created by Tim Berners-Lee in 1991. It has, over the years been normalized by the World Wide Web Consortium (W3C) to promote uniformity when developing websites.
HTML or Hypertext Markup Language is a language used in the creation of web page. Web page is the framework of the contents of the web, allowing the browsers to present the texts, images, hyperlinks, and media content. It should be noted that with HTML in the world has never been the same without thus cannot be overemphasized.
HTML main role is to organize and display content on the web. It specifies the construction of items such as headings, paragraphs, hyperlinks, images, and lists, to establish well-organized and click-active Website pages.
The declaration simply informs the web browser that the document is written in the version 5 of the HTML mark up language. This makes sure that the web page is rendered well in accordance to today’s web standards.
We’re passionate about making programming accessible and exciting for everyone. Whether you’re just starting or looking to level up your skills, we offer simple, practical tutorials.