Welcome to HTML

HTML (HyperText Markup Language) is the skeleton of every website. It’s not a programming language, it’s a markup language used to define the structure and content of a webpage.

1. What is HTML?

HTML is made up of elements. Each element is wrapped in tags, like this:

<p>This is a paragraph</p>

2. Basic Document Structure

Every HTML file follows a similar skeleton, Popularly called the html Boilerplate. Here's what a complete document looks like:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is my first webpage.</p>
  </body>
</html>

🧠 Explanation:

<!DOCTYPE html> tells the browser you're using HTML5.
<html> is the root element.
<head> holds invisible stuff: title, metadata, styles, scripts.
<body> holds the visible content of the page.

3. Elements and Attributes

Elements can have attributes that give extra info. Example:

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

href is an attribute that sets the link destination.

4. Nesting Elements

You can place elements inside others. This is called nesting. Example:

<div>
  <h1>My Title</h1>
  <p>This is a paragraph.</p>
</div>

5. Self-Closing Tags

Some tags don’t wrap content, they close themselves. Examples:

<br />   <!-- Line break -->
<hr />   <!-- Horizontal rule -->
<img src="logo.png" alt="Site Logo" />

6. Comments in HTML

<!-- This is a comment -->

Comments are ignored by browsers, they help you or other devs understand your code.

🔁 Summary

HTML defines the structure of webpages.
Tags wrap content. Most come in pairs, like <p>...</p>.
The base structure includes <html>, <head>, and <body>.
Attributes like href or src modify elements.
Some elements are self-closing, like <br /> or <img />.
Comments are non-visible notes:

Next up, Let's dive into headings and pagragraphs and how to set text priority in our files

Lessons

Lesson 1: Intro to HTML