Comprehensive HTML 5 Minutes (Revision) Tutorial with hands-on Lessons

Created: 29th Aug 24 3 Views
Review needed
Verified
Loading...
Loading...
Comments

Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page using elements.

Basic Structure

Every HTML document should have the following basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <!-- Your content here -->
</body>
</html>

Let's break down the structure:

  • <!DOCTYPE html>: Declares that this is an HTML5 document
  • <html>: The root element of the HTML page
  • <head>: Contains meta information about the document
  • <meta charset="UTF-8">: Specifies the character encoding for the document
  • <meta name="viewport">: Ensures proper rendering on mobile devices
  • <title>: Specifies a title for the document
  • <body>: Contains the visible page content

Headings

HTML has six levels of headings, from <h1> (most important) to <h6> (least important).

<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>

Try it:

Paragraphs

Paragraphs are defined with the <p> tag.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Try it:

Text Formatting

HTML provides several elements for formatting text:

<b>Bold text</b>
<strong>Important text</strong>
<i>Italic text</i>
<em>Emphasized text</em>
<mark>Marked text</mark>
<small>Smaller text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript text</sub>
<sup>Superscript text</sup>

Try it:

Links

Links are created with the <a> tag. The href attribute specifies the URL of the page the link goes to.

<a href="https://www.example.com">This is a link</a>
<a href="https://www.example.com" target="_blank">This link opens in a new tab</a>

Try it:

Images

Images are added with the <img> tag. The src attribute specifies the path to the image, and the alt attribute provides alternative text for the image.

<img src="image.jpg" alt="Description of image">
<img src="image.jpg" alt="Description of image" width="300" height="200">

Try it:

Lists

HTML supports ordered (numbered) and unordered (bulleted) lists.

Unordered List

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

Ordered List

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Description List

<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

Try it:

Tables

Tables are defined with the <table> tag. Rows are defined with the <tr> tag, header cells with the <th> tag, and data cells with the <td> tag.

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

Try it:

Forms

Forms are used to collect user input. The <form> element defines an HTML form.

<form action="/submit-form" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>

    <input type="submit" value="Submit">
</form>

Try it:

Semantic Elements

HTML5 introduced semantic elements that give meaning to the structure of web pages:

  • <header>: Defines a header for a document or a section
  • <nav>: Defines a set of navigation links
  • <main>: Specifies the main content of a document
  • <article>: Defines an independent, self-contained content
  • <section>: Defines a section in a document
  • <aside>: Defines content aside from the page content
  • <footer>: Defines a footer for a document or a section
<header>
    <h1>Website Title</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content goes here.</p>
    </article>

    <aside>
        <h3>Related Links</h3>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>&copy; 2023 Your Website. All rights reserved.</p>
</footer>

Try it:

HTML Entities

HTML entities are used to display reserved characters in HTML:

Character Entity Name Entity Number
< &lt; &#60;
> &gt; &#62;
& &amp; &#38;
" &quot; &#34;
' &apos; &#39;

Try it:

HTML Comments

HTML comments are not displayed in the browser, but they can help document your HTML source code.

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- This is another comment -->

Try it:

Comments & Discussion

Facing issues? Have questions? Post them here! We're happy to help!

Latest Posts
More Posts
    Random Posts