React Learning Path - Part 1 [Learning the HTML Basics]

Before the Beginning

First off, congratulations! You’re about to learn something that’s not only useful but also surprisingly simple. The good news? You don’t need to be a tech genius, a coding prodigy, or even someone who knows what “hypertext” means (seriously, who came up with that word?). HTML—short for HyperText Markup Language—is basically the skeleton of every webpage. It’s the stuff that holds everything together, like the frame of a house or the bones in your body (except less creepy).

Think of it this way: if a website were a pizza, HTML would be the dough. It’s not the flashy toppings or the gooey cheese, but without it, you’d just have a pile of ingredients on a plate. And nobody wants that. HTML is here to make sure your text, images, and buttons don’t end up looking like a digital dumpster fire.

Now, I know what you’re thinking: “But I’m not a coder! I can barely set up my Wi-Fi!” Relax. HTML is so beginner-friendly that even your grandma could probably learn it (and she still calls the computer “the typing box”). It’s all about using simple tags—little pieces of code that tell your browser what to do. Tags are like sticky notes for your website: “Put this here,” “Make that bold,” “Add a picture of a cat right there.” Easy, right?

So, grab a cup of coffee (or tea, or whatever fuels your brain), and let’s break this down into bite-sized, non-scary chunks. By the end of this, you’ll be slinging HTML tags like a pro, and who knows? You might even impress your friends. Or at least your dog. Let’s get started!

The Basic Structure of an HTML Document

Every HTML document follows a specific structure. Think of it as the skeleton of a webpage—without it, your content would be a chaotic mess. Here’s what every HTML file must include:

1. The Doctype Declaration

The very first line in an HTML document is:

<!DOCTYPE html>

This tells the browser, “Hey, this is an HTML5 document.” It ensures that your code is interpreted correctly.

2. The `<html>` Tag

The <html> tag wraps all the content on your page.

<html>

</html>

3. The `<head>` Section

The <head> tag contains metadata—information about your page that isn’t directly displayed to users but is essential.

<head>
  <title>My First Webpage</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
</head>

<title> sets the title of the webpage (shown on the browser tab).
<meta charset="UTF-8"> ensures proper character encoding.
<link> connects external stylesheets (CSS) to style your page.

4. The `<body>` Section

The <body> tag contains everything visible on your webpage—text, images, videos, and more.

<body>
  <h1>Welcome to My Website</h1>
  <p>This is my first webpage.</p>
</body>

Text Formatting in HTML

HTML provides tags to structure and format text.

Headings: Organizing Content

HTML has six heading tags, from <h1> (largest) to <h6> (smallest).

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>

Use headings to create a logical structure. <h1> should be the main title, followed by <h2>, <h3>, and so on.

Paragraphs: Structuring Text

Use <p> to create paragraphs.

<p>This is a paragraph. It wraps text neatly.</p>

Bold and Italics: Emphasizing Text

<strong> makes text bold and conveys importance.
<em> italicizes text and adds emphasis.

<p>This is <strong>bold</strong> text.</p>
<p>This is <em>italic</em> text.</p>

Line Breaks and Horizontal Rules

<br> adds a line break.
<hr> inserts a horizontal line, useful for separating sections.

<p>First line.<br>Second line.</p>
<hr>
<p>Next section.</p>

Adding Links and Images

Hyperlinks: Connecting Pages

Use the <a> tag to create links.

<a href="https://www.example.com">Visit Example</a>

The href attribute defines the URL.

Images: Displaying Pictures

Use the <img> tag to add images.

<img src="image.jpg" alt="Description of the image">

src specifies the image file.
alt provides alternative text in case the image doesn’t load.

Lists: Organizing Information

Unordered Lists (Bullets)

Use <ul> for unordered lists and <li> for list items.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Ordered Lists (Numbered)

Use <ol> for ordered lists.

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

Tables: Displaying Data

Tables organize content in rows and columns.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

<tr> creates a row.
<th> defines a header cell.
<td> represents a data cell.

Forms: Getting User Input

Forms allow users to enter information.

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Submit</button>
</form>

<label> improves accessibility.
<input> is used for text fields, checkboxes, and more.
<button> creates a clickable button.

Semantic HTML: Structuring Your Page Correctly

Semantic HTML improves readability and SEO by using meaningful tags.

<header>
  <h1>Welcome</h1>
</header>
<section>
  <p>This is a section of content.</p>
</section>
<footer>
  <p>&copy; 2025 My Website</p>
</footer>

<header> represents the top section of a page.
<section> divides content into logical sections.
<footer> contains information like copyrights or links

Task

Here's a task for you to practice your HTML skills. This task will help you apply the basic structure, text formatting, links, images, lists, and semantic HTML concepts in a hands-on way. Let’s keep it simple and fun! The solution will be provided later.

Task: Create a Personal Homepage

Your goal is to create a basic HTML webpage that serves as your personal homepage. Imagine it’s a digital “About Me” card you could share with friends or family. You’ll use the key elements from the blog to build it.

Instructions:

Set Up the Basic Structure: Use the correct doctype declaration and include the <html>, <head>, and <body> tags.
Add a Title: In the <head> section, set the page title to “My Personal Homepage” (this will show in the browser tab).
Create a Header: Use a semantic <header> tag with an <h1> heading that says “Welcome to [Your Name]’s Homepage” (replace [Your Name] with your actual name).
Write an Introduction: Add a paragraph <p> in a <section> tag introducing yourself. For example, “Hi, I’m [Your Name]! I’m learning HTML and this is my first webpage.”
Format Some Text: Make one word in your paragraph bold (using <strong>) and another word italicized (using <em>).
Add a Fun Link: Include a hyperlink <a> to a website you like (e.g., a favorite blog, game, or social media page). For example, “Check out my favorite site!”
List Your Interests: Create an unordered list <ul> with 3-5 things you enjoy (e.g., hobbies, favorite foods, or movies).

Tips:

Use a plain text editor (like Notepad, VS Code, or any code editor you have).
Save your file with a .html extension (e.g., homepage.html).
Open it in a web browser to see your creation!
Don’t worry about styling (CSS)—focus only on the HTML structure and content.

Example to Inspire You (Don’t Copy This Exactly!):

Final Thoughts

HTML is the backbone of the web, and now you understand its basics. You don’t need to memorize everything—just grasp how elements work and practice using them. The more you build, the more confident you’ll become.

So, open a text editor and start coding. Who knows? Your first simple page could be the start of something big.

Alert: Most of this content is written by an LLM. :'