DEV Community

Abhay Singh Kathayat
Abhay Singh Kathayat

Posted on

HTML: A Comprehensive Guide

HTML: A Comprehensive Guide


Introduction to HTML
HTML (HyperText Markup Language) is the standard language for creating web pages. It provides the basic structure of a website, which is enhanced and modified by other technologies like CSS and JavaScript.


Basic Structure of an HTML Document

An HTML document starts with a <!DOCTYPE html> declaration, followed by <html> and <head> tags, and the main content goes inside <body>.

<!DOCTYPE html>
<html>
  <head>
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

HTML Tags and Elements

HTML consists of tags, which enclose content. Tags can be opening (<tag>) and closing (</tag>), or self-closing (<tag />). For example:

  • <h1> to <h6>: Headings
  • <p>: Paragraphs
  • <a>: Links
  • <img>: Images
  • <div> and <span>: Structural elements

Text Formatting Tags

  • <b>: Bold
  • <i>: Italic
  • <u>: Underline
  • <strong>: Important text (semantic bold)
  • <em>: Emphasized text (semantic italic)
  • <mark>: Highlighted text
  • <small>: Smaller text
  • <sup>: Superscript
  • <sub>: Subscript

Lists

  1. Ordered List
   <ol>
     <li>Item 1</li>
     <li>Item 2</li>
   </ol>
Enter fullscreen mode Exit fullscreen mode
  1. Unordered List
   <ul>
     <li>Item 1</li>
     <li>Item 2</li>
   </ul>
Enter fullscreen mode Exit fullscreen mode
  1. Definition List
   <dl>
     <dt>HTML</dt>
     <dd>HyperText Markup Language</dd>
   </dl>
Enter fullscreen mode Exit fullscreen mode

Links

  • Internal Links: <a href="#section">Go to Section</a>
  • External Links: <a href="https://example.com">Visit Example</a>
  • Open in New Tab: <a href="https://example.com" target="_blank">Visit Example</a>

Images

  • Basic: <img src="image.jpg" alt="Description">
  • Width & Height: <img src="image.jpg" width="300" height="200" alt="Description">

Tables

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

Forms

Forms collect user input.

<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>

  <input type="submit" value="Submit">
</form>
Enter fullscreen mode Exit fullscreen mode

Form Elements:

  • <input>: Text, email, password, radio, checkbox, file, etc.
  • <textarea>: Multiline input.
  • <select>: Dropdown menus.

Semantic HTML

Semantic elements clearly define their purpose. Examples:

  • <header>: Introductory content
  • <nav>: Navigation links
  • <section>: Thematic grouping of content
  • <article>: Self-contained content
  • <aside>: Sidebar
  • <footer>: Footer content

Multimedia

  • Audio: <audio controls><source src="audio.mp3" type="audio/mpeg"></audio>
  • Video: <video controls><source src="video.mp4" type="video/mp4"></video>

HTML5 Features

  1. Canvas: Used for graphics and animations.
   <canvas id="myCanvas" width="200" height="100"></canvas>
Enter fullscreen mode Exit fullscreen mode
  1. Geolocation: Get user location.
   navigator.geolocation.getCurrentPosition(function(position) {
     console.log(position.coords.latitude, position.coords.longitude);
   });
Enter fullscreen mode Exit fullscreen mode
  1. Local Storage: Store data locally.
   localStorage.setItem("key", "value");
   console.log(localStorage.getItem("key"));
Enter fullscreen mode Exit fullscreen mode

Meta Tags

Meta tags provide metadata about the HTML document.

  • <meta charset="UTF-8">: Character set
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Responsive design
  • <meta name="description" content="An overview of HTML">

Responsive Design with HTML

  • Use the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag.
  • Combine with CSS for flexible layouts using percentages, vh/vw, and media queries.

Common Attributes

  1. Global Attributes:

    • id: Unique identifier
    • class: Class name(s)
    • style: Inline styles
    • title: Tooltip text
    • lang: Language of content
  2. Event Attributes:

    • onclick: JavaScript to run on click
    • onchange: Triggered on input change
    • onmouseover: Triggered when hovering

Best Practices

  • Use semantic elements for clarity and accessibility.
  • Keep your HTML code well-organized and properly indented.
  • Validate your HTML using tools like the W3C Validator.
  • Optimize images and use alt attributes for accessibility.
  • Minimize inline styles; use external CSS instead.

This comprehensive guide provides a strong foundation for HTML. Combined with CSS and JavaScript, HTML becomes a powerful tool for creating dynamic and responsive web applications.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay