Semantic HTML: Page Structure and LandmarksHTMLـی واتایی: پێکهاتەی لاپەڕە و ناوچە نیشانەدارەکان

You already know that every element says what a piece of content is (Say what each part is). Semantic HTML takes this idea to the whole page: you choose elements for their meaning, never for their default look. Who reads that meaning?

دەزانیت هەر توخمێک دەڵێت بەشێک لە ناوەڕۆک چییە (بڵێ هەر بەشێک چییە). HTMLـی واتایی (Semantic HTML) ئەم بیرۆکەیە بۆ هەموو لاپەڕەکە دەبات: توخمەکان بەپێی واتاکەیان هەڵدەبژێریت، هەرگیز بەپێی شێوە بنەڕەتییەکەیان. کێ ئەو واتایە دەخوێنێتەوە؟

A page built only from <div> and <span> is called div soup. It can look perfect, but its boxes mean nothing (div and span: boxes with no meaning). Here is the top of the same page twice:

لاپەڕەیەک کە تەنیا بە <div> و <span> دروست کرابێت پێی دەوترێت شۆربای div. دەکرێت تەواو جوان دەربکەوێت، بەڵام سندووقەکانی هیچ واتایەکیان نییە (div و span: سندووقی بێ واتا). ئەمە سەرەتای هەمان لاپەڕەیە دوو جار:

Five elements mark the big regions of almost every page. Each one creates a landmark with an ARIA role that screen readers can list and jump to:

پێنج توخم ناوچە گەورەکانی نزیکەی هەموو لاپەڕەیەک نیشان دەکەن. هەریەکەیان ناوچەیەکی نیشانەدار بە ڕۆڵێکی ARIA دروست دەکات کە خوێنەرەوەکانی شاشە دەتوانن لیستی بکەن و بازی بۆ بدەن:

Two more landmarks exist: <search> around a search form (role search, in all browsers since 2023), and a <form> or <section> that you name with aria-label (roles form and region).

دوو ناوچەی نیشانەداری تریش هەن: <search> بە دەوری فۆرمی (Form) گەڕاندا (ڕۆڵی search، لە ⁦2023⁩ـەوە لە هەموو تۆڕگەڕەکاندا)، هەروەها <form> یان <section>ـێک کە بە aria-label ناوی لێ دەنێیت (ڕۆڵەکانی form و region).

A screen reader reads the page aloud, but nobody wants to hear the whole menu again on every page. Users jump instead. In NVDA, the free screen reader for Windows, D moves to the next landmark, H to the next heading, and NVDA + F7 lists all the headings, links and landmarks. VoiceOver on Apple devices has a similar list, the rotor.

خوێنەرەوەی شاشە لاپەڕەکە بە دەنگی بەرز دەخوێنێتەوە، بەڵام کەس نایەوێت لە هەموو لاپەڕەیەکدا دووپاتە گوێ لە هەموو مێنیوەکە بگرێت. بۆیە بەکارهێنەران باز دەدەن. لە NVDA، خوێنەرەوەی شاشەی بێبەرانبەر بۆ Windows، D دەچێتە سەر ناوچەی نیشانەداری دواتر، H دەچێتە سەر سەردێڕی دواتر و ⁦NVDA + F7⁩ هەموو سەردێڕەکان، بەستەرەکان و ناوچە نیشانەدارەکان لیست دەکات. VoiceOver لەسەر ئامێرەکانی Apple لیستێکی هاوشێوەی هەیە بە ناوی rotor.

In WebAIM's 2026 survey of 1,780 screen-reader users, 67.8% said they first move through a long page by its headings, and 28.3% use landmarks often or whenever a page has them. Good headings and good landmarks serve both groups.

لە ڕاپرسییەکەی WebAIMـی ساڵی ⁦2026⁩ـدا لەگەڵ ⁦1,780⁩ بەکارهێنەری خوێنەرەوەی شاشە، ⁦67.8%⁩ـیان گوتیان سەرەتا بە سەردێڕەکان لە لاپەڕەیەکی درێژدا دەگەڕێن و ⁦28.3%⁩ـیان زۆرجار یان هەر کاتێک لاپەڕەکە ناوچەی نیشانەداری هەبێت بەکاری دەهێنن. سەردێڕەکانی باش و ناوچە نیشانەدارەکانی باش خزمەتی هەردوو گرووپەکە دەکەن.

Inside <main>, three elements group content. They look the same — plain boxes — but they mean different things:

لەناو <main>ـدا سێ توخم ناوەڕۆک کۆ دەکەنەوە. وەک یەک دەردەکەون — سندووقی سادە — بەڵام واتای جیاوازیان هەیە:

The two can be nested both ways. A news page can have a Sport section that holds several articles; one long article, such as a recipe, can be split into sections. Each <article> and each <section> starts with its own heading.

دەتوانرێت ئەم دووانە بە هەردوو ڕێگا تێکەڵی یەکتر بکرێن. لاپەڕەیەکی هەواڵ دەتوانێت sectionـێکی وەرزشـی هەبێت کە چەند articleـێک لەخۆ بگرێت؛ articleـێکی درێژ، وەک ڕێنمایی چێشتلێنان، دەتوانرێت بەسەر چەند sectionـێکدا دابەش بکرێت. هەر <article> و هەر <section>ـێک بە سەردێڕی خۆی دەست پێ دەکات.

Headings and regions work together. The rules from Headings make the outline now apply to the whole page:

سەردێڕەکان و ناوچەکان پێکەوە کار دەکەن. ئەو ڕێسایانەی لە سەردێڕەکان پێکهاتەی لاپەڕە دروست دەکەندا فێریان بوویت، ئێستا بۆ هەموو لاپەڕەکە جێبەجێ دەبن:

Inside the text, a few small elements tell browsers and tools what a word or a number is:

لەناو دەقدا، چەند توخمێکی بچووک بە تۆڕگەڕەکان و ئامرازەکان دەڵێن وشەیەک یان ژمارەیەک چییە:

Two more small elements were taught earlier: <mark> in Meaning or looks and <figure> in An image as a link; figure and figcaption.

دوو توخمی بچووکی تر پێشتر خوێندراون: <mark> لە واتا یان شێوە و <figure> لە وێنە وەک بەستەر؛ figure و figcaption.

<details> hides its content until the visitor opens it; <summary> is the visible line that opens it. It is perfect for questions and answers, and it needs no JavaScript: it works with a mouse, with touch and with the keyboard (Tab to the summary, then Enter or Space). Add the open attribute to start it open.

<details> ناوەڕۆکەکەی دەشارێتەوە تا سەردانیکەر دەیکاتەوە؛ <summary> ئەو دێڕە دیارەیە کە دەیکاتەوە. بۆ پرسیار و وەڵام زۆر گونجاوە و پێویستی بە JavaScript نییە: بە ماوس (Mouse)، بە دەستلێدان و بە کیبۆرد (Keyboard) کار دەکات (بە Tab بگە سەر summary، پاشان Enter یان Space دابگرە). خەسڵەتی (Attribute) open زیاد بکە تا بە کراوەیی دەست پێ بکات.

Here is everything together in a small but complete home page. The menu is a list of links; menus are the subject of Links and Navigation Menus. The page passes the W3C Nu HTML Checker with no errors and no warnings.

ئەمە هەموو شتێکە پێکەوە لە لاپەڕەیەکی سەرەکی (Home page) بچووک بەڵام تەواودا. مێنیوەکە لیستێکی بەستەرەکانە؛ مێنیوەکان بابەتی بەستەرەکان و لیستە ڕێنیشاندەرەکانن. لاپەڕەکە بەبێ هیچ هەڵە (Error) و ئاگادارکردنەوەیەک بە Nu HTML Checkerـی W3C تێدەپەڕێت.

For each important element the accessibility tree keeps a role (banner, link, heading), a name and a state. Plain <div>s and unnamed sections are left out. This is the tree that Chrome builds for the bakery page, shortened a little:

داری دەستڕاگەیشتن بۆ هەر توخمێکی گرنگ ڕۆڵ (banner، بەستەر، سەردێڕ)، ناو و دۆخـەکەی هەڵدەگرێت. <div>ـە سادەکان و sectionـی بێناو لادەبرێن. ئەمە ئەو دارەیە کە Chrome بۆ لاپەڕەی نانەواخانەکە دروستی دەکات، کەمێک کورتکراوە:

Who uses this tree, and with which tools: Assistive technology: how people use the web.

کێ ئەم دارە بەکار دەهێنێت و بە چ ئامرازێک: تەکنەلۆژیای یارمەتیدەر: خەڵک چۆن وێب بەکاردەهێنن.

A Kurdish page uses exactly the same elements. Only two attributes on <html> change: lang="ckb" (Central Kurdish) and dir="rtl" (right to left), as in A page in Kurdish. Screen readers, search engines and translation tools then know the language, and the whole layout mirrors: the site name starts on the right.

لاپەڕەیەکی کوردی ڕێک هەمان توخمەکان بەکار دەهێنێت. تەنیا دوو خەسڵەت لەسەر <html> دەگۆڕێن: lang="ckb" (کوردیی ناوەندی) و dir="rtl" (ڕاست بۆ چەپ (Right-to-left))، وەک لە لاپەڕەیەک بە کوردی. ئیتر خوێنەرەوەکانی شاشە، بزوێنەرەکانی گەڕان و ئامرازەکانی وەرگێڕان زمانەکە دەزانن و هەموو ڕێکخستنی لاپەڕە (Page layout) وەک ئاوێنە هەڵدەگەڕێتەوە: ناوی تۆڕگەکە لە لای ڕاستەوە دەست پێ دەکات.

Landmarks, headings and lists stay the same. The lesson on Kurdish and bilingual websites teaches mixed Kurdish and English text, mirrored icons and bilingual sites.

ناوچە نیشانەدارەکان، سەردێڕەکان و لیستەکان وەک خۆیان دەمێننەوە. لە وانەی تۆڕگەکانی کوردی و دووزمانەدا فێری دەقی تێکەڵی کوردی و ئینگلیزی، ئایکۆنەکانی ئاوێنەکراو و تۆڕگەکانی دووزمانە دەبیت.