HTML (HyperText Markup Language) is the foundation of every website. It defines the structure and content of web pages, allowing browsers to display text, images, links, and multimedia in an organized way. Without HTML, web pages wouldn’t exist.
Most HTML tags come in pairs — an opening tag and a closing tag. The opening tag tells the browser where an element begins, and the closing tag (which includes a forward slash “/”) tells where it ends. For example:
This is a paragraph.
These paired tags help structure web content properly, ensuring that text, images, and other elements are displayed correctly on a webpage.Every HTML document follows a simple structure that tells the browser how to display a web page.
It begins with
head — contains information about the page, such as the title, links to CSS files, and meta data.
body — contains all the visible content like text, images, buttons, and links.
Example of HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
The <input> tag in HTML is used to create interactive fields where users can enter data, such as text, email, passwords, or numbers. It is one of the most commonly used form elements.
Below is an example of a simple input field where a user can type their name:
You can also change the type attribute of the <input> tag
to create different kinds of inputs — for example:
<input type="email"> → for email addresses<input type="password"> → for passwords<input type="number"> → for numbersThe <select> tag creates a drop-down list that allows users to pick from several options. Each choice inside the list is wrapped in an <option> tag.
Example: Choose your favorite programming language below 👇
You can use the name attribute to identify the select box in a form,
and add the multiple attribute if you want users to select more than one option.
The <button> tag is used to create clickable buttons on a webpage. Buttons make websites interactive and are often used to submit forms or trigger JavaScript functions.
Here are some common examples:
You can also use the onclick attribute to make a button perform actions using JavaScript.
For example:
<button onclick="alert('Hello, world!')">Click Me</button>
The <img> tag lets you add pictures to your website. You can use images from your own files or from the internet.
Here’s an example of how to add an image:
<img src="images/html-logo.png" alt="HTML Logo" width="200" height="200">
Example result 👇
💡 Tip: Always include the alt attribute so users with slow connections or screen readers
can understand what the image represents.
The <a> tag is used to add links to your webpage. You can use it to connect pages, download files, or link to external websites.
Example:
<a href="https://www.learn2code.com" target="_blank" title="Visit Learn2Code Website"> Visit Learn2Code </a>
Example result 👇
Visit Learn2Code
💡 Tip: Use target="_blank" carefully — it opens links in a new browser tab.
Always use meaningful link text so users know where they are going.
The <header> and <footer> tags define the top and bottom sections of a webpage. They help structure your page and make your code easier to read and maintain.
Here’s a simple example 👇
<header>
<h1>Welcome to Learn2Code</h1>
<nav>
<a href="#home">Home</a> |
<a href="#courses">Courses</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<p>This is the main content of the page.</p>
</main>
<footer>
<p>© 2025 Learn2Code. All rights reserved.</p>
</footer>
Example result 👇
This is the main content of the page.
💡 Tip: Every page can have its own header and footer. They help create a consistent layout across your entire website.
The id attribute gives an element a unique name, allowing you to target it with CSS or JavaScript. No two elements on a page should have the same ID.
Example:
<h2 id="intro">Welcome to Learn2Code</h2>
<p>Learn the basics of HTML, CSS, and JavaScript.</p>
<style>
#intro {
color: blue;
text-align: center;
}
</style>
Example result 👇
Learn the basics of HTML, CSS, and JavaScript.
💡 Tip: Use id when you want to target a single element.
For styling multiple elements, use a class instead.
The <li> tag defines a single list item. It is used inside <ul> (unordered lists) or <ol> (ordered lists).
Example of an Unordered List:
<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>
Example result 👇
Example of an Ordered List:
<ol> <li>Learn HTML</li> <li>Learn CSS</li> <li>Learn JavaScript</li> </ol>
Example result 👇
💡 Tip: Use <ul> for unordered lists and <ol> for ordered lists.
Each list item must always be inside an <li> tag.
The <ul> tag defines an unordered list. It displays a list of items with bullet points. Each item is written inside an <li> tag.
Example:
<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>
Example result 👇
💡 Tip: You can change the bullet style using CSS — for example:
ul {
list-style-type: square;
}
Other list styles include circle, disc, or none.
The <ol> tag is used to make an ordered (numbered) list. Each item inside must be wrapped in an <li> tag.
Example:
<ol> <li>Learn HTML</li> <li>Learn CSS</li> <li>Learn JavaScript</li> </ol>
Example result 👇
Using the type Attribute:
<ol type="A"> <li>First</li> <li>Second</li> </ol>
💡 type options include:
1 → Numbers (default)A → Uppercase lettersa → Lowercase lettersI → Roman numerals (uppercase)i → Roman numerals (lowercase)The <p> tag in HTML is used to define a paragraph of text. It helps to separate content into readable sections. Browsers automatically add some space before and after each paragraph to make the text look neat.
The <head> tag is used to contain important information about a webpage that is not shown directly on the page itself. It includes details such as the page title, links to stylesheets, scripts, and meta information (like description and keywords).
The <body> tag is used to define the main visible content of a webpage. Everything that appears on your screen — such as text, images, buttons, videos, and links — is placed inside the <body> tag.
In simple terms, the <head> is for information about the page, while the <body> is for what users actually see.