← Back to Languages

HTML

#5
GitHub#1
IEEESpectrum#10
JetBrains#3
markup languageweb developmentfrontendstructuredocument

Markup Language

HTML (HyperText Markup Language)

Overview

HTML is a markup language for describing the structure and content of web pages. It uses tags to markup elements such as text, images, and links, constructing the framework of web pages in a format that browsers can understand. It is the foundational technology for all websites.

Details

HTML was developed by Tim Berners-Lee in 1993 and has evolved as a foundational technology for the World Wide Web. Current HTML5 includes features such as semantic elements, enhanced form functionality, multimedia elements, Canvas, and Web APIs, enabling the development of richer web applications.

HTML's design philosophy focuses on content and structure, delegating visual presentation to CSS. This achieves improved accessibility, SEO optimization, and maintainability.

Code Examples

Basic HTML 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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Main Title</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Article Title</h2>
            <p>Article content...</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2025 Site Name</p>
    </footer>
</body>
</html>

Semantic Elements

<article>
    <header>
        <h1>Article Title</h1>
        <time datetime="2025-01-15">January 15, 2025</time>
    </header>
    
    <section>
        <h2>Section 1</h2>
        <p>Content...</p>
    </section>
    
    <aside>
        <h3>Related Articles</h3>
        <ul>
            <li><a href="#related1">Related Article 1</a></li>
            <li><a href="#related2">Related Article 2</a></li>
        </ul>
    </aside>
</article>

Form Elements

<form action="/submit" method="post">
    <fieldset>
        <legend>Contact Form</legend>
        
        <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" rows="5" required></textarea>
        
        <label for="category">Category:</label>
        <select id="category" name="category">
            <option value="general">General</option>
            <option value="support">Support</option>
            <option value="feedback">Feedback</option>
        </select>
        
        <input type="checkbox" id="newsletter" name="newsletter">
        <label for="newsletter">Subscribe to newsletter</label>
        
        <button type="submit">Submit</button>
    </fieldset>
</form>

Multimedia Elements

<!-- Image -->
<figure>
    <img src="example.jpg" alt="Description" width="800" height="600">
    <figcaption>Image caption</figcaption>
</figure>

<!-- Video -->
<video controls width="800" height="450">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <p>Your browser does not support video.</p>
</video>

<!-- Audio -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    <p>Your browser does not support audio.</p>
</audio>

Tables

<table>
    <caption>Sales Data</caption>
    <thead>
        <tr>
            <th scope="col">Month</th>
            <th scope="col">Sales</th>
            <th scope="col">YoY Growth</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100,000</td>
            <td>+5%</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$120,000</td>
            <td>+8%</td>
        </tr>
    </tbody>
</table>

HTML5 New Features

<!-- Canvas -->
<canvas id="myCanvas" width="400" height="200">
    Your browser does not support Canvas.
</canvas>

<!-- Data List -->
<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>

<!-- Details/Summary -->
<details>
    <summary>Show details</summary>
    <p>Detailed content is displayed here.</p>
</details>

Advantages and Disadvantages

Advantages

  • Standardized Structure: World standard as foundational web technology
  • Low Learning Curve: Basic tags are easy to understand
  • Accessibility: Improved accessibility through semantic elements
  • SEO-Friendly: Structure easily understood by search engines
  • Cross-Platform: Works on all browsers
  • Rich Features: Many new features added in HTML5

Disadvantages

  • Limited Styling: Visual presentation depends on CSS
  • Lack of Dynamic Features: Interactive features require JavaScript
  • Browser Compatibility: New features may not be supported in older browsers
  • Complex Structure Management: Difficult to manage structure in large-scale sites

Key Links

Ranking Information

  • Overall Ranking: 5th
  • GitHub Usage: 1st
  • IEEE Spectrum: 10th
  • JetBrains Developer Survey: 3rd

HTML is an essential markup language that all web developers should master as the foundation of web development.