DEV Community

Abhay Singh Kathayat
Abhay Singh Kathayat

Posted on

HTML: A Comprehensive Guide

#tutorial #webdev #design #html

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.

Top comments (0)