همانطور که قبلا در مقاله اصول مهم طراحی سایت گفتیم، اولین قاعده مهم در طراحی سایت، قاعده ساختار یافته (structured) است که در این مقاله به طور مفصل به آن می‌پردازیم.

این قاعده بدین معناست که محتوای html حتی بدون استایل و css هم باید معنی دار باشد. در اینجا ابزاری که استفاده می‌کنیم اعم از سطح‌های عناوین (h1,h2,.h3,h4…)، لیست‌ها (ul,ol) و همچنین تگ‌های معنی دار مثل

< header > یا < article > و …. مورد اهمیت هستند. نباید استفاده از aria-labelها را نادیده گرفت، همچنین موارد دیگری مثل ویژگی alt یا امثال آن باید در طراحی سایت استفاده شوند.

شاید در ظاهر استفاده از تگ < a >  یا < button > فرقی نداشته باشد، اما در اصل این دو باهم متفاوت است چراکه معنی و تعاملات متفاوتی دارند. تمامی مواردی که فایل را برای موتور جستجو معنی دار می‌کند، در این بخش از طراحی سایت مهم هستند.

ایجاد فایل html ساختاریافته خوب به معنی نوشتن html معنی دار(semantic HTML) است. می‌توانید با پاسخ چند سئوال زیر فایل html خود را ارزیابی کنید:

• آیا بدون css قابل استفاده است؟
• آیا بدون css سلسله مراتب را دارد؟
• آیا html خام به تنهایی معنی دارد؟

بهترین راه این است که قبل از نوشتن هر گونه استایلی، html خود را به ترتیب و معنی دار بنویسید. نوشتن را نادیده بگیرید و در مورد اینکه آن بخش چه چیزی باید باشد فکر کنید. همین قدم کوچک در طراحی سایت کمک خیلی زیادی به شما برای رسیدن به html ساختاریافته خوب می‌کند.

<section>
  <header> 
    <h2>اصول مهم</h2>
    <strong>Sort
</strong>
<span class="caret"></span>
    <ul>
      <li><a href="#">جدیدترین</a></li>
      <li><a href="#">اقتصادی ترین</a></li>
      <li><a href="#">معروف ترین</a></li>
   </ul>
    <hr />
  <header>
  <ul>
    <li aria-labelledby="prod7364536">
      <a href="#">
        <img src="prod7364536.jpg" alt="12 Night Therapy Euro Box Top Spring" />
        <small>زمان باقیمانده: 2روز</small>
        <h3 id="prod7364536">12" Night Therapy Euro Box Top Spring</h3>
        <strong>100.000 تومان</strong>
        <small>120.000 تومان</small>
        <span class="callout">2 روز مانده</span>
      </a>
    </li>
  </ul>
</section>

نوشتن html و فکر کردن به اینکه معنی هر عنصر چه معنایی دارد، HTML ساختاریافته‌ای را به شما خواهد داد. همان طور که در مثال بالا مشاهده می‌کنید، تمام مثال بدون استفاده از است.