Introduction to HTML

HTML stands for HyperText Markup Language. It is the fundamental language used to create the structure and content of a web page. Think of it as the skeleton of a website. It provides the framework for text, images, videos, links, and other elements.

HTML uses a series of codes called tags to tell the web browser how to display content. Most tags have an opening tag and a closing tag. The content goes between them.

Example: <p>This is a paragraph.</p>

Basic Page Structure

Every HTML page must have a specific structure to be correctly rendered by a web browser.


<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!-- The visible content of the page goes here -->
  </body>
</html>

Here is a breakdown of the core elements:

<!DOCTYPE html>: Defines the document type and version of HTML (HTML5).
<html>: The root element of the entire page.
<head>: Contains metadata (non-visible information) such as title, CSS, or scripts.
<title>: Sets the title that appears in the browser tab.
<body>: Contains all the visible content of the web page.

Common Tags for Content

Headings

Used to define headings from the most important (H1) to the least important (H6).

Example: <h1>Main Heading</h1>

Paragraphs

Used for blocks of text.

Example: <p>This is a paragraph of text.</p>

Links

Used to create hyperlinks to other pages or resources using the <a> tag and the href attribute.

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

Images

Used to embed images using the <img> tag with src (path to the file) and alt (alternative text).

Example: <img src="image.jpg" alt="A beautiful landscape">

Lists

HTML provides two main types of lists: ordered (numbered) and unordered (bulleted).

Example of unordered list:


<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Tables

Used to display data in rows and columns.


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

Forms

Forms allow users to enter data (e.g., login, signup, search).


<form>
  Name: <input type="text" name="username"><br>
  Email: <input type="email" name="email"><br>
  <input type="submit" value="Submit">
</form>

Types of HTML Tags

There are two main types of HTML tags:

Paired (Container) Tags: These have an opening tag and a closing tag, with content inside. Example: <p>This is a paragraph.</p>
Empty (Self-Closing) Tags: These do not wrap content and do not need a closing tag. Example: <img src="photo.jpg" alt="A photo"> or <br> for a line break.

Attributes in HTML

Attributes provide extra information about elements. They usually appear in the opening tag. Examples include:

href → specifies a link’s destination (used in <a>).
src → specifies the path to an image (used in <img>).
alt → provides alternative text for images.
id → assigns a unique identifier to an element.
class → assigns a reusable style or group.

Semantic HTML

Semantic tags describe the meaning of content. They make pages easier to read for both developers and search engines.

<header>: Defines the top section of a page.
<nav>: Defines navigation links.
<article>: Represents an independent piece of content.
<section>: Groups related content together.
<footer>: Defines the bottom section of a page.


<header>
  <h1>My Blog</h1>
</header>

<nav>
  <a href="#home">Home</a> |
  <a href="#about">About</a>
</nav>

<section>
  <article>
    <h2>First Post</h2>
    <p>This is an article about HTML basics.</p>
  </article>
</section>

<footer>
  <p>Copyright © 2025</p>
</footer>

Video Tutorial

Watch this practical video guide to solidify your understanding of HTML structure and syntax:

Conclusion

HTML is the building block of every website. Once you understand how tags, attributes, and structure work, you can begin creating web pages. As you advance, you can combine HTML with CSS for styling and JavaScript for interactivity.

Search This Blog

cmpnote blog