Semantic HMTL

مقدمة: المعنى أهم من الشكل

• الفكرة ببساطة إن فيه عناصر HTML معينة بيكون ليها معنى أو هدف معين متصل بيها.
• يعني لما نفكر في عنصر HTML معين، المفروض منبقاش بنفكر شكله عامل إزاي على الصفحة، لأ، المفروض نفكر العنصر ده معناه إيه وبيمثل إيه بالظبط.
• مش كل العناصر في HTML ليها معنى (semantic).
  • اتكلمنا عنها قبل كده في Bold و Italic.
  • واتكلمنا عنها في Structuring the page HTML.
  • مثلاً، الـ <nav> كل وظيفته إنه يوضح إن ده جزء الـ navigation.

نفس الكلام ينطبق على الـ paragraphs. الـ paragraph عبارة عن صندوق بيشيل كلام، بس ليه معنى إنه فقرة. ممكن نستبدله مثلاً بـ div، بس في الحالة دي، مش هيكون ليه أي معنى.

ليه الـ Semantic HTML مهم؟

استخدام العناصر دي بمعناها الصح مهم عشان:

• محركات البحث (Search Engines): بتقدر تفهم هيكل المحتوى بتاعك بشكل أفضل.
• الـ Accessibility: بتساعد الناس اللي بتعتمد على screen readers عشان يفهموا ويقروا صفحات الويب بتاعتنا.

إزاي نوصف معنى صفحة الويب؟ (الأسانسير كمثال)

لحد دلوقتي إنت عارف إن الـ HTML بيوصف محتوى صفحة الويب. بس إزاي توصف معنى الصفحة دي؟

عشان نفهم ده في سياق واقعي، فكر في زراير الأسانسير. مجرد ترتيب الزراير بشكل رأسي مش كفاية عشان حد يفهم معناها. عشان نوصل معنى أو الـ semantics بتاعة الزراير، بنضيف أرقام عشان الناس تعرف كل زرار هيوديهم أنهي دور.

لما تكتب HTML، من الممارسات الكويسة إنك توصف المحتوى بشكل semantic. ده بيسمح لمحركات البحث وبرامج الـ accessibility زي الـ screen readers إنها تفهم محتويات الصفحة.

عناصر الـ HTML الأساسية اللي ليها معنى

لحسن الحظ، ممكن تعمل ده باستخدام شوية tags أساسية في HTML ليها معنى:

• مثلاً، استخدام Heading زي <h1> بيوصف إن المحتوى ده عنوان رئيسي.
• بنفس الطريقة، الـ <ul> والـ <ol> tags بتوصف القوائم (Lists HTML).
• بس فيه عناصر semantic HTML أكتر بكتير متاحة ليك كـ developer.

في الفيديو ده، هشرح طريقة منظمة ممكن تتبعها عشان تتأكد إنك بتعمل صفحة ويب متكونة كويس.

الهيكل الأساسي لصفحة HTML منظمة

اتكلمنا عنها قبل كدا Setting Up the HTML Document Structure بس خلينا نراجع الهيكل الأساسي لصفحة HTML، اللي فيه الـ head والـ body. جوه الـ body tag، ممكن تنظم الموقع باستخدام semantic tags عشان توصف كل قسم.

بالنسبة لصفحة HTML نموذجية، الهيكل ممكن نوصفه بشكل semantic باستخدام الـ semantic HTML tags دي:

• الـ <header>: للجزء العلوي من الصفحة.
• الـ <main>: للمحتوى الرئيسي.
• الـ <footer>: للجزء السفلي من الصفحة.

مثال على تقسيمة الصفحة:

• قسم header فيه لوجو الشركة وشوية navigation links.
• قسم main بيحتوي على sections و articles.
• قسم footer بيحتوي على معلومات الاتصال ولينكات السوشيال ميديا.

تفاصيل العناصر الأساسية:

الـ <nav>

• قسم الـ navigation الرئيسي في صفحتك ممكن برضه نوصفه بشكل semantic باستخدام الـ nav tag.
• اتكلمنا عنها في Page navigation HTML
• على حسب تصميم الصفحة، الـ nav element غالبًا بيتحط بعد الـ header element، والـ header element بيُستخدم عشان اللوجوهات.
• اللينكات الرئيسية للموقع بتتضاف جوه الـ nav element.
• من الممارسات الشائعة بين الـ developers إنهم يحطوا اللينكات بتاعتهم كـ unordered list (<ul>) جوه الـ nav element اتكلمنا عنها في (Lists HTML).

المحتوى الرئيسي: <article> و <section>

العنصرين الـ semantic الأساسيين للمحتوى الرئيسي بتاعك هما الـ article والـ section elements.

الـ <article>

• خلينا نشوف الـ Article HTML الأول.

• مواصفات الـ HTML بتقول، حسب موقع World Wide Web Consortium (W3C):

  الـ article element بيشير لمحتوى بيمثل تكوين كامل أو قائم بذاته في مستند أو صفحة أو تطبيق أو موقع، وبيكون قابل للتوزيع بشكل مستقل.

• الكلام ده ممكن يكون كبير شوية.

• ممكن يساعدك لو فكرت في صفحة جرنان. فيه مقالات كتير في الصفحة، وممكن تقص المقالات دي بشكل منفرد لو عايز. المقالات اللي ممكن تشيلها دي هي الـ article element.

• أمثلة على ده تشمل:

  • بوست في منتدى (forum post)
  • مقال في مجلة أو جرنان
  • تدوينة في مدونة (blog entry)
  • تعليق من مستخدم (user submitted comment)
  • الـ interactive widget أو gadget
  • أي جزء محتوى تاني مستقل.

• إزاي بنستخدم الـ article element؟

  • لنفرض إنك بتعمل blog عن أجازة الصيف بتاعتك.
  • الأفضل إنك تحط محتوى الـ blog post جوه article element، لإنه تكوين كامل وقائم بذاته على صفحة الويب.
  • المفروض تحط الـ article element جوه الـ main element بتاعك.
  • بعدين تضيف الـ heading والـ paragraph tags العادية جوه الـ article element.
  • السبب في إننا بنعمل كده هو إن الـ main element بيمثل بشكل semantic المحتوى الرئيسي للصفحة.
  • وجواه، ممكن يكون فيه أكتر من article element، زي مثلاً في حالة قائمة بـ blog posts.

الـ <section>

• دلوقتي، خلينا نشوف الـ section element واتكلمنا عنه Section HTML.
• ممكن تضيف section element عشان تحدد بشكل semantic أقسام منفصلة جوه الـ article.
• مهم نلاحظ: الـ sections المفروض يكون جواها heading elements عشان توصف الـ section بشكل semantic.
• ممكن برضه نستخدم section elements عشان نوصف أقسام مختلفة في صفحة الويب بتاعتك. الـ section element مش بيحتاج يكون جوه article element بالضرورة.
• كل ده بيعتمد على إزاي عايز توصف الصفحة بتاعتك بشكل semantic.

التركيب المتداخل (Nesting) للعناصر

• في آخر المستند بييجي الـ footer element. ده ممكن يكون فيه navigation links إضافية أو محتوى تاني.
• مهم نلاحظ: الـ semantic elements مش محصورة بس في الهيكل ده.
• لإن هدفها هو وصف الـ semantics بتاعة المحتوى، فالعناصر دي ممكن تتداخل جوه بعضها (nested)، لو ده بيوصف المحتوى بدقة.

مثال على التداخل:

خلينا نحدّث المثال اللي فات عشان نستخدم هيكل semantic متداخل:

1. هتضيف header element جوه الـ article element.
2. جوه الـ header element ده، حط:
   • الـ heading element بتاع عنوان الـ blog post.
   • الـ paragraph element بيوصف تاريخ واسم كاتب البوست.
3. جوه الـ main element (اللي هو بيحتوي الـ article أصلاً)، حط محتوى الـ blog post (ده ممكن يكون جوا الـ article بس بعد الـ header بتاعه).

بس كده.

الخلاصة والفايدة

ودلوقتي إنت عرفت إزاي توصف محتويات صفحة الويب بشكل semantic. صفحات الويب بتاعتك بقت أكتر accessibility لإن المحتوى متوصف بشكل semantic عشان يضيف معنى. دلوقتي، محركات البحث وبرامج الـ accessibility تقدر تفهم بسهولة محتويات صفحة الويب بتاعتك اللي متنظمة كويس.

Semantic tags in action

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Little Lemon Blog</title>
</head>
<body>
 
    <!-- 1. Add the main header element for the page -->
    <header>
        <!-- 1.33: Add the logo inside the header -->
        <img src="little_lemon_logo.png" alt="Little Lemon Logo"> 
        <!-- Note: Replace 'little_lemon_logo.png' with the actual image path -->
    </header>
 
    <!-- 2. Add the navigation element -->
    <nav>
        <!-- 1.44: Add navigation links using an unordered list -->
        <ul>
            <!-- 1.52 & 2.03: Add list items with anchor tags for navigation -->
            <li><a href="index.html">Home</a></li> 
            <li><a href="location.html">Location</a></li>
            <li><a href="blog.html">Blog</a></li>
             <!-- Note: Link text like 'Home', 'Location', 'Blog' added for clarity -->
        </ul>
    </nav>
 
    <!-- 3. Add the main content element -->
    <main>
        <!-- 2.31: Add the main heading for the blog page -->
        <h1>Blog</h1>
 
        <!-- 2.39: Add the first article element for the first blog post -->
        <article>
            <!-- 2.52: Add the heading for the first blog post -->
            <h2>20% off this weekend</h2> 
            <!-- 3.06: Add the paragraph content for the first blog post -->
            <p>Come join us this weekend and get a 20% discount on your favorite meals!</p> 
            <!-- Note: Blog post text added based on context -->
        </article>
 
        <!-- 2.39: Add the second article element for the second blog post -->
        <article>
            <!-- 3.21: Add the heading for the second blog post -->
            <h2>Our new menu</h2>
            <!-- 3.31: Add the paragraph content for the second blog post -->
            <p>We are excited to introduce our brand new menu. Come and explore the flavors!</p>
            <!-- Note: Blog post text added based on context -->
        </article>
    </main>
 
    <!-- 4. Add the footer element -->
    <footer>
        <!-- 3.45 & 3.52: Add a paragraph for copyright information -->
        <p>&copy; 2024 Little Lemon Restaurant. All rights reserved.</p> 
        <!-- Note: Used &copy; for copyright symbol and added standard text -->
    </footer>
 
    <!-- 3.56: The blog page is now semantically described. -->
    <!-- Saving (Ctrl+S / Cmd+S) and previewing would happen outside the code itself. -->
 
</body>
</html>

Semantic HTML cheat sheet

Semantic HTML5 Elements Explained

دي قايمة ببعض الـ tags الـ semantic الشائعة اللي ممكن تستخدمها في شغلك:

Sectioning tags

Use the following tags to organize your HTML document into structured sections.

• <header>: The header of a content section or the web page. Often contains branding/logo, Header HTML.
• <nav>: The navigation links of a section or the web page, Page navigation HTML.
• <footer>: The footer of a content section or the web page. Often contains secondary links, copyright, policy links, Footer HTML.
• <main>: Specifies the main content of a section or the web page, main HTML.
• <aside>: A secondary set of content, not required to understand the main content, aside HTML.
• <article>: An independent, self-contained block of content (e.g., blog post, product), Article HTML.
• <section>: A standalone section of the document, often used within body and article elements, Section HTML.
• <details>: A collapsed section of content that can be expanded, details HTML.
• <summary>: Specifies the summary or caption of a <details> element, summary HTLM.
• <h1> to <h6>: Headings on the web page. <h1> is most important, <h6> is least important, Heading.

Content tags

• <blockquote>: Used to describe a quotation.
• <dd>: Used to define a description for the preceding <dt> element.
• <dl>: Used to define a description list.
• <dt>: Used to describe terms inside <dl> elements.
• <figcaption>: Defines a caption for a photo image (<figure>).
• <figure>: Applies markup to a photo image, often used with <figcaption>.
• <hr>: Adds a horizontal line (thematic break) to the parent element.
• <li>: Used to define an item within a list (<ul>, <ol>, <menu>).
• <menu>: A semantic alternative to <ul> tag for lists of commands or actions.
• <ol>: Defines an ordered list.
• <p>: Defines a paragraph.
• <pre>: Used to represent preformatted text (preserves spaces and line breaks, often monospace font).
• <ul>: Defines an unordered list.

Inline tags

Tags that apply semantics to parts of text within a block.

• <a>: An anchor link to another HTML document or URL.
• <abbr>: Specifies that the containing text is an abbreviation or acronym (often with a title attribute for the full form).
• <b>: Bolds the containing text stylistically. Use <strong> for importance.
• <br>: A line break. Moves the subsequent text to a new line.
• <cite>: Defines the title of creative work (e.g., book, song, movie). Usually rendered in italics.
• <code>: Indicates that the containing text is a block or snippet of computer code.
• <data>: Indicates machine-readable data (often with a value attribute).
• <em>: Emphasizes the containing text (stress emphasis). Usually rendered in italics.
• <i>: The containing text is displayed in italics. Used for idiomatic text, technical terms, thoughts, etc.
• <mark>: The containing text should be marked or highlighted (like using a highlighter pen).
• <q>: The containing text is a short inline quotation. Browsers often add quotation marks.
• <s>: Displays the containing text with a strikethrough (indicates inaccurate or no longer relevant text).
• <samp>: The containing text represents sample output from a computer program.
• <small>: Used to represent small text, such as copyright and legal text (side comments).
• <span>: A generic inline element for grouping content, primarily for CSS styling or JS hooks, with no semantic meaning.
• <strong>: Displays the containing text in bold. Used to indicate strong importance, seriousness, or urgency.
• <sub>: The containing text is subscript text (displayed lower).
• <sup>: The containing text is superscript text (displayed higher).
• <time>: A semantic tag used to display dates, times, or durations (often with a datetime attribute for machine-readable format).
• <u>: Displays the containing text with a solid underline. Use sparingly, as it can be confused with links. Often used for non-textual annotations like spelling errors.
• <var>: The containing text is a variable in a mathematical expression or programming context.

Embedded content and media tags

Tags for including external content or media.

• <audio>: Used to embed audio in web pages.
• <canvas>: Used to render 2D and 3D graphics dynamically on web pages (usually via JavaScript).
• <embed>: Used as a containing element for external content provided by an external application (legacy, often avoided).
• <iframe>: Used to embed a nested web page (another HTML document).
• <img>: Embeds an image on a web page.
• <object>: Similar to <embed> but more standardized; can embed various external resources.
• <picture>: An element that contains one <img> element and one or more <source> elements to offer alternative images for different displays/devices (responsive images).
• <video>: Embeds a video on a web page.
• <source>: Specifies multiple media resources for <picture>, <audio>, and <video> elements (e.g., different formats or resolutions).
• <svg>: Used to define Scalable Vector Graphics within a web page.

Table tags

Tags for creating and structuring tabular data.

• <table>: Defines a table element to display table data.
• <thead>: Represents the header content (group of header rows) of a table. Typically contains one or more <tr> elements with <th> cells.
• <tbody>: Represents the main content (group of data rows) of a table. Contains one or more <tr> elements with <td> cells.
• <tfoot>: Represents the footer content (group of footer rows) of a table. Typically contains one or more <tr> elements with <td> or <th> cells.
• <tr>: Represents a row in a table.
• <td>: Represents a data cell in a table (standard cell).
• <th>: Defines a header cell of a table (used for row or column headers).
• <caption>: Defines the caption (title) of a table element. Should be the first child of <table>.
• <colgroup>: Defines a semantic group of one or more columns in a table for formatting.
• <col>: Defines semantic properties for a column within a <colgroup>. Usually empty, uses attributes like span.