Semantic HTML

Semantic HTML is the practice of using elements that describe the role of content, such as <header>, <nav>, <main>, <article>, <button> and <h1>, instead of generic <div> and <span> wrappers.

Why it matters

Screen readers use landmarks and headings to let people jump around a page, and keyboards rely on native controls. Search engines also use structure to interpret content. Semantic markup usually means less JavaScript and less ARIA, because the browser already supplies the behavior.

It costs nothing in performance and tends to make CSS easier to organize.

Example

Non-semantic:

<div class="menu"><div onclick="go()">Home</div></div>

Semantic:

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

The second version is announced as navigation, the link is keyboard focusable and works without JavaScript.

Common mistakes

• Using headings for font size instead of outline order, for example jumping from h1 to h4.
• Making clickable divs instead of real buttons or links.
• Adding ARIA roles to elements that already carry that meaning.

Related

• HTML Element
• ARIA
• Progressive Enhancement
• DOM
• टूल: Meta tag checker

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.