سند معتبر HTML

در مثال هایی که تا الان بررسی کردیم همیشه از یک تکه کد HTML استفاده می کردیم. اگر بخواهیم یک صفحه وب را بسازیم HTML ما نیاز به یک ساختار خاص دارد تا معتبر باشد.

زمانی که کد HTML معتبر باشد:

  • به درستی در تمام مرورگر ها نمایش داده می شود.
  • خطایابی آن ساده است.
  • نگهداری آن بهتر و ساده تر انجام می شود.

Doctype

اولین اطلاعاتی که باید در یک سند HTML نوشته شود مشخص کردن نوع سند می باشد.

در گذشته چندین نسخه HTML همزمان وجود داشتند اما امروزه فقط کافی است نوع سند را HTML5 یا همان نسخه پنج تعیین کنیم.

برای این کار کافی است خط زیر را در اول هر سند قرار دهیم:


<!DOCTYPE html>

عنصر <html>

به غیر از قسمت Doctype تمام کدهای سند HTML باید درون عنصر <html> قرار بگیرند:


<!DOCTYPE html>
<html>
  <!-- همه چیز اینجا قرار می گیرد -->
</html>

از نظر فنی عنصر <html> جد تمام عناصر می باشد. به این عنصر، عنصر ریشه (root) نیز می گویند.

همانطور که ویژگی ها حامل اطلاعات اضافی برای عناصر HTML هستند، عنصر <head> حامل اطلاعات اضافی برای تمام صفحه وب می باشد.

به عنوان مثال عنوان سایت با استفاده از عنصر <title> مشخص می شود که این عنصر باید درون عنصر <head> قرار بگیرد:


<head>
  <title>عنوان سایت</title>
</head>

عناصر دیگری که در عنصر <head> قرار می گیرند:

  • <link>
  • <meta>
  • <style>

عنصر <body>

تمام محتوای صفحه درون عنصر <body> قرار می گیرد. هر آنچه که درون این عنصر قرار بگیرد درون مرورگر نمایش داده می شود.

یک سند معتبر

تکه کد زیر نمونه یک سند معتبر است و همیشه نقطه شروع ساختن یک صفحه وب می باشد:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS-Tricks.ir</title>
    <meta name="description" content="آموزش جامع طراحی صفحات وب">
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

اگر این تکه کد را درون مرورگر باز کنیم خواهیم دید که عبارت CSS-Tricks.ir بر روی تب مرورگر نمایش داده می شود و همینطور عبارت Hello World! تنها محتوایی است که درون پنجره مرورگر نمایش داده می شود چرا که تنها محتوایی است که درون عنصر <body> قرار داده ایم.

تست اعتبار سند HTML

برای اینکه کد HTML را اعتبارسنجی کنیم کافی است به آدرس validator.w3.org برویم تا این سرویس خطاهای سند را برای ما نمایش دهد.

ساخت سند HTML فارسی

اگر تا الان مانند کد زیر سعی به نوشتن کلمات فارسی در سند HTML کرده اید در خروجی دیده اید که حروف فارسی به درستی نمایش داده نمی شوند:


<!DOCTYPE html>
<html>
  <head>
    <title>CSS-Tricks.ir</title>
    <meta name="description" content="آموزش جامع طراحی صفحات وب">
  </head>
  <body>
    <p>سلام دنیا!</p>
  </body>
</html>

برای ساخت یک صفحه فارسی باید چند قدم زیر را انجام دهیم:

اول اینکه در زمان ذخیره فایل، Encoding فایل را بر روی گزینه UTF-8 قرار دهیم:

 
ساخت سند HTML فارسی
 

همینطور باید عنصر <meta> زیر را در عنصر <head> گذاشته تا مشخص کنیم کاراکترهایی که در این صفحه استفاده می کنیم در محدوده UTF-8 قرار دارند:


<meta charset="utf-8">

و در نهایت اگر می خواهیم چیدمان صفحه از راست به چپ باشد باید به عنصر <html> ویژگی dir را با مقدار rtl تنظیم کنیم. و همچنین بهتر است که زبان صفحه را توسط ویژگی lang نیز مشخص کنیم:


<html dir="rtl" lang="fa">

در نهایت یک تکه کد معتبر برای شروع کار با یک سند HTML فارسی به صورت زیر خواهد بود:


<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="utf-8">
    <title>CSS-Tricks.ir</title>
    <meta name="description" content="آموزش جامع طراحی صفحات وب">
  </head>
  <body>
    <p>سلام دنیا</p>
  </body>
</html>

3 دیدگاه برای “سند معتبر HTML”

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *