HTML Tutorial - Learn All About HTML

Basic HTML Tags

HTML tags are the basic building blocks of any webpage. They define the structure, content, and behavior of the elements on the page. Below are the most important and widely used HTML tags with explanations:

<!DOCTYPE> Tag

The <!DOCTYPE> declaration defines the document type and version of HTML. It must appear at the very top of your HTML document.

<!DOCTYPE html>

<html> Tag

The <html> tag is the root element of an HTML page. It encloses all other elements on the page.

<html>
    <!-- All other content goes here -->
</html>

<head> Tag

The <head> tag contains metadata about the document, such as its title, links to stylesheets, and scripts. This information is not displayed directly on the webpage but is critical for the webpage’s functionality.

<head>
    <title>Page Title</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
</head>

<title> Tag

The <title> tag specifies the title of the webpage, which is displayed on the browser's tab. It must be included within the <head> tag.

<title>My Webpage</title>

<body> Tag

The <body> tag contains all the visible content on the webpage, such as text, images, videos, and links.

<body>
    <!-- Visible content goes here -->
</body>

<h1> to <h6> Tags

The heading tags <h1> to <h6> are used to define headings of different levels. <h1> defines the most important heading, and <h6> defines the least important.

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
<h4>Sub Section Heading</h4>
<h5>Smaller Heading</h5>
<h6>Smallest Heading</h6>

<p> Tag

The <p> tag is used to define paragraphs of text. It automatically adds space before and after the paragraph content.

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

<br> Tag

The <br> tag inserts a line break within text. It is a self-closing tag, meaning it does not have a closing counterpart.

This is line 1.<br>
This is line 2.

<hr> Tag

The <hr> tag creates a horizontal rule or a divider line across the webpage. It is also a self-closing tag.

<hr>

<a> Tag

The <a> tag defines a hyperlink. It uses the href attribute to specify the URL of the link destination.

<a href="https://example.com">Click here</a>

<img> Tag

The <img> tag is used to embed images on a webpage. It uses the src attribute to specify the image's URL and the alt attribute for alternative text in case the image cannot be displayed.

<img src="image.jpg" alt="Description of image">

<!-- Comment -->

HTML comments are added using the <!-- --> syntax. Comments are not displayed on the webpage but help explain the code to developers.

<!-- This is a comment -->

Text Formatting in HTML

HTML provides several tags for formatting text. These tags change the appearance, structure, or meaning of text content on a webpage. Below are the most common text formatting tags and their explanations:

<b> and <strong> Tags

<b> makes text bold for visual styling, while <strong> emphasizes the importance of the text (with bold styling by default).

<b>This text is bold.</b>
<strong>This text is important.</strong>

<i> and <em> Tags

<i> makes text italic for visual styling, while <em> emphasizes the importance of the text (with italic styling by default).

<i>This text is italic.</i>
<em>This text is emphasized.</em>

<mark> Tag

The <mark> tag highlights text by applying a background color (typically yellow).

<mark>This text is highlighted.</mark>

<small> Tag

The <small> tag renders text in a smaller font size than the surrounding text.

<small>This is small text.</small>

<del> and <ins> Tags

The <del> tag indicates deleted text with a strikethrough, while the <ins> tag indicates inserted text with an underline (depending on the browser).

<del>This text was removed.</del>
<ins>This text was added.</ins>

<sub> and <sup> Tags

The <sub> tag renders text as a subscript (below the baseline), while <sup> renders text as a superscript (above the baseline).

H<sub>2</sub>O (Water molecule)
X<sup>2</sup> (X squared)

<q> and <blockquote> Tags

The <q> tag is used for short inline quotes, while the <blockquote> tag is used for longer, block-level quotations.

<q>This is an inline quote.</q>
<blockquote>
    This is a block-level quote that spans multiple lines.
</blockquote>

<abbr> Tag

The <abbr> tag defines an abbreviation or acronym, and the title attribute provides the full term.

<abbr title="HyperText Markup Language">HTML</abbr>

<code>, <pre>, and <kbd> Tags

<code> displays inline code, <pre> preserves whitespace and displays preformatted text, and <kbd> is used to represent keyboard input.

<code>print('Hello World')</code>

<pre>
for i in range(5):
    print(i)
</pre>

<kbd>Ctrl + C</kbd>

<cite> Tag

The <cite> tag is used to reference the title of a work, such as a book, movie, or research paper. It renders the text in italic by default.

<cite>The Great Gatsby</cite>

<u> Tag

The <u> tag underlines text. Although it was deprecated in older HTML versions, it is now used to denote non-link underlined content.

<u>This text is underlined.</u>

Lists in HTML

HTML provides various ways to display content as lists. These lists help structure information and improve readability. Below are the main types of lists with examples:

<ul> (Unordered List)

An unordered list is used to display items in a bulleted format. Each item in the list is defined using the <li> tag.

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

Result:

<ol> (Ordered List)

An ordered list displays items in a numbered format. Each item is defined using the <li> tag. You can change the numbering type using the type attribute.

<ol type="1">  
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

<ol type="A">  
    <li>First</li>
    <li>Second</li>
</ol>

Result:

  1. First
  2. Second
  3. Third
  1. First
  2. Second

<dl>, <dt>, and <dd> (Description List)

A description list is used for key-value pairs, such as terms and their descriptions. The <dl> tag wraps the list, <dt> defines a term, and <dd> provides its description.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

Result:

HTML
HyperText Markup Language
CSS
Cascading Style Sheets

Nested Lists

HTML allows lists to be nested inside other lists to create multi-level structures.

<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Carrot</li>
            <li>Broccoli</li>
        </ul>
    </li>
</ul>

Result:

Attributes of <ol> (Ordered List)

The <ol> tag supports the following attributes:

<ol type="I" start="5" reversed>
    <li>Five</li>
    <li>Four</li>
</ol>

Result:

  1. Five
  2. Four

Compact List Example

Here’s a quick example of all list types together:

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

<ol>
    <li>Step 1</li>
    <li>Step 2</li>
</ol>

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
</dl>

Tables in HTML

Tables in HTML allow you to display data in a structured, grid-like format. Below are the key tags and attributes used in HTML tables:

<table> Tag (Table Container)

The <table> tag defines the entire table structure. Inside it, rows are created with <tr>, and data cells with <td> or <th> for headers.

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>24</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>22</td>
    </tr>
</table>

Result:

Name Age
Alice 24
Bob 22

<th> and <td> Tags

<th> (Table Header) defines a header cell, usually displayed in bold. <td> (Table Data) defines a regular data cell.

Table Borders

Use the border attribute to add borders to your table.

<table border="1">
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Laptop</td>
        <td>$800</td>
    </tr>
</table>

Adding Table Caption

The <caption> tag defines a title or caption for the table, which appears at the top.

<table border="1">
    <caption>Student Grades</caption>
    <tr>
        <th>Student</th>
        <th>Grade</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>A</td>
    </tr>
</table>

Result:

Student Grades
Student Grade
Alice A

Table Rows and Columns Spanning

The colspan attribute allows a cell to span multiple columns, and the rowspan attribute spans multiple rows.

<table border="1">
    <tr>
        <th colspan="2">Monthly Report</th>
    </tr>
    <tr>
        <td>Revenue</td>
        <td>$10,000</td>
    </tr>
    <tr>
        <td rowspan="2">Expenses</td>
        <td>$2,000</td>
    </tr>
    <tr>
        <td>$1,500</td>
    </tr>
</table>

Result:

Monthly Report
Revenue $10,000
Expenses $2,000
$1,500

<thead>, <tbody>, and <tfoot> Tags

The <thead> tag defines the header section, <tbody> contains the main data, and <tfoot> defines the footer.

<table border="1">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop</td>
            <td>$800</td>
        </tr>
        <tr>
            <td>Phone</td>
            <td>$500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$1,300</td>
        </tr>
    </tfoot>
</table>

Result:

Product Price
Laptop $800
Phone $500
Total $1,300

Styling Tables with CSS

You can style tables using CSS to improve their appearance.

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
    }
    th {
        background-color: #f2f2f2;
        text-align: left;
    }
</style>

Forms in HTML

HTML forms allow users to input data and interact with web pages. Forms are essential for login pages, search boxes, surveys, and more. Below are the key elements used in HTML forms:

<form> Tag

The <form> tag creates a form and typically includes attributes like action (where the form data will be sent) and method (GET or POST).

<form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
    <input type="submit" value="Submit">
</form>

Result:

Input Fields

The <input> tag creates various types of input elements using the type attribute.

<form>
    <input type="text" name="name" placeholder="Enter your name">  
    <input type="password" name="password" placeholder="Enter your password">  
    <input type="email" name="email" placeholder="Enter your email">  
    <input type="number" name="age" min="1" max="100">  
    <input type="date" name="dob">  
    <input type="checkbox" name="agree" value="yes"> I agree  
    <input type="radio" name="gender" value="male"> Male  
    <input type="radio" name="gender" value="female"> Female
    <input type="submit" value="Submit">  
</form>

Textarea

The <textarea> tag creates a multi-line text input.

<form>
    <label for="message">Message:</label>
    <textarea id="message" name="user_message" rows="4" cols="50"></textarea>
    <input type="submit" value="Send">
</form>

Select Dropdown

The <select> tag creates a dropdown menu with options defined using <option>.

<form>
    <label for="cars">Choose a car:</label>
    <select id="cars" name="car">
        <option value="volvo">Volvo</option>
        <option value="bmw">BMW</option>
        <option value="audi">Audi</option>
    </select>
    <input type="submit" value="Submit">
</form>

Buttons

The <button> tag creates a clickable button, which can be used inside or outside forms.

<form>
    <button type="submit">Submit Form</button>
    <button type="button" onclick="alert('Button Clicked')">Click Me</button>
</form>

File Input

The <input type="file"> allows users to upload files.

<form action="/upload" method="POST" enctype="multipart/form-data">
    <label for="file">Upload File:</label>
    <input type="file" id="file" name="user_file">
    <input type="submit" value="Upload">
</form>

Form Validation

You can use attributes like required, minlength, maxlength, and pattern for basic validation.

<form>
    <input type="text" name="username" required minlength="5" placeholder="Username (min 5 chars)">
    <input type="email" name="email" required placeholder="Valid Email">
    <input type="submit" value="Register">
</form>

Form Attributes

Semantic Elements in HTML

Semantic elements clearly describe their meaning to both the browser and the developer. They enhance readability and accessibility, improving SEO and page structure.

<header> Tag

The <header> tag represents the introductory content or a set of navigation links for a page or section.

<header>
    <h1>Welcome to My Website</h1>
    <nav>
        <a href="#home">Home</a> |
        <a href="#about">About</a> |
        <a href="#contact">Contact</a>
    </nav>
</header>

<nav> Tag

The <nav> tag is used to define a block of navigation links, typically at the top or side of a webpage.

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

<main> Tag

The <main> tag contains the primary content of a webpage. There should be only one <main> element per page.

<main>
    <article>
        <h2>Latest News</h2>
        <p>Here is the latest news from the tech world...</p>
    </article>
</main>

<article> Tag

The <article> tag defines independent, self-contained content that could stand alone (e.g., blog posts, news articles).

<article>
    <h2>My First Blog Post</h2>
    <p>This is my first blog post on web development...</p>
</article>

<section> Tag

The <section> tag defines a section of content, often grouped by topic. It can contain headers, paragraphs, and articles.

<section>
    <h2>About Us</h2>
    <p>We are a team of developers building innovative solutions.</p>
</section>

<aside> Tag

The <aside> tag defines content that is related to the main content but not essential, like sidebars, advertisements, or related links.

<aside>
    <h3>Related Articles</h3>
    <ul>
        <li><a href="#article1">How to Learn HTML</a></li>
        <li><a href="#article2">CSS Basics</a></li>
    </ul>
</aside>

<footer> Tag

The <footer> tag defines the footer of a section or page, containing copyright information, links, or contact details.

<footer>
    <p>Copyright © 2024 MyWebsite. All Rights Reserved.</p>
    <nav>
        <a href="#privacy">Privacy Policy</a> |
        <a href="#terms">Terms of Service</a>
    </nav>
</footer>

<figure> and <figcaption> Tags

The <figure> tag is used to group media content (e.g., images), and <figcaption> provides a caption for the content.

<figure>
    <img src="image.jpg" alt="Sample Image">
    <figcaption>This is a sample image.</figcaption>
</figure>

Multimedia Elements in HTML

HTML supports various multimedia elements to embed audio, video, and other interactive content directly within a webpage. Below are the essential multimedia elements:

<img> Tag

The <img> tag is used to embed images. It requires a src attribute to specify the image source and an alt attribute to describe the image.

<img src="example.jpg" alt="Sample Image" width="300" height="200">

Result:

Sample Image

<audio> Tag

The <audio> tag is used to embed audio files. It supports multiple audio formats like MP3, WAV, and OGG.

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

Result:

<video> Tag

The <video> tag is used to embed video files. You can include multiple formats for cross-browser compatibility.

<video width="400" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    Your browser does not support the video element.
</video>

Result:

<iframe> Tag

The <iframe> tag embeds another webpage or multimedia content (like YouTube videos) within the current page.

<iframe width="560" height="315" 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    title="YouTube video player" 
    frameborder="0" 
    allowfullscreen>
</iframe>

Result:

<embed> Tag

The <embed> tag allows you to embed external content, such as PDFs or Flash files, in the webpage.

<embed src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" 
    width="500" height="400" type="application/pdf">

<object> Tag

The <object> tag can be used to embed multimedia elements or external resources such as videos, images, or Java applets.

<object data="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" 
    type="application/pdf" width="500" height="400">
    Your browser does not support the object element.
</object>

<picture> Tag

The <picture> tag provides multiple sources for an image, allowing the browser to select the best option based on screen size or format.

<picture>
    <source srcset="image-small.jpg" media="(max-width: 600px)">
    <source srcset="image-large.jpg" media="(min-width: 601px)">
    <img src="image.jpg" alt="Responsive Image">
</picture>