Understanding HTML Tags and Elements

What is HTML ?

HTML is like a skeleton for web pages. It defines the structure but does not define the colour or style of the website.

HTML stands for HyperText Markup Language.

• HyperText: It allows you to click links to jump around the web.

• Markup: It uses "marks" (tags) to tell the browser, "This is a heading," "This is a paragraph," or "This is an image." Without HTML, a browser wouldn't know if a piece of text is a title or just a random sentence.

---

An HTML Tag

A tag is like a set of bookends. It tells the browser where a specific type of content starts and ends.

<p> 
Hello World !
</p>

• Opening Tag: <p> (The "Start" signal)

• Content: "Hello World!" (The actual stuff you see)

• Closing Tag: </p> (The "End" signal—notice the forward slash /)

---

HTML Tag vs Element

People often use these words interchangeably, but there is a slight distinction:

• The Tag: Just the code bits (<p> or </p>).

• The Element: The entire package from the opening tag to the closing tag, including the content inside.

Analogy: If the tag is the bread, the element is the whole sandwich.

---

Self Closing (Void) tag

Some tags do not need a closing tag because it does not wrap around the text. These tags just exist at a specific spot.

• Example: <img src="dog.jpg"> (An image doesn't "wrap" anything, it is the content).

• Example: <br> (A simple line break).

---

Block-level vs. Inline Elements

This is how elements sit next to each other on your webpage.

• Block-level: These are greedy. They take up the full width available and always start on a new line. Think of them as large boxes stacked on top of each other.

  • Examples: <div>, <h1>, <p>, <ul>.

• Inline: These are friendly. They only take up as much width as necessary and sit side-by-side with other elements.

  • Examples: <span>, <a>, <strong>.

---

Commonly used HTML tags