وبلاگ شخصی مهدی مشتاقی

Semantic HTML چیست؟

Semantic HTML چیست؟

این سوالیه که تا حالا واسه خیلی‌ها (از جمله خود من و همین هفته قبل) پیش اومده باشه، که مردم (علی ستاری) چی می‌گن؟ html معنایی چه سیغه‌ایه!!!
اما بیشتر نمی‌دونن که Semantic HTML چیه! شاید بنظر بیاد که یک تکنولوژی عجیب و غریبه که فقط طراحان حرفه‌ای وب ازش خبر دارن.
اما خیلی ساده‌تر از این حرف هاست. شما وقتی کد HTML رو می‌نویسید، دارید از Semantic HTML استفاده می‌کنید. (اگرچه ممکنه از تمام ظرفیت‌های آن بهره نبرید)
در این مقاله (و شاید مقالات بعدی) توضیحی در مورد Semantic HTML داده می‌شه و شما می‌تونید با تمرین‌های بسیارساده HTML، این رو کاملاْ درک کنید. و با استفاده از اون به رتبه سایت خود در موتور‌های جستجو کمک بسزایی کنید. ( همونطور که بیشتر شما می‌دونید، Semantic HTML یکی از اصول SEO هست و تاثیر زیادی بر رتبه سایت در موتورهای جستجو داره )

Semantic HTML همون HTML هست!!!

اولین مسيله برای درک این موضوع اینه که Semantic HTML همون HTML قانون‌مند و استاندارده!
مطمئن باشید که قبل از این هم از ویژگی‌های HTML استفاده کرده‌اید، یعنی توانایی استفاده از این رو داشتید و فقط نمی دونستید که دارید یک Semantic HTML می‌نویسید.

معنایی بودن یعنی چی؟

خوب می‌شه گفت معنایی بودن، برداشتی از مقصود و معنای کلمات است. وقتی دوست دخترتون از شما بپرسه که: عزیزم امروز حالت چطوره؟. ۱۰۰٪ منظورش جویای احوال شما شدن نیست! و می‌خواد مراسم خاصی واسه خودش راه بندازه!!! حالا بحث درباره نوع مراسم به شما و اون مربوط می‌شه!!!

به این مثال‌های بسیار ساده و آشنای Semantic HTML دقت کنید

می‌شه با استفاده از المنت <p> متنی رو بعنوان پاراگراف تعیین کرد.

In neveshteha chizi joz paragraf nemitoone bashe

شاید بخواهید در نوشتهاتون، حرفی رو از شخص دیگری نقل کنید. برای فهموندن این موضوع به HTML می‌تونید از المنت‌های <q> و یا <blockquote> استفاده کنید.

Mehdi Goft
<blockquote>Inam az kare nesfe shabe maa!!!</blockquote>

اگر بخواهید که به بار معنایی نقل قولتان اضافه کنید، می‌شه جایی رو که مهدی صحبت کرده رو مشخص کنید. (آدرس وبلاگ، مقاله و یا …) به کد پایین نگاه کنید.

Mehdi Goft,
<blockquote cite="http://www.moshtaghi.ir/archive/semantic-html">Inam az kare nesfe shabe maa!!!</blockquote>

کلاس‌های HTML

HTML خصیصه Class را هم پیش بینی کرده. زمانی که ما المنت خاصی برای فهماندن محتوا نداریم، می‌شه از این ویژگی استفاده کرد. برای مثال به المنتی برای تعیین کردن مقاله (article) نیازمندیم و این در حالی است که المنتی بنام <article> نداریم. بنابراین باید اینگونه عمل کنیم:

<div class="article">
yek maghaleye besiar jaleb va mohem dar morede masaele besiar khas!</div>

<div> و همینطور <span> نوعی المنت فضای خالی هستند. زمانی که شما مجبور به ایجاد نوعی المنت خاص می‌شوید ایندو می‌تونند بسیار مفید باشند.
نکته – بسیاری از طراحان تصور می‌کنند که خاصیت CLASS فقط برای استایل دادن به صفحات است. این درسته، اما می‌شه پا رو از این هم فراتر گذاشت و از اونها برای معنا بخشیدن به کدهامون استفاده کرد. این یکی از مشخصه‌های HTML هست و خیلی‌ها از اون بهره می‌برند. برای مثال نمونه کدی که توی ۹۰٪ سایت‌ها استفاده می‌شه

<div class="footer">
matni monaseb jahate footere site</div>

بسیاری از طراحان از این کد برای نمایش و فهماندن فوتر سایت خود استفاده می‌کنند.چون المنتی بنام <footer> نداریم!!!
به این مثال هم دقت کنید.

<code class="php">echo "in yek tekke code PHP ast!";</code>

با استفاده از المنت <code> به کد بودن محتوا اشاره شده، و با دادن کلاس php این مسئله روشن می‌شود که کد مزبور به زبان php است.

این مقاله تنها مقدمه‌ای از Semantic HTML بود، مطلبی در مورد چگونگی معنا دادن به HTML.
به احتمال زیاد ادامه دارد.

[+] میکرو فرمت

مطالب مرتبط

• استفاده از وردپرس به عنوان یک فریم‌ورک PHP
• اصولی برای داشتن کدی تمیز و بی نقص