كيفية هيكلة مستند HTML جديد

HTML (لغة ترميز النص التشعبي) هي العمود الفقري لمحتوى الويب، حيث توفر بنية للمعلومات المعروضة على مواقع الويب. يتبع كل مستند HTML بنية أساسية تتضمن عناصر أساسية. دعونا نتعمق في المكونات الرئيسية.

1. '<!DOCTYPE html>'

يحدد هذا الإعلان نوع المستند وإصدار HTML المستخدم. بالنسبة لصفحات الويب الحديثة، من المعتاد استخدام "<!DOCTYPE html>".

2. '<html>'

يقوم العنصر الجذر بتغليف مستند HTML بأكمله.

3. '<head>'

يحتوي قسم الرأس على معلومات تعريفية حول المستند، مثل العنوان ومجموعة الأحرف وأوراق الأنماط المرتبطة.

4. '<title>'

يقوم هذا العنصر بتعيين عنوان مستند HTML الذي يظهر في علامة تبويب أو نافذة المتصفح.

5. '<body>'

يحتوي عنصر النص على محتوى مستند HTML، بما في ذلك النصوص والصور والروابط والمزيد.

مثال مستند HTML

الآن، دعونا نجمع كل ذلك معًا في مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My HTML Document</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple example of an HTML document.</p>
    <img src="example.jpg" alt="An example image">
    <a href="https://www.example.com">Visit Example.com</a>
</body>
</html>

في هذا المثال، استبدل "My HTML Document" بالعنوان المطلوب واضبط المحتوى داخل '<body>' وفقًا لذلك. إن فهم هذا الهيكل الأساسي يضع الأساس لإنشاء صفحات ويب جيدة التنظيم وذات معنى لغويًا.

المكافأة: إغلاق العلامات

عند إنشاء صفحة HTML، من المهم التأكد من إغلاق جميع العلامات بشكل صحيح، لتجنب مشكلات تدفق الصفحة والعرض. للمساعدة في هذه المهمة، راجع أداة فحص العلامات غير المغلقة لـ HTML لاكتشاف المشكلات الهيكلية في كود HTML الخاص بك.

html مستند رأس نص ميتا عنوان div p img a h1 lang charset viewport