أساسيات HTML5

لغة HTML (HyperText Markup Language) هي اللغة القياسية لإنشاء صفحات الويب. وتُعدّ HTML5 أحدث إصدار من هذه اللغة، وقد جاءت بالكثير من الميزات والتحسينات الجديدة.

البنية الأساسية لصفحة HTML5

إليك البنية الأساسية لصفحة HTML5:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
</head>
<body>
    <!-- Contenu de la page -->
</body>
</html>

وسوم HTML5 الدلالية

أدخلت HTML5 عدة وسوم دلالية تتيح هيكلة المحتوى بشكل أفضل:

• <header>: ترويسة الصفحة أو القسم
• <nav>: قسم التنقل
• <main>: المحتوى الرئيسي للصفحة
• <section>: قسم عام من المحتوى
• <article>: محتوى مستقل بذاته
• <aside>: محتوى ذو صلة لكنه منفصل
• <footer>: تذييل الصفحة

مثال على استخدام الوسوم الدلالية

<header>
    <h1>Mon Site Web</h1>
    <nav>
        <ul>
            <li><a href="/">Accueil</a></li>
            <li><a href="/blog">Blog</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</header>

<main>
    <section>
        <h2>À propos</h2>
        <p>Bienvenue sur mon site web...</p>
    </section>
    
    <article>
        <h2>Mon dernier article</h2>
        <p>Contenu de l'article...</p>
    </article>
    
    <aside>
        <h3>Articles connexes</h3>
        <ul>
            <li><a href="#">Article 1</a></li>
            <li><a href="#">Article 2</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>&copy; 2023 Mon Site Web</p>
</footer>

النماذج في HTML5

حسّنت HTML5 أيضًا النماذج عبر أنواع جديدة من حقول الإدخال والسمات:

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" required>
    
    <label for="website">Site web:</label>
    <input type="url" id="website">
    
    <label for="age">Âge:</label>
    <input type="number" id="age" min="0" max="120">
    
    <label for="birthday">Date de naissance:</label>
    <input type="date" id="birthday">
    
    <button type="submit">Envoyer</button>
</form>

عناصر الوسائط المتعددة

أدخلت HTML5 وسومًا أصلية للصوت والفيديو:

<video controls width="500">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Votre navigateur ne prend pas en charge la vidéo HTML5.
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Votre navigateur ne prend pas en charge l'audio HTML5.
</audio>

الخلاصة

توفّر HTML5 العديد من الميزات التي تسهّل إنشاء مواقع ويب حديثة وسهلة الوصول. فباستخدام الوسوم الدلالية المناسبة، لا تُحسّن بنية الشيفرة فحسب، بل تُحسّن أيضًا إمكانية الوصول إلى موقعك وظهوره في محركات البحث.

لتعميق معرفتك بـ HTML5، أنصحك بالاطلاع على الوثائق الرسمية لـ MDN (Mozilla Developer Network) والتدرّب بانتظام من خلال إنشاء مشاريع شخصية.