DEV Community

Cover image for HTML is Not Just You Think...
Suraj Kumar
Suraj Kumar

Posted on

HTML is Not Just You Think...

#html #webdev #frontend #learntocode

1. Introduction

What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It helps browsers display content such as text, images, links, tables, forms, audio, and video.

HTML is not a programming language. It is a markup language that defines the structure of web content. HTML works together with CSS for styling and JavaScript for interactivity.

Why HTML is Important

HTML is the foundation of every website and web application. It helps developers organize content properly and allows browsers to display webpages correctly.

Modern HTML also supports multimedia, semantic elements, accessibility, and responsive web design.

Uses of HTML

HTML is used for:

  • Creating websites
  • Building forms
  • Embedding multimedia
  • Creating tables and lists
  • Designing web interfaces
  • Linking webpages

2. History of HTML

HTML was created by Tim Berners-Lee in 1991 while working at CERN. The first version of HTML contained simple tags for headings, paragraphs, and links.

Over time, HTML evolved from HTML 1.0 to HTML5 with support for multimedia, semantic elements, APIs, and responsive design.

Evolution of HTML

HTML 1.0 

<h1>Hello World</h1>
<p>Basic HTML page.</p>
Enter fullscreen mode Exit fullscreen mode

HTML 2.0 

<form>
  <input type="text" placeholder="Enter Name">
</form>
Enter fullscreen mode Exit fullscreen mode

HTML 3.2 

<table border="1">
  <tr>
    <td>HTML</td>
    <td>CSS</td>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

HTML 4.01 

<div>
  <h2>Welcome</h2>
</div>
Enter fullscreen mode Exit fullscreen mode

XHTML 

<img src="image.jpg" alt="Image" />
Enter fullscreen mode Exit fullscreen mode

HTML5 

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>
Enter fullscreen mode Exit fullscreen mode

3. Features of HTML

Easy to Learn

HTML uses simple tags and beginner-friendly syntax.

<h1>Hello</h1>
<p>This is HTML.</p>
Enter fullscreen mode Exit fullscreen mode

Platform Independent

HTML works on all operating systems and browsers such as Chrome, Firefox, Edge, and Safari.

Supports Multimedia 

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

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

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>
Enter fullscreen mode Exit fullscreen mode

Semantic Structure

HTML5 introduced semantic tags that improve readability, SEO, and accessibility.

<header>
  <h1>My Website</h1>
</header>

<section>
  <p>Welcome</p>
</section>

<footer>
  <p>Footer</p>
</footer>
Enter fullscreen mode Exit fullscreen mode

Works with CSS and JavaScript

HTML provides structure, CSS handles styling, and JavaScript adds functionality.

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>

<body>

  <h1 id="title">Hello</h1>

  <script>
    document.getElementById("title").innerHTML = "Welcome";
  </script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

4. Structure of an HTML Document

A basic HTML document contains the following structure:

<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
</head>

<body>

  <h1>Hello World</h1>
  <p>This is a webpage.</p>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Main Elements

  • <!DOCTYPE html> → Defines HTML5 document
  • <html> → Root element
  • <head> → Contains metadata
  • <title> → Defines webpage title
  • <body> → Contains visible webpage content

5. Basic HTML Tags

Headings 

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
Enter fullscreen mode Exit fullscreen mode

Paragraph 

<p>This is a paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

Links 

<a href="https://example.com">Visit Website</a>
Enter fullscreen mode Exit fullscreen mode

Images 

<img src="image.jpg" alt="Sample Image">
Enter fullscreen mode Exit fullscreen mode

Lists 

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Div and Span 

<div>
  <span>Hello World</span>
</div>
Enter fullscreen mode Exit fullscreen mode

6. Semantic HTML

Semantic tags describe the meaning of content clearly.

Common Semantic Tags

  • <header>
  • <main>
  • <section>
  • <article>
  • <footer>
  • <nav>

Example 

<header>
  <h1>Website</h1>
</header>

<nav>
  <a href="#">Home</a>
</nav>

<main>
  <section>
    <article>
      <h2>Article Title</h2>
    </article>
  </section>
</main>

<footer>
  Copyright 2026
</footer>
Enter fullscreen mode Exit fullscreen mode

Semantic HTML improves readability, SEO, and accessibility.

7. HTML Forms

Forms are used to collect user input.

<form>

  <label>Name:</label>
  <input type="text" required>

  <br><br>

  <label>Message:</label>
  <textarea></textarea>

  <br><br>

  <label>City:</label>
  <select>
    <option>Delhi</option>
    <option>Mumbai</option>
  </select>

  <br><br>

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

</form>
Enter fullscreen mode Exit fullscreen mode

8. HTML Tables

Tables display data in rows and columns.

<table border="1">

  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>

  <tr>
    <td>Suraj</td>
    <td>21</td>
  </tr>

</table>
Enter fullscreen mode Exit fullscreen mode

Important Tags

  • <table>
  • <tr>
  • <th>
  • <td>
  • colspan
  • rowspan

9. Multimedia in HTML

HTML supports multimedia elements such as audio, video, iframe, and pictures.

Audio 

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
</audio>
Enter fullscreen mode Exit fullscreen mode

Video 

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>
Enter fullscreen mode Exit fullscreen mode

Iframe 

<iframe src="https://example.com"></iframe>
Enter fullscreen mode Exit fullscreen mode

Picture 

<picture>
  <img src="image.jpg" alt="Image">
</picture>
Enter fullscreen mode Exit fullscreen mode

10. HTML APIs

Geolocation API 

navigator.geolocation.getCurrentPosition();
Enter fullscreen mode Exit fullscreen mode

Drag and Drop API 

<div draggable="true">Drag Me</div>
Enter fullscreen mode Exit fullscreen mode

Local Storage 

localStorage.setItem("name", "Suraj");
Enter fullscreen mode Exit fullscreen mode

11. Accessibility in HTML

Accessibility makes websites usable for all users.

Important Practices

  • Use alt text for images
  • Use proper labels
  • Use semantic tags
  • Use ARIA roles

Example 

<img src="logo.png" alt="Website Logo">

<label for="name">Name</label>
<input type="text" id="name">
Enter fullscreen mode Exit fullscreen mode

12. SEO Best Practices

SEO helps webpages rank better in search engines.

Best Practices

  • Use meta tags
  • Maintain heading hierarchy
  • Use semantic HTML
  • Optimize images

Example 

<meta name="description" content="HTML Documentation">
Enter fullscreen mode Exit fullscreen mode

13. Advantages and Limitations

Advantages

  • Easy to learn
  • Lightweight
  • Supported by all browsers
  • Free to use

Limitations

  • Cannot create logic alone
  • Requires CSS for styling
  • Requires JavaScript for interactivity

14. Best Practices

  • Use semantic tags
  • Write clean indentation
  • Keep code organized
  • Optimize images
  • Avoid inline CSS
  • Use meaningful names

15. Real-World Applications

HTML is used in:

  • Websites
  • Portfolios
  • Blogs
  • Dashboards
  • E-commerce websites
  • Web applications

16. Conclusion

HTML is the foundation of web development and is used to create and structure webpages. It provides the basic framework for displaying content on the internet.

With HTML5, web development became more powerful through support for multimedia, APIs, semantic elements, and accessibility. HTML continues to be one of the most important technologies in modern web development.

17. References

  • MDN Web Docs
  • W3Schools
  • WHATWG HTML Standard
  • freeCodeCamp
  • Banner image used in this article is referenced from web.dev.

Top comments (0)