To build a web pages that float around the internet the basic tool required is HTML, it acts as the skeleton to the web pages, it provides essential components to build the web pages like buttons, headings etc. In this article I will cover all the basics you must know before starting your web dev journey.
What is HTML
HTML stands for Hypertext Markup Language, well that feel complicated don’t worry its easy. Hypertext means which has a linkage to other webpages or cross reference to other resources. Markup stands for one which is designed for presenting text and elements.
Importance of HTML
Without HTML it is impossible to build web pages, it acts as a basic structure for every web pages all the visual components which are displayed on the web pages are from HTML later on for beautification and functionalities we use CSS and JS respectively.
Building blocks of HTML
The building blocks of HTML are tags and content, combination of tags and element is called as Element. These tags helps in creating the entities of the web pages like paragraph, input box, buttons etc. Lets look at each of those things in detail.
Anatomy of HTML
Tags in HTML
To create elements and place them on a webpage, we need to use tags. These tags are keywords provided by HTML, and each has its own function. Some of the tags include <h1>, <input/>, <br>, <hr>, <select>, and many more. There are a lot of tags, and you don't need to remember them all. Just learn the most commonly used ones and look up others as needed based on your problem.
HTML structure and Syntax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script></script>
</body>
</html>
Well after seeing this code you would be panicked, well its a boiler plate which means this piece of code is always repeated when you create a new HTML web page, well you don’t need to memorize it.
Lets break down each of these things
<!DOCTYPE html>: This tells the user agent i.e web browser or any application that current content is of type HTML.
<html>: This is the parent tag, specifying it is the root element of the document.
<head>: The HTML is divided into 2 parts
<head>and<body>, in<head>all the metadata i.e information about the current web page is mentioned.<meta>: This each individual tag provides the information about the web page, lets look at the example:
<meta name="author" content="Sumukha Sureban">: This tells to browser that author of this webpage is Sumukha Sureban.
<body>: In this tag all the main main content that should be displayed on the web page is written
<script>: Under this tag all the javascript code should be written, which will be functional to this document.
Most commonly used tags
<h1>to<h6>Define headings,
<h1>being the largest and<h6>the smallest.Example:
<h1>Main Heading</h1>
<p>Defines a paragraph.
Example:
<p>This is a paragraph.</p>
<a>Creates hyperlinks.
Example:
<a href="https://example.com">Visit Example</a>
<img>Embeds an image.
Example:
<img src="image.jpg" alt="Description">
<ul>and<li>Define an unordered list and its items.
Example:
<ul><li>Item 1</li><li>Item 2</li></ul>
<div>Defines a container for grouping elements.
Example:
<div class="container">Content</div>
<span>Used for inline styling or grouping.
Example:
<span style="color: red;">Red Text</span>
<form>Creates an HTML form for user input.
Example:
<form action="/submit" method="post"></form>
<input>Creates an input field.
Example:
<input type="text" placeholder="Enter your name">
<table>Creates a table.
Example:
<table><tr><td>Cell</td></tr></table>
HTML5
Well after the release of HTML5 lot changes took place, like semantic tags, embedding multimedia, form enhancements and much more, we will cover about semantic tags and embedding multimedia in this article and other things try to research on your own😉.
Semantic Tags
“The word semantic means giving specific meaning to particular element or an object.”
In context of HTML there are some newly introduced tags which were not present in the previous versions like <nav>, <article>, <section> and <main> .
<header>: Represents introductory information about the web page and it is present on top of the web page.<header> <h1>Welcome to My Website</h1> <nav> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </nav> </header><footer>: It is usually at the end of the document, in which it contains the copyright information, legal information links etc.<footer> <p>© 2025 Sumukha Sureban</p> <p>All views are personal</p> <a href="/privacy-policy">Privacy Policy</a> </footer><article>: It contains news, blog post or any other information.<article> <h2>HTML Basics</h2> <p>Subscribe to my newsletter.</p> </article><nav>: Nav represents for navigation in this section which helps in navigating within the pages or to different pages.<nav> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </nav><aside>: It contains related to the main content, such as ads, suggestions etc.<aside> <h3>Related Articles</h3> <ul> <li><a href="#article1">Learn html</a></li> <li><a href="#article2">HTML 101</a></li> </ul> </aside><video>: One of the most important change in html is multimedia, through <video> tag we can embed the video into the webpage.<video width="500" height="300" controls> <source src="kgf.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
Benefits:
Improved Accessibility: Helps screen readers understand the content better.
SEO Benefits: Search engines can better index and rank your content.
Cleaner Code: Makes your HTML more readable and meaningful.
Conclusion
“HTML is not a programming language, it is a markup language which helps in building web pages as it provides the core structure components like buttons, texts and more“