HTML
The Complete Beginner’s Guide to Building Web Pages
When we visit a website, we see text, images, buttons, menus, forms, and many other elements. But have you ever wondered how all these elements are actually created and arranged on a webpage? The foundation behind this structure is HTML.
HTML stands for HyperText Markup Language. It is the standard markup language used to create and structure content on the web. HTML is not a programming language like JavaScript or Python. Instead, it is a markup language that tells the browser what each piece of content means and how it should be structured.
A simple way to understand modern web development is to think of a website as a human body. HTML is the skeleton, CSS is the appearance, and JavaScript is the behavior. HTML creates the structure, CSS makes that structure attractive, and JavaScript makes the website interactive.
Understanding the Basic HTML Structure
Every HTML document normally starts with a basic structure. The <!DOCTYPE html> declaration tells the browser that the document is using modern HTML. The <html> element is the root of the document, while <head> contains information about the webpage and <body> contains the content that users see.
A basic HTML document looks like this:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head><body>
<h1>Hello World</h1>
<p>Welcome to my website.</p>
</body>
</html>The <title> element defines the name shown in the browser tab. The <h1> creates a main heading, while the <p> creates a paragraph.
Understanding this structure is one of the first important steps for anyone beginning web development.
HTML Tags and Elements
HTML uses tags to describe content. For example, <h1> represents a heading and <p> represents a paragraph.
When we write:
<h1>Welcome to My Website</h1><h1> is the opening tag, Welcome to My Website is the content, and </h1> is the closing tag. Together, they form an HTML element.
Not every HTML element has a closing tag. Elements such as <img>, <br>, <hr>, <input>, <meta>, and <link> are known as void elements because they do not normally contain content between opening and closing tags.
Attributes: Adding More Information
HTML elements can have attributes. Attributes provide additional information about an element.
For example:
<a href="https://example.com">Visit Website</a>Here, href is an attribute that tells the browser where the link should go.
Images also use attributes:
<img src="profile.jpg" alt="Profile Photo">The src attribute specifies the image location, while alt provides alternative text that describes the image.
Attributes are extremely important because they allow HTML elements to have additional information and functionality.
Headings and Paragraphs
HTML provides six levels of headings, from <h1> to <h6>. The <h1> represents the highest-level heading, while <h6> represents a lower-level heading.
A well-structured webpage should use headings logically. For example, a page might have an <h1> for the main topic, <h2> elements for major sections, and <h3> elements for subsections.
Paragraphs are created using the <p> element. They are used to organize normal text content into readable sections.
HTML also provides elements such as <strong> for important text, <em> for emphasized text, <mark> for highlighted text, <del> for deleted text, and <small> for smaller text.
Links: Connecting the Web
One of the most powerful features of HTML is the ability to create hyperlinks.
The <a> element is used to create links:
<a href="https://example.com">Visit Website</a>Links can connect different pages within your own website or take users to external websites.
For example:
<a href="about.html">About</a>This can connect the current page to an about.html page.
The web itself is built around this idea of connecting documents and resources through hyperlinks.
Images and Visual Content
Images make websites more useful and attractive. HTML provides the <img> element for displaying images.
<img src="images/profile.jpg" alt="Profile Photo">The src attribute tells the browser where the image is located, while the alt attribute describes the image.
The alt attribute is particularly important for accessibility. If an image cannot load, the alternative text can still communicate what the image represents. Screen readers can also use this information to help visually impaired users understand the content.
Lists in HTML
HTML provides two main types of lists: unordered lists and ordered lists.
An unordered list uses <ul> and normally displays bullet points:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>An ordered list uses <ol> and normally displays numbered items:
<ol>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn JavaScript</li>
</ol>The <li> element represents each individual list item.
Lists are useful for navigation menus, feature lists, instructions, skills, categories, and many other types of content.
Tables for Structured Data
Tables are used when information needs to be displayed in rows and columns.
A basic table contains <table>, <tr>, <th>, and <td> elements.
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr> <tr>
<td>John</td>
<td>20</td>
</tr>
</table>Here, <tr> represents a table row, <th> represents a heading cell, and <td> represents a data cell.
For more meaningful structure, tables can also use <thead>, <tbody>, and <tfoot>.
Forms: Collecting User Information
Forms are one of the most important parts of interactive websites. Login pages, registration pages, contact forms, search boxes, checkout pages, and feedback forms all depend on HTML forms.
A basic form can look like this:
<form><label for="name">Name</label>
<input type="text" id="name"> <label for="email">Email</label>
<input type="email" id="email"> <button type="submit">Submit</button></form>
The <form> element defines the form, <label> describes an input, <input> collects information, and <button> allows the user to perform an action.
HTML provides many different input types, including text, email, password, number, date, time, checkbox, radio, file, and more.
HTML Form Validation
HTML also provides built-in form validation. Attributes such as required, minlength, maxlength, min, max, and pattern can be used to control the information users enter.
For example:
<input
type="email"
required
placeholder="Enter your email"
>The required attribute tells the browser that the field cannot be left empty.
For a password:
<input
type="password"
minlength="8"
required
>This tells the browser that the password should contain at least eight characters.
Later, JavaScript can be used to create more advanced validation and custom error messages.
Div and Span
Two elements that beginners commonly encounter are <div> and <span>.
A <div> is a general block-level container that can be used to group larger sections of content.
<div>
<h2>About Me</h2>
<p>I am learning web development.</p>
</div>A <span> is an inline container that is useful when you want to target a small part of text.
<p>
My favorite language is <span>JavaScript</span>.
</p>Although both are useful, modern HTML encourages developers to use semantic elements whenever a more meaningful element is available.
Semantic HTML: Giving Meaning to Structure
Semantic HTML means choosing HTML elements based on their meaning rather than simply using generic containers everywhere.
Important semantic elements include <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>.
Get santhana luxmy’s stories in your inbox
Join Medium for free to get updates from this writer.
For example:
<header>
<h1>My Website</h1>
</header><nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</nav><main>
<section>
<h2>About Us</h2>
<p>Welcome to our website.</p>
</section>
</main><footer>
<p>© 2026 My Website</p>
</footer>
This structure is much easier for developers, browsers, search engines, and assistive technologies to understand.
HTML Media
Modern HTML can also work with multimedia content.
Audio can be added using <audio>:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>Video can be added using <video>:
<video controls width="500">
<source src="video.mp4" type="video/mp4">
</video>These features allow websites to include multimedia without depending entirely on external plugins.
IDs and Classes
HTML elements can have id and class attributes.
An id normally identifies one unique element:
<h1 id="title">My Website</h1>A class can be shared by multiple elements:
<p class="text">Hello</p>
<p class="text">Welcome</p>These attributes are especially important when working with CSS and JavaScript.
CSS can target a class like this:
.text {
color: blue;
}JavaScript can find an element by its ID:
document.getElementById("title");This is one of the main ways HTML connects with CSS and JavaScript.
Connecting HTML with CSS and JavaScript
HTML alone creates structure, but modern websites need more than structure.
CSS is used to control the visual appearance of a website, including colors, fonts, spacing, layouts, animations, and responsive design.
CSS can be connected using:
<link rel="stylesheet" href="style.css">JavaScript is used to create behavior and interaction. It can respond to button clicks, validate forms, update content, communicate with APIs, and perform calculations.
JavaScript can be connected using:
<script src="script.js" defer></script>This gives us the basic frontend development relationship:
HTML → Structure
CSS → Design
JavaScript → Behavior
Together, these three technologies form the foundation of frontend web development.
The DOM: How JavaScript Understands HTML
When the browser loads an HTML document, it creates something called the DOM, or Document Object Model.
The DOM represents the HTML document as a tree-like structure.
For example, a simple document might be represented as:
Document
└── html
├── head
└── body
├── h1
└── pJavaScript can interact with this structure.
For example:
document.querySelector("h1").textContent = "Hello World";This allows JavaScript to find an HTML element and change its content.
Understanding the DOM becomes very important when you move from HTML into JavaScript.
Accessibility Matters
Writing HTML is not only about making a page look correct. A good webpage should also be usable by as many people as possible.
Using semantic HTML, meaningful headings, descriptive image alt text, proper form labels, and real buttons and links helps improve accessibility.
For example, instead of using a random <div> as a button, use:
<button>Submit</button>Instead of having an input without a description, use:
<label for="email">Email</label>
<input id="email" type="email">Good HTML makes websites easier to understand and use.
A Complete HTML Page
Once you understand the basic concepts, you can combine them into a complete webpage.
<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <meta
name="viewport"
content="width=device-width, initial-scale=1.0"
> <title>My Website</title> <link rel="stylesheet" href="style.css"></head><body> <header> <h1>My Website</h1> <nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav> </header> <main> <section> <h2>Welcome</h2> <p>
Welcome to my first website.
</p> <img
src="profile.jpg"
alt="Profile photo"
width="200"
> </section> <section> <h2>My Skills</h2> <ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul> </section> <section> <h2>Contact Me</h2> <form> <label for="name">Name</label>
<input
type="text"
id="name"
required
> <label for="email">Email</label>
<input
type="email"
id="email"
required
> <button type="submit">
Send
</button> </form> </section> </main> <footer> <p>© 2026 My Website</p> </footer> <script src="script.js" defer></script></body></html>
This small example already combines many important HTML concepts: document structure, metadata, navigation, headings, paragraphs, images, lists, forms, labels, inputs, buttons, semantic sections, and connections to CSS and JavaScript.
