هيكل عظمي جيد HTML

StackOverflow https://stackoverflow.com/questions/4134019

  •  30-09-2019
  •  | 
  •  

سؤال

أريد أن أبدأ في إنشاء مواقع ويب مرة أخرى ، لكنني خرجت من مشهد HTML لفترة من الوقت الآن. كنت أتساءل فقط عما إذا كان هذا هيكل عظمي جيد لموقع ويب. وإذا لم يكن الأمر كذلك ، فما الذي يجب أن أغيره وأضفه و/أو إزالته؟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
    <head>
        <rel="stylesheet" type="text/css" href="css/main.css" />
        <meta http-equiv="content-type" content="text/php; charset=utf-8" />

        <title>Site Template - Welcome!</title>
    </head>

    <body>
        <div class="Container">
            <div class="Header">

            </div>

            <div class="Menu">
                <ul id="nav"> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                </ul> 
            </div>

            <div class="Body">

            </div>
        </div>

    </body>

    <footer>
        <div class="Footer">
            <b>Copyright - 2010</b>
        </div>
    </footer>
</html>
هل كانت مفيدة؟

المحلول

محاولة www.htmlshell.com, ، يمكنك الحصول على هيكل عظمي أساسي هناك ، مع تشمل اختياري لأشياء مثل jQuery أو Favicons ، إلخ.

نصائح أخرى

لقد بدأت مع HTML5 Boilerplate ... يساعد في التأكد من أن كل شيء هو الأكثر اتساقًا عبر المتصفحات المختلفة ويأخذ بالفعل في الاعتبار غالبية الأشياء التي سأحتاجها لاحقًا.

TL ؛ د

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <link rel="stylesheet" href="/default.css">
  <link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">
  <link rel="canonical" href="http://example.com/">
  <meta name="description" content="…">
</head>
<body>

  <header>
    <!-- site-wide header -->
    <h1>Example <!-- site name --></h1>
  </header>

  <main>
    <!-- this page’s main content -->
  </main>

  <nav>
    <!-- site-wide navigation -->
  </nav>

  <footer>
    <!-- site-wide footer -->
  </footer>

</body>
</html>

و HTML5 يمكن أن يبدو الهيكل العظمي هكذا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CC</title>
</head>
<body>

</body>
</html>

(لاحظ أن هذا ليس معظم وثيقة HTML5 الحد الأدنى, ، الكثير من الأجزاء اختيارية.)

إذا كنت تستخدم ترميزًا مختلفًا عن UTF-8 ، فقم بتغيير قيمة meta-charset وفقاً لذلك.

إذا كنت تستخدم لغة محتوى مختلفة عن اللغة الإنجليزية ، فقم بتغيير قيمة lang ينسب وفقاً لذلك.

إذا كنت ترغب في تحديد الاتجاه النص الصريح ، فاستخدم ملف dir ينسب على ال html العنصر ، على سبيل المثال: <html dir="ltr" lang="en">

مشترك link/meta عناصر لإضافتها إلى head

  • الارتباط بـ A. ورقة الأنماط (text/css يفترض افتراضيًا):

    <link rel="stylesheet" href="/default.css">

  • الارتباط بـ A. Favicon:

    <link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">

  • تحديد عنوان URL الكنسي من الوثيقة:

    <link rel="canonical" href="http://example.com/">

  • توفير وصف محتوى الصفحة: 

    <meta name="description" content="…">

عناصر ل body

نظرًا لأن كل صفحة مختلفة ، لا يمكن الإجابة على هذا بشكل عام ، لذلك قد يكون من الأفضل ترك body فارغة.

ومع ذلك ، من المحتمل أن تكون معظم الصفحات جزءًا من موقع ويب ، وربما تحتوي معظم مواقع الويب على رأس على مستوى الموقع (→ header) مع اسم الموقع (→ h1) ، تذييل (→ footer) وقائمة التنقل (→ nav). هذه يجب أن تنتمي إلى body جذر التقسيم (أي ، ليس لديك عنصر محتوى قسم آخر كوالد). ال nav قد يكون أو لا يكون جزءًا من header.
المحتوى الرئيسي (→ main) قد تتكون أو لا تتكون من عنصر تقسيم (عادة article أو section, أو مضاعفها).

<header>
  <!-- site-wide header -->
  <h1>Example <!-- site name --></h1>
</header>

<main>
  <!-- this page’s main content -->
</main>

<nav>
  <!-- site-wide navigation -->
</nav>

<footer>
  <!-- site-wide footer -->
</footer>

لا يوجد شيء مثل أ <footer> عنصر في XHTML 1.0 الانتقالية. يجب أن تفعل ذلك مثل هذا:

<body>
    ...
    <div class="footer">
        ...
    </div>
</body>

أحب استخدام doctype صارمة في مشاريعي ، ولكن يعمل أيضًا.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main/css.css">
        <meta http-equiv="content-type" content="text/html;charset=utf-8">

        <title>Site Template - Welcome!</title>
    </head>

    <body>
        <div class="Container">
            <div class="Header">

            </div>

            <div class="Menu">
                <ul id="nav"> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                </ul> 
            </div>

            <div class="Body">

            </div>
            <div class="Footer">
                Copyright - 2010
            </div>
        </div>
    </body>
</html>

ال W3C DOM المستوى 1 CORE هو مكان جيد للبدء:

<!DOCTYPE html>
<html>
<head>
  <title>My Document</title>
</head>
<body>
</body>
</html>

يتيح لك W3C DOM المستوى 1 تغيير شجرة المحتوى بأي طريقة أنت يريد. إنه قوي بما يكفي لبناء أي مستند HTML من نقطة الصفر.

من هناك يمكنك إضافة أي خيار (<html lang="en">, <meta charset="utf-8">, ، إلخ) ، العنصر (link,main, nav, div, footer, ، وما إلى ذلك) أو تبعية المكتبة (jQuery ، bootstrap ، وما إلى ذلك) ، بناءً على احتياجاتك وتفضيلاتك.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top