Previous

What is HTML and Overview

Next

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It defines the structure and content of a web page using a set of tags and attributes.
Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
    <a href="https://example.com">Visit Example Website</a>
</body>
</html>

Explanation

  • <!DOCTYPE html> declares the document type and version of HTML.
  • <html> wraps the entire content of the web page.
  • <head> contains meta-information and links to external resources.
  • <title> sets the title displayed in the browser tab.
  • <body> contains the visible content of the web page.
  • <h1>, <p>, and <a> are tags for heading, paragraph, and link elements respectively.

HTML Elements and Tags

HTML elements are the building blocks of a web page defined by tags. Tags are enclosed in angle brackets and typically come in pairs (opening and closing).

Example

<p>This is a <strong>strong</strong> and <em>emphasized</em> text.</p>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<img src="image.jpg" alt="Description of the image">

 

Explanation

  • <strong> and <em> are inline elements for emphasizing text.
  • <ul> and <li> create an unordered list with list items.
  • <img> embeds an image with src specifying the image file and alt providing alternative text for accessibility.

Text Formatting

HTML provides tags to format text such as making it bold, italicized, underlined, subscript, superscript, etc.

Example

<p>This is <strong>bold</strong>, <em>italic</em>, <u>underlined</u>, <sub>subscript</sub>, and <sup>superscript</sup> text.</p>

Links and Images

Links (<a> tags) are used to navigate between web pages or to external resources. Images (<img> tags) are used to embed images into a web page.

Example:

<a href="https://example.com">Visit Example Website</a>
<img src="image.jpg" alt="Description of the image">

Lists

Lists in HTML include unordered lists (<ul>), ordered lists (<ol>), and list items (<li>).

Example

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

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

Tables

Tables (<table>) in HTML organize data into rows (<tr>), columns (<th> for headers, <td> for data cells), and sections (<thead>, <tbody>, <tfoot>).

Example

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

These examples and explanations cover the fundamental aspects of HTML, providing a solid foundation for learners to understand how to structure and create content for web pages using markup language. Each topic introduces essential tags, attributes, and concepts necessary for building web pages effectively.

Previous Next