Welcome to HTML Basics!
1. The Basics: What exactly is HTML?
HTML stands for HyperText Markup Language. Don't let the big name scare you—it's just the standard code used to build websites. Think of HTML as the skeleton of your web page that holds everything together!
Imagine you are building a brand new house. Before you can paint the walls or bring in the fancy furniture (which is what CSS does), you need to pour the concrete foundation and put up the wooden frame. HTML is that essential wooden frame. It tells the web browser where the main text goes, where the images sit, and how the entire page is structured.
Every single website you visit every day, from Google to YouTube, uses HTML at its core. By learning this, you are taking your very first step into the amazing world of web development.
The Starter Code (Boilerplate)
Every single HTML file needs a basic starting structure before you can type anything else. Think of this as the blank canvas you set up on your easel before you start painting:
<!-- This tells the browser we are using modern HTML5 -->
<!DOCTYPE html>
<!-- The root container for the whole page, set to English -->
<html lang="en">
<head>
<!-- Handles special characters like emojis and accents -->
<meta charset="UTF-8">
<!-- The text that shows up in the browser tab -->
<title>My First Webpage</title>
</head>
<body>
<!-- The main heading visible on the page -->
<h1>Hello, World!</h1>
</body>
</html>What Do These Pieces Mean?
<!DOCTYPE html>: This simply tells the web browser, "Hey, I'm using the newest version of HTML!" Without this, older browsers might get confused and display your page incorrectly.<html>: The giant wrapper that holds all your website's code. Notice thelang="en"part? That helps translation tools know your page is in English.<head>: The "behind-the-scenes" area. It holds background info like the page title, links to styling files, and hidden data for Google search results. Regular visitors don't see this part on the actual screen.<body>: The main stage! Absolutely everything your visitors will actually see—the text, the pictures, the videos, the links—must go inside the body tags.
2. Styling Your Text
Just like using Microsoft Word or Google Docs, HTML lets you format your text easily using specific "tags". A tag is just a command surrounded by angle brackets, like <this>.
Most tags come in pairs: an opening tag to start the effect, and a closing tag (with a forward slash) to stop the effect.
Headings (Titles)
Headings act as your titles and subtitles. There are exactly six sizes, from <h1> (the biggest and most important) all the way down to <h6> (the smallest).
Think of it like a newspaper. The massive headline on the front page is your H1. The titles of the smaller articles are H2s, and the tiny sub-sections inside those articles are H3s.
<!-- Use H1 ONLY ONCE per page for the main title -->
<h1>Main Title</h1>
<!-- Use H2 for major sections -->
<h2>Section Title</h2>
<!-- Use H3 for smaller sub-topics -->
<h3>Sub-section Title</h3>Line-by-line breakdown:
<h1>: Opens the biggest heading. You place your text inside, and close it with</h1>so the rest of the page doesn't turn into a giant title!<h2>: Creates a slightly smaller title for splitting your page into organized sections.<h3>: Creates an even smaller subtitle inside of an H2 section.
Paragraphs & Bold Text
Use the <p> tag when writing normal paragraphs of reading text. Want to make something stand out? You can make it bold or italicized directly inside the paragraph!
<p>This is a normal paragraph of text.</p>
<p>This text is <strong>super important and bold</strong>.</p>
<p>This text is <em>italicized for emphasis</em>.</p>Line-by-line breakdown:
<p>: Creates a standard block of text. The browser automatically adds a little invisible space above and below it so it looks neat.<strong>: Wraps around specific words to make them visually thick and bold. Screen readers for blind users will also read this word with a stronger voice!<em>: Stands for "emphasis". It tilts the text (italicizes it) to show it is important.
3. Making Lists
Lists are the best way to keep your information neat and organized. Instead of writing a massive, confusing wall of text, you can break things down into easy-to-read points.
There are two main types of lists in HTML. You can make dotted bullet points, or you can make numbered lists.
Bullet Points (Unordered Lists)
Use the <ul> (Unordered List) tag for a bulleted list. Think of this like a grocery list where the exact order doesn't matter. Each specific item inside gets an <li> (List Item) tag.
<!-- Create the bullet-point container -->
<ul>
<!-- Add individual items inside -->
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>Line-by-line breakdown:
<ul>: Opens the unordered list box. Everything inside here will get a black dot next to it.<li>: Defines a single item in the list. You must open and close this for every new line you want to make.
Numbered Lists (Ordered Lists)
Use the <ol> (Ordered List) tag to automatically number your list. This is absolutely perfect for step-by-step tutorials or ranking your top 10 favorite movies!
<!-- Create the numbered list container -->
<ol>
<!-- Add individual steps inside -->
<li>Wake up</li>
<li>Drink water</li>
<li>Write some code</li>
</ol>Line-by-line breakdown:
<ol>: Opens the ordered list box. The browser is smart and will automatically count 1, 2, 3 for you!<li>: Defines the individual step. If you add a new list item in the middle later, HTML will automatically fix all the numbers for you.
4. Adding Links & Images
What is a website without pictures and clickable links? It would just be a boring digital textbook! Let's bring your page to life by connecting it to the rest of the internet.
Clickable Links
Use the <a> (Anchor) tag to link to other pages. The tag alone isn't enough; you have to give it extra instructions called "attributes" to tell it exactly where to go.
<a href="https://www.google.com" target="_blank">Take me to Google!</a>Line-by-line breakdown:
<a>: Starts the clickable link.href="https://...": Stands for "Hypertext Reference". This is the actual destination URL the user will be sent to when they click.Take me to Google!: This is the visible blue text the user will actually see and click on with their mouse.</a>: Ends the link, so the text after this goes back to normal.
Pro Tip: Adding target="_blank" is an awesome trick. It forces the link to open neatly in a brand new browser tab, which keeps the user from losing your website!
Pictures
The <img> tag puts an image directly on your page. Unlike most tags, the image tag is "self-closing", meaning it doesn't need an </img> at the end!
<img src="logo.png" alt="CBS Docs Logo" width="200">Line-by-line breakdown:
<img>: Tells the browser to display a picture here.src="logo.png": Stands for "source". This is the file path or URL where the picture is saved.alt="CBS Docs Logo": Stands for "alternative text". If the image breaks or the internet is slow, this text appears instead. It is also read aloud to blind users!width="200": Forces the image to be exactly 200 pixels wide so it doesn't accidentally take up the entire screen.
5. Creating Tables
Sometimes you need to show data in a grid, exactly like a mini Microsoft Excel spreadsheet. We use an HTML table for this!
Tables can look a little confusing at first because they require a lot of nested tags (tags inside of tags), but once you understand the pattern, they are very easy to build.
How Tables Work
<table>: The main box holding everything. It is the outer border of your spreadsheet.<tr>: A Table Row. Think of this as slicing the table horizontally. You build tables row-by-row, from top to bottom.<th>: A Table Header. Used only in the very first row to label your columns. It automatically makes the titles bold and centered!<td>: Table Data. These are the actual individual cells holding your regular information inside the rows.
<table border="1">
<!-- Row 1: The Headers -->
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<!-- Row 2: The First Person -->
<tr>
<td>Ali</td>
<td>22</td>
</tr>
<!-- Row 3: The Second Person -->
<tr>
<td>Sara</td>
<td>20</td>
</tr>
</table>Line-by-line breakdown:
<table border="1">: Starts the table and draws a simple 1-pixel black line around the cells so we can actually see the grid.<tr>: Opens the very first horizontal row.<th>Name</th>: Creates a bold column title called "Name".<td>Ali</td>: In the next row, we place standard data ("Ali") directly under the "Name" column.
6. User Forms
Forms are incredibly important. They are how websites actually collect information from you. Every login screen, Google search bar, and "Contact Us" page is built using an HTML form.
Think of a form like a digital envelope. You fill it with information, seal it, and hand it to the website's server to process.
A Simple Login Form
Everything related to the form goes inside the main <form> wrapper tag. You use <input> tags to create the actual blank boxes for people to type in. By changing the type attribute, you change how the box behaves!
<!-- The main envelope -->
<form action="/submit" method="POST">
<!-- The Username Section -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter name" required>
<br><br>
<!-- The Password Section -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<!-- The Submit Button -->
<button type="submit">Login</button>
</form>Line-by-line breakdown:
<form action="..." method="POST">: Creates the form.actiontells it where to send the data securely, andPOSTis a secure method for sending sensitive info.<label>: The text label sitting next to the box so the user knows what to type.<input type="text">: Creates a standard typing box.placeholder="Enter name": Puts faded gray helper text inside the box before the user starts typing.<button type="submit">: The clickable button that packages up all the typed data and fires it off to the server!
Notice the word required? That is a great safety trick! It stops users from clicking submit if the box is blank! Also, using type="password" automatically turns their typing into hidden dots so nobody peeking over their shoulder can read their secret password.
7. Modern HTML (Semantic Tags)
In the old days of the internet, developers used boring, generic <div> (divider) tags for absolutely everything. The code became a massive, confusing mess called "div soup".
Now, modern HTML5 introduces Semantic Tags. "Semantic" just means the tag's name actually describes what it does! Instead of putting a website's navigation inside an unnamed box, we put it inside a clearly labeled <nav> box. This helps search engines (like Google) read your site faster, and it helps screen readers understand your page much better.
The Smart Tags
<header>: The very top banner of your site (holds logos and main titles).<nav>: Your navigation bar holding all your main clickable links.<main>: The single most important chunk of content on the current page.<article>: A standalone piece of content, like a news story or a blog post, that makes sense all by itself.<section>: A specific chunk of related content (like a "Contact Info" section).<footer>: The very bottom strip of the page, usually reserved for copyright dates and legal links.
<!-- The top banner -->
<header>
<h1>My Tech Blog</h1>
</header>
<!-- The primary content -->
<main>
<!-- An independent blog post -->
<article>
<h2>Why Modern HTML is Awesome</h2>
<p>It makes your code super easy to read!</p>
</article>
</main>
<!-- The bottom strip -->
<footer>
<p>© 2026 CodeBySohaib</p>
</footer>Line-by-line breakdown:
<header>: Groups the introductory content safely at the top.<main>: Houses the core focus of the webpage. You should only ever have one<main>tag per page!<footer>: Keeps the end-of-page information logically separated from the rest of the reading content.
8. Adding Audio & Video
In the past, embedding videos required downloading clunky third-party plugins like Flash Player, which crashed all the time. Today, modern HTML lets you embed multimedia directly into your web pages with native, built-in tags!
Playing Audio
Use the <audio> tag for things like podcasts or background music. Adding the magic word controls gives you a beautifully styled play button, pause button, and volume slider right out of the box!
<!-- The audio player -->
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
Oops! Your browser doesn't support the audio player.
</audio>Line-by-line breakdown:
<audio controls>: Tells the browser to build a sound player with visible user buttons.<source src="...">: Links the actual MP3 file from your computer.Oops!...: This is a fallback message. It only appears if someone is using a 20-year-old browser that doesn't understand HTML5 audio!
Playing Video
The <video> tag works almost exactly the same way as audio. The cool thing is that you can also set exactly how wide or tall you want the video player frame to be directly inside the tag.
<!-- The video player -->
<video width="400" controls>
<source src="tutorial.mp4" type="video/mp4">
Oops! Your browser doesn't support HTML video.
</video>Line-by-line breakdown:
<video width="400" controls>: Builds a video player exactly 400 pixels wide, complete with play, pause, and fullscreen buttons.<source src="...">: Tells the player exactly which MP4 movie file to load.</video>: Closes the player component.