Back to Glossary

Semantic HTML

HTML الدلالي (Semantic HTML)

Beginnerhtml1 min read
semantic elementshtml semanticshtml5 elementsarticlesectionnavmainheaderfooter
Official DocsSign in to save & take notes

Definition

Using HTML elements that carry meaning about the content they contain, not just for visual presentation.

استخدام عناصر HTML تحمل معنى حول المحتوى الذي تحتويه، وليس فقط للعرض المرئي.

Why It Matters

The 404Fault glossary page structure should use <main>, <section> for filters, and <article> for each term card — screen readers navigate by these landmarks.

هيكل صفحة قاموس 404Fault يجب أن يستخدم <main> و<section> للفلاتر و<article> لكل بطاقة مصطلح — قارئات الشاشة تتنقل بهذه المعالم.

Full Definition

Semantic HTML uses elements that describe their content: `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`, `<aside>`, `<figure>`. These give meaning to screen readers, search engines, and other tools. Using `<button>` for interactive elements ensures keyboard focus and click handling automatically. Using `<a>` for navigation means screen readers announce it as a link. Semantic HTML forms the foundation of accessible web apps.
HTML الدلالي يستخدم عناصر تصف محتواها: `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`. هذه تمنح معنى لقارئات الشاشة ومحركات البحث. استخدام `<button>` للعناصر التفاعلية يضمن تركيز لوحة المفاتيح ومعالجة النقر تلقائيًا.

Example Usage

“<main><h1>AI Glossary</h1><section aria-label='Filters'>...</section><section aria-label='Terms'>{terms.map(t => <article key={t.id}>...</article>)}</section></main>”

“<main><h1>قاموس الذكاء الاصطناعي</h1><section aria-label='فلاتر'>...</section><section aria-label='مصطلحات'>{terms.map(t => <article key={t.id}>...</article>)}</section></main>”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using Semantic HTML:

1

Using <div> for everything — divs have no semantic meaning

2

Using heading levels for size, not hierarchy — screen readers use headings for navigation

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Semantic HTML.

Explain:
1. What is Semantic HTML and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Using <div> for everything — divs have no semantic meaning, Using heading levels for size, not hierarchy — screen readers use headings for navigation
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account