Hey there! If you're new to web development and wondering what HTML is, don't worry — you're in the right place. In this blog, I will break down HTML (Hypertext Markup Language) for you in the simplest terms possible. You’ll learn why it’s important, how it works, and some hands-on examples to get you started.
Let’s dive right in! 🙌
What is HTML?
HTML stands for Hypertext Markup Language, and it's the standard language used to create web pages. If you've ever visited a website (which I assume you have), you're looking at HTML. Every web page you see on the internet is built using HTML.
It’s like the skeleton of a web page. While the page you visit might have cool colors, fonts, and animations (which are added with CSS and JavaScript), the core structure is always HTML.
Think of HTML like a recipe. Each element in the recipe is a specific ingredient (or piece of content) wrapped inside a tag. These tags tell your browser how to display the different parts of the page.
How Does HTML Work?
HTML is made up of tags. Tags come in pairs: one to start an element and another to end it. Here’s a basic example:
<p>This is a paragraph.</p>
In the example above:
<p>is the opening tag.</p>is the closing tag.The text in between ("This is a paragraph.") is the content.
<img> tag, which is used for images. We’ll see more examples of this later.Basic Structure of an HTML Document
Before we get into creating cool stuff, let’s understand the basic structure of any HTML document. When you write an HTML file, it looks something like this:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>
Let me explain each part:
<!DOCTYPE html>: This tells the browser that you’re using HTML5 (the latest version of HTML).<html>: This is the root tag for the entire HTML document.<head>: This section contains information about the page, such as the title and metadata (more on that later).<title>: This is the title of the page that appears on the browser tab.<body>: This is where the actual content of the page goes — all the text, images, buttons, etc., will go inside the body.<h1>: This is a heading tag, andh1is the largest heading.<p>: This is a paragraph tag, used to define text paragraphs.
Now that we know the basic structure, let’s move on to some useful HTML tags you’ll need for building web pages.
Common HTML Tags You’ll Use A Lot
Headings
HTML has six levels of headings, from <h1> (the biggest) to <h6> (the smallest).
<h1>This is a Big Heading (h1)</h1>
<h2>This is a Smaller Heading (h2)</h2>
<h3>This is Even Smaller (h3)</h3>
These are used to organize content on your page. For example, the title of a blog post might be an <h1>, while section titles within the post might be <h2> or <h3>.
Paragraphs
Use the <p> tag to create paragraphs of text.
<p>This is a paragraph. It's just normal text that you might read in an article or blog post.</p>
Links
Want to add a clickable link to another page? You can use the <a> tag. The "a" stands for anchor.
<a href="https://www.google.com">Visit Google</a>
In this example:
href="https://www.google.com"is the attribute that specifies the URL you want the link to point to.The text
Visit Googleis what the user will click on.
Images
To add an image to your webpage, you’ll use the <img> tag. Unlike other tags, <img> doesn’t need a closing tag.
<img src="image.jpg" alt="A description of the image">
src="image.jpg"is the path to the image.alt="A description of the image"provides an alternative text if the image can’t be displayed (this is important for accessibility).
Lists
HTML gives us two types of lists: unordered lists (bullet points) and ordered lists (numbered).
Unordered List:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Ordered List:
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<ul>: Unordered list (creates a list with bullets).<ol>: Ordered list (creates a numbered list).<li>: List item (each item in the list).
Forms
Forms allow users to input data. Here's a simple example of a "Contact Us" form:
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Submit</button>
</form>
action="/submit": Where the form data should be sent.method="POST": The method for sending the data (POST or GET).<input>: For text input.<textarea>: For larger text input (like messages).<button>: A clickable button to submit the form.
A Full Example
Let’s bring everything we’ve learned into one simple HTML file:
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Website</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>Hi! I'm learning HTML, and this is my very first web page.</p>
<h2>Here are a few of my favorite websites:</h2>
<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.wikipedia.org">Wikipedia</a></li>
<li><a href="https://www.github.com">GitHub</a></li>
</ul>
<h2>Contact Me</h2>
<form action="/submit" method="POST">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Your Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Your Message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Send</button>
</form>
</body>
</html>
Conclusion
And that’s it! Now you have a solid understanding of what HTML is and how you can use it to create the structure of a webpage. You’ve learned about headings, paragraphs, lists, links, images, and forms. These are the core building blocks for any website.
Keep practicing, experiment with the code, and soon enough, you’ll be creating full websites! There’s a lot more to explore in HTML, but with this foundation, you’re ready to start your journey into web development.
Happy coding!