HTML
Html5 Development
Html5

All About HTML

Bikramjit Roy

15 min readSep 24, 2026

What HTML Actually Is ?

Prior to any tag, you need to comprehend this: Programming languages do not include HTML. It’s a markup language. Its sole purpose is to explain the content’s structure and significance. HTML stands for HyperText Markup Language.

HyperText = text with links (hyper = beyond).
Markup = tags that annotate content.
Language = a defined, consistent syntax.

Every HTML document follows the same skeleton:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>
  </head>
  <body>
    <!-- Everything visible goes here -->
  </body>
</html>

<!DOCTYPE html> tells the browser: "parse this as modern HTML5." If it’s missing, browsers switch to quirks mode, a compatibility setting that emulates the behavior of outdated and flawed browsers. It’s mandatory to always include it

The lang attribute in <html lang=”en”> is not decorative. It is used by screen readers to select the appropriate voice engine. It is used by search engines for language targeting. Always specify it.

The <head> is invisible to users but critical to machines browsers, crawlers, social media scrapers all read it. The <body> is everything the user sees.

Headings ( H1 to H6)

The most misinterpreted HTML tags are headings. Students believe they are concerned with font size. They’re not. They deal with semantic hierarchy and document outlines. The most crucial guideline is to never omit heading levels. Jumping from Chapter 1 to Section 1.3 without having Section 1 is analogous to going from H1 to H3. A table of contents is created by screen readers using headings that are broken by skipped levels. Google uses heading structure to comprehend the hierarchy of your content; it is confused by skipped levels.

Semantic HTML: The Most Important Concept in Modern HTML

This is where the majority of developers even the experienced ones make mistakes. Using a tag that accurately conveys the content’s meaning rather than just the one that looks good is known as semantic HTML.

Compare between these two:

<!-- Non-semantic — works visually but meaningless -->
<div class="header">
  <div class="nav">
    <div class="nav-item">Home</div>
  </div>
</div>
<div class="main-content">
  <div class="article">...</div>
</div>
<div class="footer">...</div>

<!-- Semantic - same visual result, rich meaning -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Both render identically. But the semantic version tells Google, screen readers, and other machines what each region is. The <nav> tells Google "these are navigation links." The <article> tells a screen reader "this is a self-contained piece of content." The <footer> tells a scraper "this is page metadata." The landmark roles are a big deal in accessibility. A blind user with a screen reader can press a key to jump directly to <main>, skipping the nav. If you use <div> everywhere, that ability disappears.

They both render identically. However, the semantic version identifies each region for Google, screen readers, and other devices. Google is informed by <nav> that “these are navigation links.” A screen reader is informed by <article> that “this is a self-contained piece of content.” A scraper is informed by <footer>that “this is page metadata.” In terms of accessibility, the milestone roles are significant. By pressing a key, a blind user using a screen reader can bypass the navigation and get straight to <main>. The ability vanishes if <div> is used everyplace.

Text-Level Semantic Tags: The Inline Elements

These go inside paragraphs and headings. Each has specific meaning that affects accessibility, SEO, and styling.

<p>
  The word <strong>danger</strong> carries high importance.
  The word <em>slowly</em> is being emphasized for tone.
  The abbreviation <abbr title="HyperText Markup Language">HTML</abbr> is explained on hover.
  This is a <mark>highlighted passage</mark> for reference.
  The price dropped from <del>₹500</del> to <ins>₹350</ins>.
  The formula is H<sub>2</sub>O and E=mc<sup>2</sup>.
  The error code was <code>404 Not Found</code>.
  Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.
  The output was <samp>Hello, World!</samp>.
  The variable is defined as <var>x</var>.
  <q>To be or not to be</q> is a famous quote.
  <cite>Hamlet</cite> was written by Shakespeare.
  This is <small>fine print or legal text</small>.
  A word break opportunity: super<wbr>cali<wbr>fragilistic
  <time datetime="2025-01-15">January 15, 2025</time>
</p>

The distinction between <strong> and <b>, and between <em> and <i> is critical to teach:

<strong> = important content (semantic). Screen readers may announce it. <b> = bold for stylistic reasons, no meaning.
<em> = stress emphasis that changes meaning (semantic). <i> = italic for technical terms, foreign words, thoughts no stress emphasis.

<strong> significant material (semantic). It might be announced by screen readers.
<b> bold for esthetic purposes; meaningless.
<em> accent that modifies meaning (semantic).
<i> italic for foreign words, technical phrases, and ideas without emphasis.

So “I never said she stole the money” uses <em> on "stole" because that emphasis changes the meaning. A book title in italics uses <i>.

Lists : Three Types, All Different

<!-- Unordered list — bullets, order doesn't matter -->
<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
</ul>

<!-- Ordered list - numbered, order matters -->
<ol type="1" start="1">  <!-- type can be: 1, A, a, I, i -->
  <li>Preheat oven to 180°C</li>
  <li>Mix ingredients</li>
  <li>Bake for 25 minutes</li>
</ol>
<!-- Ordered list reversed (countdown) -->
<ol reversed>
  <li>Third place</li>
  <li>Second place</li>
  <li>First place</li>
</ol>

<!-- Description list - term/definition pairs -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - the structure of web pages</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets - the presentation of web pages</dd>
</dl>

<dl> is incredibly underutilized. Glossaries, FAQs (term = question definition = answer), metadata displays, and key-value pairs are all ideal uses for it. Additionally, compared to a stylized table, it is semantically accurate for those use scenarios.

Lists can be nested; a sub-list is created by placing a <ul> inside a <li>. Although you will use CSS to override it, the browser takes care of indentation automatically.

Links : The Foundation of the Web

The <a> element is what makes the web a web. Every link is an <a> tag.

<!-- Basic link -->
<a href="<https://example.com>">Visit Example</a>

<!-- Open in new tab - always add rel for security -->
<a href="<https://example.com>" target="_blank" rel="noopener noreferrer">
  External Site
</a>

<!-- Link to page section (anchor link) -->
<a href="#section-2">Jump to Section 2</a>
<h2 id="section-2">Section 2</h2>

<!-- Email link -->
<a href="hello@example.com">Email us</a>

<!-- Phone link (works on mobile) -->
<a href="tel:+919876543210">Call us</a>

<!-- Download link -->
<a href="/files/resume.pdf" download="MyResume.pdf">Download Resume</a>

<!-- Link with meaningful text - GOOD for SEO and accessibility -->
<a href="/html-guide">Read our complete HTML guide</a>

<!-- Link with meaningless text - BAD -->
<a href="/html-guide">Click here</a>  <!-- Never do this -->

The rel="noopener noreferrer" on target="_blank" links is a security requirement. Without it, the opened tab can access your page via window.opener a known security vulnerability called reverse tabnapping.

Link text matters enormously for both SEO and accessibility. Screen readers read out all the links on a page as a list “click here, click here, click here” is useless. “Complete HTML Guide, CSS Tutorial, JavaScript Basics” is meaningful.

A security requirement is the rel=”noopener noreferrer” on target=”_blank” links. Without it, your page can be accessed through a window.openerby the opened tab. Reverse tabnapping is a known security flaw.

Link text is crucial for accessibility and SEO. The list “click here, click here, click here” is meaningless when screen readers read out every link on a page. “Complete HTML Guide, CSS Tutorial, JavaScript Basics” has significance.

Images : Far More Than `<img src>`

<!-- Basic image — alt is mandatory -->
<img src="photo.jpg" alt="A developer coding at a desk">
<!-- Decorative image - empty alt, screen reader skips it -->
<img src="divider-line.png" alt="">
<!-- Responsive image - different sizes for different screens -->
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Description"
  width="800"
  height="600"
  loading="lazy"
>
<!-- Modern formats with fallback -->
<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description" width="800" height="600">
</picture>
<!-- Figure with caption -->
<figure>
  <img src="chart.png" alt="Bar chart showing monthly sales data">
  <figcaption>Monthly sales for Q3 2025. Data from internal CRM.</figcaption>
</figure>

In addition to being used for sizing, the width and height characteristics on <img> prevent layout shift (a Core Web Vital measure) by informing the browser of the aspect ratio prior to the image loading. Don’t forget to include them.

loading=”lazy” significantly speeds up the initial page load by delaying the loading of images below the fold. Apply it to all images that aren’t loaded in the viewport.

Tables : Structure and Accessibility

Tables are for tabular data not for layout. This was abused heavily in the 1990s and early 2000s. A correctly structured table is fully accessible and semantically meaningful.

<table>
  <caption>Monthly Sales Report — Q3 2025</caption>
  <thead>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Revenue</th>
        <th scope="col">Orders</th>
        <th scope="col">Growth</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <th scope="row">July</th>
        <td>₹1,20,000</td>
        <td>340</td>
        <td>+12%</td>
      </tr>
      <tr>
        <th scope="row">August</th>
        <td>₹1,45,000</td>
        <td>390</td>
        <td>+20%</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td>₹2,65,000</td>
        <td>730</td>
        <td></td>
      </tr>
   </tfoot>
</table>

The secret to table accessibility is the scope attribute on <th>. scope=”col” indicates that a column is described in this header. scope=”row” indicates that a row is described in this header. This is how screen readers announce “July, Revenue: ₹1,20,000” instead than merely reading numbers.

Get Bikramjit Roy’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Screen readers read the table’s title first, <caption>, which is helpful for SEO. <thead>, <tbody>, and <tfoot> provide structure for styling and let browsers to render the body independently (helpful for long scrollable tables).

Forms: The Most Complex HTML Topic

Users provide data to servers using forms. Because each element has unique actions, characteristics, and accessibility needs, they are also the most complicated component of HTML. This is how a complete, accurate form appears:

<form action="/submit" method="POST" novalidate>
  <fieldset>
    <legend>Personal Information</legend>
<div class="form-group">
      <label for="full-name">Full name <span aria-hidden="true">*</span></label>
      <input
        type="text"
        id="full-name"
        name="fullName"
        required
        autocomplete="name"
        aria-required="true"
        aria-describedby="name-hint"
      >
      <span id="name-hint">Enter your name as it appears on official documents</span>
    </div>
    <div class="form-group">
      <label for="email">Email address</label>
      <input
        type="email"
        id="email"
        name="email"
        autocomplete="email"
        required
      >
    </div>
    <fieldset>
      <legend>Preferred contact method</legend>
      <label><input type="radio" name="contact" value="email"> Email</label>
      <label><input type="radio" name="contact" value="phone"> Phone</label>
    </fieldset>
  </fieldset>
  <button type="submit">Submit form</button>
</form>

Meta Tags: The Invisible Power of <head>

Although they are hidden from users, meta tags are essential for browsers, social networking, and search engines. They are found in <head>. This is how a finished, production-ready <head> appears:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Best HTML Course for Beginners | LearnWeb India</title>
  <meta name="description" content="Learn HTML from scratch in 30 days. Covers semantic HTML, forms, tables, SEO, and accessibility. Free course by LearnWeb India.">
  <link rel="canonical" href="<https://learnweb.in/html-course>">
<!-- Open Graph -->
  <meta property="og:title" content="Best HTML Course for Beginners">
  <meta property="og:description" content="Learn HTML from scratch in 30 days.">
  <meta property="og:image" content="<https://learnweb.in/images/html-course-og.jpg>">
  <meta property="og:url" content="<https://learnweb.in/html-course>">
  <meta property="og:type" content="website">
  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Best HTML Course for Beginners">
  <meta name="twitter:image" content="<https://learnweb.in/images/html-course-og.jpg>">
  <!-- Robots -->
  <meta name="robots" content="index, follow">
  <!-- Favicon -->
  <link rel="icon" type="image/png" href="/favicon.png">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <!-- Preconnect for performance -->
  <link rel="preconnect" href="<https://fonts.googleapis.com>">
  <!-- Theme color -->
  <meta name="theme-color" content="#ffffff">
</head>

SEO in HTML: The Complete Picture

From an HTML standpoint, SEO is more than just meta tags. It is the complete structure of the document.

The single most valuable SEO component is the title tag. Primary Keyword | Secondary Keyword | Brand Name is the format. Google truncates at about 580 pixels width, so keep it under 60 characters. Every page needs to have its own title.

URL format (managed by your server, referenced by HTML canonical): Clean, clear, and packed with keywords: example.com/html-forms-tutorial is superior to example.com/page?id=234.

HTML’s secret SEO tool is Structured Data (Schema.org). Google is informed exactly what your content is using JSON-LD included in <script> tags:

<script type="application/ld+json">
{
  "@context": "<https://schema.org>",
  "@type": "Article",
  "headline": "Complete Guide to HTML Forms",
  "author": {
    "@type": "Person",
    "name": "Rahul Sharma"
  },
  "datePublished": "2025-01-15",
  "description": "A complete guide to all HTML form elements...",
  "image": "<https://example.com/html-forms-og.jpg>"
}
</script>

This makes it possible for Google star ratings, FAQs, breadcrumbs, and event dates to appear directly in search results. Click-through rates are much higher on pages with rich results.

FAQPage, HowTo, Product, LocalBusiness, BreadcrumbList, Course, and Recipe are additional schema types.

Internal linking with informative anchor text helps Google find material and transfers authority between pages. Link to more recent pages from pages with a lot of authority. Make use of anchor text that is full of keywords.

Google reads image alt text from images as content. Additionally, it makes your photos show up in Google Image Search. Write it as a sentence that describes the image’s contents, using natural keywords where appropriate.

Since 2021, page speed has been a direct element in Google rankings. This is where HTML choices are important, such as avoiding render-blocking scripts, preloading important fonts, and lazily loading images.

Core Web Vitals: HTML’s Impact on Google’s Page Experience Signals

Google utilizes three distinct performance measurements as ranking signals, which are known as Core Web Vitals: The HTML modifications that have the most influence on CWV are: never lazy-load hero images (improves LCP), always defer or async your scripts (improves INP), and always set width and height on images (prevents CLS).

Less-Known but Powerful HTML Tags

These are the gems most developers never teach:

<!-- details/summary — native accordion, no JavaScript needed -->
<details>
  <summary>Click to expand this section</summary>
  <p>This content is hidden by default and revealed on click.
  Google indexes both open and closed content.</p>
</details>

<!-- dialog - native modal dialog -->
<dialog id="my-modal">
  <h2>Are you sure?</h2>
  <p>This action cannot be undone.</p>
  <button onclick="document.getElementById('my-modal').close()">Cancel</button>
  <button>Confirm</button>
</dialog>
<button onclick="document.getElementById('my-modal').showModal()">Open modal</button>

<!-- progress - native progress bar -->
<label for="upload">Upload progress:</label>
<progress id="upload" value="65" max="100">65%</progress>

<!-- meter - a measurement within a known range -->
<label for="disk">Disk usage:</label>
<meter id="disk" value="6" min="0" max="10" low="3" high="8" optimum="2">6GB</meter>

<!-- datalist - searchable dropdown suggestions -->
<input list="cities" name="city" placeholder="Type a city...">
<datalist id="cities">
  <option value="Mumbai">
  <option value="Delhi">
  <option value="Bangalore">
  <option value="Chennai">
  <option value="Hyderabad">
</datalist>

<!-- output - result of a calculation -->
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" value="10"> +
  <input type="number" id="b" value="20"> =
  <output name="result">30</output>
</form>

<!-- template - inert HTML fragment, used by JavaScript -->
<template id="card-template">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

<!-- ruby - East Asian text annotation (pronunciation guides) -->
<ruby>
  漢 <rt>かん</rt>
  字 <rt>じ</rt>
</ruby>

<!-- bdi - isolates text direction (for user-generated content mixing RTL/LTR) -->
<p>User <bdi>مرحبا</bdi> posted 15 times.</p>

<!-- wbr - word break opportunity (for long URLs or compound words) -->
<p>This is a very long URL: <https://example.com/very><wbr>/long<wbr>/path<wbr>/here</p>

The <details> + <summary>combination is amazing; it generates a completely functional accordion with no JavaScript and is keyboard-navigable right out of the box. For SEO purposes, Google is able to read the secret material. For FAQs, use it.

The <dialog> element is a native modal that does tasks that formerly required hundreds of lines of JavaScript, such as focus trapping (keeping keyboard attention inside the modal) and backdrop automatically.

Accessibility in HTML: ARIA

A collection of features called ARIA (Accessible Rich Internet Applications) expands the semantics of HTML for screen readers. The first ARIA rule is to utilize native HTML instead of ARIA. There is already a <button> available. It is always terrible to add ARIA to a <div> to turn it into a button.

<!-- Roles — override the implicit semantic -->
<div role="alert">Your session will expire in 5 minutes.</div>
<div role="status">Form saved successfully.</div>  <!-- polite version -->

<!-- Labels - name elements for screen readers -->
<button aria-label="Close dialog">X</button>  <!-- "X" alone is meaningless -->
<nav aria-label="Primary navigation">...</nav>
<nav aria-label="Footer navigation">...</nav>  <!-- distinguish multiple navs -->

<!-- Descriptions - additional context -->
<input type="password" aria-describedby="pwd-rules">
<p id="pwd-rules">Must be 8+ characters with a number and symbol.</p>

<!-- States -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>...</ul>

<!-- Live regions - announce dynamic changes -->
<div aria-live="polite" aria-atomic="true">

<!-- Content injected here gets announced by screen readers -->
</div>

<!-- Hidden from screen readers (decorative) -->
<svg aria-hidden="true">...</svg>
<span aria-hidden="true">→</span>  <!-- decorative arrow -->

If you don’t use the aria-live attribute, screen reader users won’t be able to access dynamic content (such as loading states, error messages, and chat messages).

HTML Performance Techniques

<!-- Preload critical resources -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.jpg" as="image">
<link rel="preload" href="/critical.css" as="style">

<!-- Preconnect to external domains (warm up the connection) -->
<link rel="preconnect" href="<https://fonts.googleapis.com>">
<link rel="preconnect" href="<https://api.example.com>">

<!-- DNS prefetch (lighter than preconnect) -->
<link rel="dns-prefetch" href="<https://analytics.example.com>">

<!-- Prefetch next page (user will likely navigate here) -->
<link rel="prefetch" href="/next-page.html">

<!-- Script loading strategies -->
<script src="app.js" defer></script>      <!-- Download async, execute after HTML parsed -->
<script src="analytics.js" async></script> <!-- Download and execute async, order not guaranteed -->
<script type="module" src="app.js"></script> <!-- Automatically deferred, ES modules -->

<!-- Inline critical CSS (fastest possible render) -->
<style>
  /* Only above-the-fold styles here */
  body { margin: 0; font-family: sans-serif; }
  header { background: #fff; height: 60px; }
</style>

<!-- Then load the rest asynchronously -->
<link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">

For years, interviews will quiz you about the difference between defer and async:

defer: the script downloads concurrently with HTML processing and runs in sequence once the HTML has been entirely parsed. Use the majority of scripts.
async: the script downloads in parallel and starts running as soon as it downloads (perhaps mid-parse), with no set sequence. Use it for scripts that are entirely independent, such as analytics.

The `<link>` Tag Beyond Stylesheets

<!-- Favicon variations -->
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Alternate versions -->
<link rel="alternate" hreflang="hi" href="<https://example.com/hi/page>">
<link rel="alternate" hreflang="en" href="<https://example.com/en/page>">
<link rel="alternate" hreflang="x-default" href="<https://example.com/page>">

<!-- RSS/Atom feed -->
<link rel="alternate" type="application/rss+xml" title="My Blog Feed" href="/feed.xml">

<!-- Manifest (for PWA) -->
<link rel="manifest" href="/manifest.json">

For multilingual websites, the hreflang tags are essential. They inform Google of the language and region-specific versions of a page. Without them, consumers may see the incorrect language version on Google. When no other language matches, x-default is displayed.

The HTML You Should Know Cold Quick Reference

The HTML Attributes Every Developer Needs

Beyond tag-specific attributes, these global attributes work on every HTML element:

<!-- id — unique identifier, used by CSS, JS, anchor links -->
<section id="contact-section">

<!-- class - for CSS and JS selection, multiple allowed -->
<div class="card featured large">

<!-- style - inline CSS (use sparingly) -->
<p style="color: red; font-weight: bold;">

<!-- data-* - custom data attributes for JS -->
<button data-product-id="42" data-category="electronics">Add to Cart</button>
<!-- Access in JS: button.dataset.productId → "42" -->

<!-- tabindex - keyboard navigation order -->
<div tabindex="0">Focusable div</div>  <!-- 0 = natural order -->
<div tabindex="-1">Programmatically focusable only</div>
<!-- Avoid positive tabindex values - breaks natural flow -->

<!-- contenteditable - makes any element editable -->
<div contenteditable="true">Users can edit this text</div>

<!-- hidden - hides element (like display:none, but semantic) -->
<div hidden>This content is hidden</div>

<!-- draggable - enables HTML drag and drop -->
<div draggable="true">Drag me</div>

<!-- spellcheck -->
<textarea spellcheck="true"></textarea>

<!-- translate - whether to translate this text -->
<code translate="no">console.log("Hello")</code>

<!-- lang - override document language for specific elements -->
<p lang="fr">Bonjour le monde</p>

<!-- dir - text direction -->
<p dir="rtl">مرحبا بالعالم</p>

One of HTML5’s most potent and underutilized features is the data-* attribute. Custom data can be stored directly on elements without the need for JavaScript variables or hidden form fields, and it can be accessed instantaneously via element.dataset.yourKey

Video and Audio

<!-- Video with multiple formats + subtitles -->
<video
  width="1280"
  height="720"
  controls
  muted
  autoplay
  loop
  poster="/thumbnail.jpg"
  preload="metadata"
>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">

<!-- Subtitles / closed captions -->
  <track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="subtitles-hi.vtt" srclang="hi" label="Hindi">
  <!-- Fallback for browsers that don't support video -->
  <p>Your browser doesn't support video. <a href="video.mp4">Download it</a>.</p>
</video>

<!-- Audio -->
<audio controls preload="metadata">
  <source src="podcast.ogg" type="audio/ogg">
  <source src="podcast.mp3" type="audio/mpeg">
</audio>

Closed captions are a strong accessibility practice worldwide and are required by law in many nations. Always include <track> elements for videos. Additionally, Google indexes them, making video content searchable.

The Rules That Separate Good HTML from Great HTML

You should understand and never forget these principles:

One: Validate your HTML. Make use of validator.w3.org. Because invalid HTML renders inconsistently across browsers, the parser must infer what you intended.
Two: Style comes second to structure. Before using CSS, write the entire, semantic HTML. No amount of CSS can correct an incorrect structure.
Three: Alt text is required for every image. There are no exceptions. Either use a description (informative photos) or an empty alt (decorative). Missing alt damages SEO and is an accessibility violation.
Four: A label is required for each form input. Instead of using a placeholder, use <label for=”id”>. not enclosing text. An genuine <label> element with a matching for attribute.
Five: Make use of the appropriate component for the task. Buttons are functional. Links are useful. Never substitute one for the other. To browse to a page, a <button> should be <a>. A <button> should be a <a> that submits something.
Six: Keyboard usability. A significant portion of your audience who use keyboards and screen readers will not be able to access it if they are unable to tab to it and activate it using Enter or Space.
Seven: It is necessary to have a heading hierarchy. Major parts have one H1 and one H2. H3s in subsections. Don’t ever skip a level. This is a necessary for both accessibility and SEO.
Eigth: Your HTML is not the DOM. The DOM, or live, in-memory tree, is what the browser displays. The first set of instructions is your HTML file. After loading, JavaScript has the ability to completely alter the DOM. Always check not only what your file says but also what the browser is actually rendering.

Each of these principles provides you with something tangible, verifiable, and immediately applicable to actual work. From the first tag to production-grade, SEO-optimized, accessible, and effective pages, here is the complete image of HTML. To learn more about any subject, click any tag on the reference card above.

All About HTML

What HTML Actually Is ?

Headings ( H1 to H6)

Semantic HTML: The Most Important Concept in Modern HTML

Text-Level Semantic Tags: The Inline Elements

Lists : Three Types, All Different

Links : The Foundation of the Web

Images : Far More Than <img src>

Tables : Structure and Accessibility

Get Bikramjit Roy’s stories in your inbox

Forms: The Most Complex HTML Topic

Meta Tags: The Invisible Power of <head>

SEO in HTML: The Complete Picture

Core Web Vitals: HTML’s Impact on Google’s Page Experience Signals

Less-Known but Powerful HTML Tags

Accessibility in HTML: ARIA

HTML Performance Techniques

The <link> Tag Beyond Stylesheets

The HTML You Should Know Cold Quick Reference

The HTML Attributes Every Developer Needs

Video and Audio

The Rules That Separate Good HTML from Great HTML

Written by Bikramjit Roy

No responses yet

More from Bikramjit Roy

Complete CSS Guide for Beginners and Intermediate

Complete CSS Guide

All About JavaScript

Part 5: Advance JS

DOM Starter

Part 2

All about JavaScript

JavaScript- part 2; Functions, Array, Objects

Recommended from Medium

One Email Parameter Was All It Took: How Broken Access Control Let Me Create a Folder in Another…

A practical bug bounty story about testing authorisation, manipulating request parameters, and finding a potential IDOR vulnerability.

7 HTML and CSS Tricks That Can Replace Your JavaScript Workarounds

Build an accordion, dismiss a popover, fix jumping layouts, and submit forms without bypassing validation.

Statement vs PreparedStatement: The Hidden SQL Injection Problem Every Java Developer Should…

Most Java developers learn about Statement and PreparedStatement early in their JDBC journey.

7 Modern CSS Features You Might Not Know About

Discover 7 powerful CSS features that can simplify responsive design, accessibility, positioning, and animations with practical examples.

7 Harsh Truths About RxJS Every Angular Developer Learns Too Late

Bold, first-second hook: RxJS will save your app or quietly wreck it — and the difference depends on seven decisions that most teams learn…

The Orthoverse: Rebooted

We’re back and we’re still doomed