Diving into HTML Basic
Rehanuz Zaman
Founder & Executive Director at Mindy | Innovation Strategist | Idea Consultant | Brain Stormer | ICCCAD Youth Fellow
If you’ve ever wondered how websites are created, you’ve probably heard of something called HTML. Don’t worry if it sounds technical—HTML is just a way to tell your web browser how to display content. Think of it as the skeleton of a website. In this blog post, we’ll break down the basics of HTML in a simple, easy-to-understand way. By the end, you’ll have a good idea of how it all works!
What is HTML?
HTML stands for HyperText Markup Language. It’s a coding language used to create and structure content on the web. Every website you visit uses HTML to display text, images, links, and more. The good news? It’s not as scary as it sounds! Let’s dive into some of the key concepts.
1. Creating Paragraphs and Formatting Text
When you write a blog or an article, you break your content into paragraphs. In HTML, you use the <p> tag to create a paragraph. For example:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
You can also make your text stand out by formatting it. Here’s how:
The <strong> and <em> tags are similar to <b> and <i>, but they also add extra meaning for screen readers, making your content more accessible.
2. Headings and Text Size
Headings help organize your content. HTML has six levels of headings, from <h1> (the biggest) to <h6> (the smallest). For example:
html
Copy
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>
You can also make text smaller using the <small> tag:
<p>This is normal text. <small>This is smaller text.</small></p>
3. Lists: Ordered and Unordered
Lists are great for organizing information. HTML has two types of lists:
Example:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<ul>
<li>Bullet point</li>
<li>Another bullet point</li>
</ul>
You can also add line breaks with <br> and buttons with <button>.
领英推荐
4. Creating Links
Links are what make the web “web-like.” To create a link, use the <a> tag with the href attribute. For example:
<a >Visit Example</a>
You can even open links in a new tab using the target="_blank" attribute:
<a target="_blank">Open in New Tab</a>
5. Adding Images
Images make websites visually appealing. To add an image, use the <img> tag with the src attribute. You can use online images, local images, or images stored in folders. Example:
<img src="https://www.example.com/image.jpg" alt="Description of image">
<img src="images/local-image.jpg" alt="Local image">
The alt attribute is important—it describes the image for screen readers and if the image doesn’t load.
6. Forms: User Input
Forms let users interact with your website, like logging in or signing up. HTML provides tags like <input>, <button>, <select>, and <option> to create forms. Here’s a simple login form:
<form>
<label>Username:</label>
<input type="text">
<label>Password:</label>
<input type="password">
<button type="submit">Login</button>
</form>
7. The Structure of an HTML Document
Every HTML document has a basic structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
</body>
</html>
8. Putting It All Together
Now that you know the basics, try creating a simple webpage! Start with the structure, add some headings, paragraphs, and maybe a list or two. Experiment with links and images. The more you practice, the more comfortable you’ll get.
Final Thoughts
HTML is the foundation of every website, and learning it is the first step to understanding how the web works. Don’t worry if it feels overwhelming at first—take it one step at a time. Before you know it, you’ll be creating your own web pages!
Happy coding! ??