الدرس 06 · Structure and meaning

Semantic elements

لم يُترجم بعد؛ يُعرض باللغة الإنجليزية

A page built only from div boxes looks fine, but it tells machines nothing about what each part is. Semantic elements are named for their meaning: header, nav, main, article, aside and footer. Swap the divs of a small page one by one and watch the page stay exactly the same while the accessibility tree, the version screen readers use, gains roles and landmarks a listener can jump between.

9 دقيقة10 خطوات5 أسئلةIntermediate

شكل 6 · تفاعلي

جارٍ تحميل الرسم…

أو ← →

اختبر نفسك

5 أسئلة سريعة

اختر إجابة لتعرف السبب. تُحفَظ نتيجتك مع تقدّمك.

01You swap <div>Coffee Club</div> at the top of the page for <header>Coffee Club</header>. What changes on screen, with no CSS?

By the browser's default styles, header, nav, main, article, aside and footer are plain blocks, exactly like div. What changes is the meaning: the role in the accessibility tree turns from generic into banner.

02Which element fits a blog post that would still make sense if it were copied onto another site?

article is for a self-contained piece that stands on its own, such as a post, a recipe or a comment. aside is for side content, nav for the main links, footer for closing details.

03What role does a screen reader get for a plain <div>?

A div maps to the role generic: a box with no meaning of its own. That is why a page made only of divs gives a listener no structure.

04Which of these roles is NOT a landmark a screen reader can jump to?

article is a role, but not a landmark. The landmarks in this page are banner (header), navigation (nav), main (main), complementary (aside) and contentinfo (footer).

05You want a box of tips to appear in a column on the right. What should you do?

Elements say what content is; they do not set the layout. An aside is still drawn as a plain block until CSS moves it. Choose by meaning, style with CSS.

المصطلحات الأساسية

المسرد

Semantic element: An HTML element whose name says what its content is, such as <nav> for navigation links or <footer> for closing details.
div: A generic box with no meaning of its own. Fine for grouping or styling when no semantic element fits.
Accessibility tree: A version of the page the browser builds for assistive technology: each part with its role, name and state.
Role: What a part of the page is for, as reported in the accessibility tree: banner, navigation, main, article, generic and so on.
Landmark: A role that marks a large region of the page (banner, navigation, main, complementary, contentinfo and a few others). Screen readers can list them and jump between them.
Screen reader: Software that reads a page aloud or on a braille display, for people who cannot see the screen. NVDA, JAWS and VoiceOver are examples.
generic: The role of a div (and of a span): a container with no meaning. Screen readers do not announce it as anything.

تفاصيل إضافية

الملاحظات والمصادر

The card shows the body of the page. The full file also starts with <!DOCTYPE html>, <html lang="en">, a <title> and <body>, and closes </body> and </html>.
By the browser's default styles, div, header, nav, main, article, aside and footer are all plain blocks: each starts on a new line and takes the full width. Swapping them changes no pixel.
header and footer are landmarks only at the top level of the page. Inside an article, aside, main, nav or section they get the role generic.
Real screen readers also read the heading and the link. The figure shows only the six boxes, so you can follow the roles.

اختبار يتاح بعد الخطوة الأخيرة.