What is HTML ?

HTML (HyperText Markup Language) is markup language used to create and structure content on the web. It tells the web browser how to display text, images, and other media.

HTML consists of multiple elements (tags) that wrap around content to appear in a certain way. For example, you can enclose text in tags to make it a heading, a paragraph, a list, or a link.

Why We Use HTML

Structure and Content: HTML provides skeleton of a webpage. Without it, a browser wouldn't know the difference between a heading, a paragraph, or a footer.
SEO (Search Engine Optimisation): Using the correct HTML tags is crucial for SEO. For instance, using <h1> for the main title helps search engines understand the most important topic of your page, whereas just making text big with CSS does not convey that semantic meaning.
Accessibility: Semantic HTML (using tags like <nav>, <article>, <address>) helps screen readers and assistive technologies interpret the page structure for users with disabilities.
Compatibility: It is the universal language of the web. Every web browser is built to interpret HTML to render websites.

What is an HTML Tag

An HTML tag is a keyword enclosed in angle brackets (like <html>) that tells a web browser how to structure and display content.

Types of HTML Tags (Based on single or paired tags)

Container Tags (Paired Tags): These wrap around content. They must have an opening and a closing tag.
- Example: <html>, <head>, <body>, <title>, <h1>, <footer>, <address>.
Void Tags (Self-Closing Tags): These do not wrap around content and do not have a closing tag. They often contain attributes to define their behaviour.
- Examples: <meta> (used for character sets and viewport settings), <img> (used to embed images), <br>, <hr> etc.

Types of HTML Tags (Based on space taken on a webpage)

Block-level Elements
- Behaviour: These elements always start on a new line and take up the full width available (they stretch out to the left and right as far as they can). They effectively create a "block" of content.
  
  Some Examples: <div>, <p> (paragraph), <h1> to <h6> (headings), <ul> (unordered list), <li> (list item), <footer>, <address>.

Inline Elements
- Behaviour: These elements do not start on a new line. They only take up as much width as the content inside them.
  
  Some Examples: <span>, <a> (links), <img> (images), <strong>, <em>.

Skeleton Of an HTML Page

A sample html webpage is mentioned below

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>....</title>
</head>
<body>
    ......
</body>
</html>

1. The `<!DOCTYPE html>` Declaration

It tells the browser which version of HTML the page is written in. <!DOCTYPE html> specifically declares that the document is HTML5, the modern standard.

2. The `<html>` Root Element

It is the container for all other HTML elements. It signifies the beginning and end of the HTML document.

3. The `<head>` Section

It is a container for metadata (data about data). Content inside <head> is not displayed visibly on the webpage itself. It contains settings and links to resources.
- <meta charset="UTF-8" />: Sets the character encoding to UTF-8, which covers almost all characters and symbols in the world.
- <meta name="viewport" ... />: Essential for responsive design. It tells the browser to render the width of the page to the width of the device's screen (important for mobile phones).
- <title>: Sets the text that appears in the browser tab or the favorites/bookmarks bar.

4. The `<body>` Section

It is a container for the visible content of the webpage. Everything you want the user to see (text, images, links, videos) goes inside the <body> tags.

Commonly used HTML Tags

1. Text Formatting Tags

<h1> to <h6>: These represent headings. <h1> is the most important (main title), and <h6> is the least important.
<p>: Defines a paragraph of text.
<span>: A generic inline container used to style a specific section of text without breaking to a new line.
<br>: Inserts a single line break.

2. Structural & Container Tags

<div>: A generic block-level container used to group other elements together for styling or layout purposes.
<header>, <footer>, <main>, <section>: Semantic versions of <div> that describe the content they contain (e.g., the footer of a page).

3. Links and Media

<a> (Anchor): Creates a hyperlink to another web page, file, or location within the same page.
- Example: <a href="https://google.com">Link</a>
<img> (Image): Embeds an image. It is a self-closing tag (no closing </img>).
- Example: <img src="image.jpg" alt="Description">

<ul>: Defines an unordered list (bullet points).
<ol>: Defines an ordered list (numbered).
<dl>: Defines a description list.

Below is an example of HTML webpage using all the tags listed above.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>first webpage</title>
  </head>
  <body>
    <!-- Heading Tags -->
    <h1>Welcome to My First Webpage</h1>
    <h2>Common HTML Tags Demo</h2>

    <!-- Paragraph and Inline Text -->
    <p>
      This is a paragraph containing a
      <span style="color: blue">blue span</span> of text.
    </p>

    <!-- Links and Images -->
    <a href="https://google.com" target="_blank">Click here to go to Google</a>
    <br />
    <img src="https://via.placeholder.com/150" alt="Placeholder Image" />

    <!-- Lists -->
    <h3>My Favorite Fruits (Unordered List)</h3>
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>

    <!-- Container -->
    <div>This is a div container holding this text.</div>
  </body>
</html>

Understanding HTML Tags and Elements

What is HTML ?

Why We Use HTML

What is an HTML Tag

Types of HTML Tags (Based on single or paired tags)

Types of HTML Tags (Based on space taken on a webpage)