HTML بمعنى — م. أشرف كمال القصاص | الكلية الجامعية للعلوم التطبيقية

أهداف الدرس

أن تختار العنصر الذي يصف المحتوى، لا الذي يشبهه.
أن تضبط لغة الصفحة واتجاهها.
أن تجعل الصفحة مقروءة لقارئ الشاشة.

المتصفح لا يرى الألوان، بل يرى العناصر. حين تكتب <nav> بدل <div> يعرف قارئ الشاشة أن هذه قائمة تنقّل، ويعرف محرّك البحث أين المحتوى.

HTML

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>صفحتي</title>
</head>
<body>
  <header>
    <nav aria-label="القائمة الرئيسة">…</nav>
  </header>
  <main>
    <article>
      <h1>عنوان الدرس</h1>
      <p>…</p>
    </article>
  </main>
  <footer>…</footer>
</body>
</html>

العنصر	معناه
<header>	رأس الصفحة أو القسم
<nav>	روابط التنقّل
<main>	المحتوى الرئيس — مرة واحدة
<article>	محتوى قائم بذاته
<footer>	ذيل الصفحة

عنوان <h1> واحد لكل صفحة، ثم <h2> للأقسام بالترتيب دون قفز.

تمرين

لماذا نكتب alt لكل صورة؟

الإجابة

لأن قارئ الشاشة يقرؤه بدل الصورة، ويظهر إن لم تُحمَّل. الصورة الزخرفية تأخذ alt="" فارغاً.

Lesson goals

Choose the element that describes the content, not the one that looks like it.
Set the page's language and direction.
Make the page readable by a screen reader.

The browser does not see colours; it sees elements. Write <nav> instead of <div> and a screen reader knows it is navigation, and a search engine knows where the content is.

HTML

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>صفحتي</title>
</head>
<body>
  <header>
    <nav aria-label="القائمة الرئيسة">…</nav>
  </header>
  <main>
    <article>
      <h1>عنوان الدرس</h1>
      <p>…</p>
    </article>
  </main>
  <footer>…</footer>
</body>
</html>

Element	Meaning
<header>	Head of the page or section
<nav>	Navigation links
<main>	The main content — once
<article>	Self-contained content
<footer>	Page footer

One <h1> per page, then <h2> for sections, in order, without skipping levels.

Exercise

Why give every image an alt?

Answer

A screen reader reads it in place of the image, and it shows if the image fails to load. A decorative image gets an empty alt="".

التعليقات / Comments

لا تعليقات بعد. كن أول من يسأل. / No comments yet. Be the first to ask.

HTML بمعنى / Meaningful HTML