When you visit your favorite website, whether it’s a news blog, an online store, or a social media platform, you’re interacting with a combination of different technologies. But at the core of every web page lies one fundamental language: HTML (HyperText Markup Language).
If you’ve ever wondered how web pages are structured or wanted to build your own website, learning HTML is the first step. In this guide, we’ll break down HTML basics in a way that’s relatable, and educational—so even if you have zero coding experience, you’ll walk away with a strong understanding of HTML and its role in web development.
What is HTML?
HTML is the skeleton of the web. It provides structure to web pages, allowing browsers to interpret and display content in an organized way. Think of it like the blueprint of a house—HTML lays out where everything goes, from headings and paragraphs to images and links.
But HTML alone isn’t enough to create a visually appealing website. It works alongside CSS (for styling) and JavaScript (for interactivity) to bring web pages to life.
Why is HTML Important?
Imagine visiting a website where everything is just a block of plain text—no formatting, no images, no clickable links. That’s what the internet would look like without HTML!
Here’s why HTML is essential:
- It organizes content – HTML tells the browser what is a heading, a paragraph, a list, or a link.
- It makes the web accessible – Proper HTML structure helps people with disabilities navigate web content using screen readers.
- It’s the foundation of web development – Every web developer, whether frontend or backend, needs to know HTML.
The Basic Structure of an HTML Document
Before we dive into individual elements, let’s take a look at the fundamental structure of an HTML page.
HTML Elements and Tags
Now that we understand the basic structure, let’s explore HTML elements and their uses.
HTML consists of elements, which are written using tags. Tags tell the browser how to interpret the content.
Opening and Closing Tags vs. Self-Closing Tags
HTML elements are usually written with an opening tag and a closing tag.
Example:
- <p> is the opening tag.
- </p> is the closing tag.
- Everything inside is the content of the paragraph.
However, some elements do not need a closing tag—these are called self-closing (or void) elements.
Example:
The <img> tag does not have a closing tag because it does not wrap around content—it just inserts an image.
Other self-closing tags include:
- <br> (line break)
- <hr> (horizontal rule)
- <meta> (metadata)
<input> (form input fields)
These elements are self-closing because they do not require additional content within them—just attributes to define their behavior.
You might ask, what are attributes?, well before we talk about attributes, let’s look at some other html elements and their uses
Common HTML Elements and Their Uses
Now that we’ve covered the basics of HTML elements, let’s take a look at some of the most commonly used ones and how they function in web development.
1. Headings (<h1> to <h6>)
Headings help structure content by defining different sections.
2. Paragraphs (<p>)
Used to display blocks of text.
Fun fatct: A good website should never have text without proper paragraph tags, otherwise, it looks like an unstructured mess!
3. Lists (<ul> and <ol>)
HTML allows you to create both unordered lists (bullets) and ordered lists (numbers).
- <ul> creates bullet points.
- <ol> creates numbered lists.
Imagine writing a grocery list—an unordered list makes sense since the order doesn’t matter. But if you’re listing steps to a recipe, an ordered list is better!
4. Links (<a>)
Hyperlinks connect different web pages.
Clicking this link takes you to Google. Without <a> tags, the internet wouldn’t be the connected web of pages we know today!
5. Images (<img>)
Images make web pages visually appealing.
- src specifies the image file location.
- alt provides alternative text for accessibility.
Without an alt text, visually impaired users may not know what the image represents.
6. Tables (<table>)
Tables organize data neatly.
- <tr> creates a row.
- <th> defines a header.
- <td> represents individual cells.
If you’re making a schedule or price list, tables are a great choice!
Forms: Getting User Input
Forms allow users to submit information.
- <input> collects user input.
- <button> submits the form.
Think about login pages or signup forms—HTML forms are behind them!
Now that we have had a look at some common html elements, let’s now talk about attributes
HTML Attributes: Adding Extra Information to Tags
Before we wrap up, let’s talk about attributes. Attributes provide additional information about an element. They always appear as key-value pairs, meaning they follow this format:
For example:
Here, href=”https://www.google.com” is an attribute that tells the browser where the link should go when clicked.
How Attributes Work
- Attributes are added inside the opening tag
- They always come in key-value pairs (e.g., href=”URL”)
- Most attributes work on multiple tags, but some are tag-specific
Common HTML Attributes
1. The href Attribute (Used for Links)
The href attribute is used in <a> (anchor) tags to specify the URL of a hyperlink.
This makes the text “Click here” a clickable link.
2. The src Attribute (Used for Images)
The src (source) attribute is used in <img> tags to specify the image file location.
Without src, the image won’t display.
3. The alt Attribute (Used for Accessibility)
The alt (alternative text) attribute is also used in <img> tags to describe the image.
If the image fails to load, the text in the alt attribute appears instead. It also helps visually impaired users who use screen readers.
4. The id and class Attributes (Used for Styling and JavaScript)
Both id and class are used to apply styles (CSS) or add functionality via JavaScript.
id=”intro” is unique—no other element on the page should have the same id.
class=”text” can be used on multiple elements.
5. The style Attribute (Used for Inline CSS)
Instead of writing CSS separately, you can apply styles directly using the style attribute.
This makes the text blue and sets the font size to 18px.
6. The target Attribute (Used for Links)
The target attribute controls how a link opens.
target=”_blank” opens the link in a new tab.
target=”_self” (default) opens the link in the same tab.
HTML + CSS + JavaScript: The Perfect Trio
While HTML is essential, CSS (Cascading Style Sheets) is used to style web pages, and JavaScript adds interactivity.
Example of adding CSS:
And adding JavaScript:
Conclusion
HTML is the foundation of web development. It gives structure to web pages, making them readable and functional.
Key Takeaways:
- HTML elements are written with opening and closing tags, except for self-closing tags like <img> and <br>.
- Attributes provide extra information to elements and always appear as key-value pairs (e.g., href=”URL”).
- Some attributes, like class and id, can be used on multiple elements, while others, like src, are tag-specific.
If you’re just starting out, keep experimenting! The more you practice, the easier it gets. So go ahead, build your first web page, and take your first step into the world of web development! 🚀
Want to learn everything about HTML and more? Visit odurinde.com! We don’t just teach—we make sure you understand, practice, and master web development in the most interactive and engaging way possible. Whether you’re a complete beginner or looking to level up your skills, we’ve got you covered! 🌍🔥
Google