Skip to content

HTML

HTML (HyperText Markup Language) Breakdown

HTML (HyperText Markup Language) is the standard language for creating web pages. It defines a webpage's structure using elements enclosed in tags. HTML is not a programming language—it is a markup language that structures content.

1. Basic Structure of an HTML Document

A simple HTML file contains essential elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Explanation:

Element Description
<!DOCTYPE html> Declares the document type as HTML5.
<html lang="en"> The root element of the page, with lang="en" for English.
<head> Contains metadata like title, character encoding, and viewport settings.
<meta charset="UTF-8"> Sets character encoding to support special characters.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Makes the page responsive for mobile devices.
<title> Defines the title shown in the browser tab.
<body> Contains visible content (headings, text, images, etc.).
<h1> Main heading of the page.
<p> A paragraph of text.

2. HTML Elements & Tags

An HTML element consists of an opening tag, content, and a closing tag.

<tagname>Content</tagname>

Example:

<p>Hello, World!</p>

Some elements are self-closing (void elements):

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

Common HTML Elements:

Tag Description
<h1> to <h6> Headings (H1 is the largest, H6 is the smallest).
<p> Paragraphs.
<a href="URL"> Links to other pages.
<img src="URL" alt="Description"> Displays an image.
<ul> Unordered list (bullets).
<ol> Ordered list (numbers).
<li> List item (inside <ul> or <ol>).
<strong> Bold text (semantic).
<em> Italic text (semantic).
<br> Line break (self-closing).
<hr> Horizontal line (self-closing).
<div> Generic container (used for layout/styling).
<span> Inline container (used for styling parts of text).

3. HTML Forms (User Input)

Forms allow user interaction with a webpage.

<form action="/submit" 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>

    <button type="submit">Submit</button>
</form>

Form Elements:

Tag Description
<form> Defines a form for user input.
<input type="text"> Text input field.
<input type="email"> Email input field (validates email format).
<input type="password"> Password field (hides input).
<input type="checkbox"> Checkbox.
<input type="radio"> Radio button (only one can be selected per group).
<textarea> Multi-line text input.
<select> Dropdown menu.
<button> Clickable button.

Links (<a> tag) create hyperlinks to other pages.

<a href="https://example.com">Visit Example</a>

  • Open in new tab:

    <a href="https://example.com" target="_blank">Open in new tab</a>

  • Link to an email:

    <a href="mailto:someone@example.com">Send Email</a>

  • Link to a phone number:

    <a href="tel:+123456789">Call Us</a>

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

5. Images & Multimedia

Images (<img>)

<img src="image.jpg" alt="A beautiful landscape">
  • alt: Describes the image (important for accessibility & SEO).
  • width / height: Define image dimensions.

Videos (<video>)

<video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Audio (<audio>)

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

6. HTML Tables

Tables display structured data.

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>30</td>
    </tr>
</table>
Tag Description
<table> Creates a table.
<tr> Table row.
<th> Table header cell (bold).
<td> Table data cell.

7. HTML Layout (Div & Semantic Tags)

Using <div> (Generic Container)

<div class="container">
    <h2>My Section</h2>
    <p>This is some text inside a div.</p>
</div>

🔹 CSS is used to style <div> elements.

Using Semantic Tags

Semantic tags improve readability and SEO.

<header>Defines a page header</header>
<nav>Defines navigation links</nav>
<main>Main content of the page</main>
<article>Defines an article</article>
<section>Defines a section</section>
<footer>Defines a page footer</footer>

8. HTML Forms with JavaScript

<form onsubmit="return validateForm()">
    <input type="text" id="username">
    <button type="submit">Submit</button>
</form>

<script>
function validateForm() {
    let user = document.getElementById("username").value;
    if (user === "") {
        alert("Username cannot be empty!");
        return false;
    }
    return true;
}
</script>

9. Embedding External Content

YouTube Video

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoID"></iframe>

Google Maps

<iframe src="https://maps.google.com/maps?q=New+York&output=embed"></iframe>

10. Common HTML Mistakes

❌ Missing closing tags

<p>Missing closing tag

✅ Fixed

<p>Properly closed tag</p>

❌ Forgetting alt in images

<img src="image.jpg">

✅ Fixed

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

Key Takeaways

✅ HTML is structure, not style or behavior.
✅ Use semantic tags for better accessibility and SEO.
✅ Forms handle user input, often with JavaScript or backend processing.
✅ CSS & JavaScript enhance styling and interactivity.

Want more depth on any section? 🚀