semantic-html5

Semantic HTML چیست؟

Semantic HTML یا Semantic markup یا المنت های معنار دار یعنی: معنا بخشیدن به زبان. البته منظورمان زبان نشانه گذاری یا همان HTML5 است. به طوری که برای محتوا (content) در صفحه ی اچ تی ام ال از المنت های با معنی و با مفهوم آن استفاده شود. مثلا اگر یک پاراگراف متن داریم از چه المنتی برای نمایش آن استفاده کنیم. اینکه دقیقا بدونیم از کدام المنت اچ تی ام ال (HTML Element) یا کدام تگ برای نمایش محتوای سایتمان استفاده کنیم. تگ ها یا المنت های HTML5 را به خوبی بشناسیم و تشخیص دهیم که کدام المنت را کجا استفاده کنیم. به این میگن سمانتیک بودن (semantic) یا با معنی.به عنوان یک طراح وب دانستن معنا و مفهوم المنتی که از آن استفاده می کنید بسیار ضروری است. اینکه در چه قسمتی از کدام المنت استفاده کنیم مهم است. امیدوارم که منظورم را از semantic به خوبی متوجه شده باشید.

 

بحث سمانتیک بودن در اچ تی ام ال ۵ با معرفی المنت های جدید بسیار جدی تر شد

 

برخی تغییرات جدید در HTML5

  • بهبود معنایی المنت ها تمرکز اصلی در HTML5 بود
  • افزایش قدرت مارک آپ (markup) با المنت های جدید
  • افزایش ساختار سند با طرح کلی (outline) قانون های جدید
  • ایندکس شدن بهتر صفحات توسط موتورهای جستجو مانند گوگل

 

به عکس زیر نگاه کنید. یک جمله از نیچه. مناسب ترین تگ برای نمایش آن چیست؟ میشه از تگ <p> استفاده کرد ولی بهترین انتخاب نیست. چون این یک نقل قول است بهترین تگی که میشه برای نمایش آن استفاده کرد استفاده از تگ <blockquote> است. همچنین برای نمایش نام کسی که نقل قول را بیان کرده بهترین روش استفاده از تگ <cite> است.

سمانتیک

اینکه از کدام تگ برای نمایش کدام منظور استفاده کردید، برای قضاوت به میزان تسلط شما به HTML5 کافی است

گفتگوی دو نفر مانند شکل زیر است. چگونه آن را مارک آپ می کنید؟ (از کدام تگ برای نمایش آن استفاده می کنید)

گفتگو

آیا به این شکل مارک آپ می کنید؟

  
  <p>سعید</p>
  <p>سلام پاشا، خوبی؟</p>

  <p>پاشا</p>
  <p>سلام سعید مرسی خوبم. تو چطوری؟</p>

  <p>سعید</p>
  <p>منم خوبی. بالاخره دوربین جدیدم رو خریدم</p>

  <p>پاشا</p>
  <p>وای چه عالی. خوشحالم می شنوم. کی قرار بزاریم؟</p>
  

یا اینکه

  
      <dl class="chat">

      <dt>سعید</dt>
      <dd>سلام پاشا، خوبی؟</dd>
    
      <dt>پاشا</dt>
      <dd>سلام سعید مرسی خوبم. تو چطوری؟</dd>
    
      <dt>سعید</dt>
      <dd>منم خوبی. بالاخره دوربین جدیدم رو خریدم</dd>
    
      <dt>پاشا</dt>
      <dd>وای چه عالی. خوشحالم می شنوم. کی قرار بزاریم؟</dd>
    
      </dl>
  

و یا

    
        <blockquote>

        <cite>سعید</cite>
        <p>سلام پاشا، خوبی؟</p>
      
        <cite>پاشا</cite>
        <cite>سلام سعید مرسی خوبم. تو چطوری؟</cite>
      
        <cite>سعید</cite>
        <p>منم خوبی. بالاخره دوربین جدیدم رو خریدم</p>
      
        <cite>پاشا</cite>
        <cite>وای چه عالی. خوشحالم می شنوم. کی قرار بزاریم؟</cite>
      
        </blockquote>
    

بهترین حالت کدام است؟

نویسنده: سعید پناهی

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

پاسخی بگذارید

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

احتمالا از اینها هم خوشتون بیاد

آموزش css3

آموزش دستورات خاص و کاربردی در CSS3

در این مقاله تعدادی از دستورات جالب و کاربردی در CSS3 را بررسی می کنیم. دستوراتی که کمتر در مورد آن ها صحبت می شود اما دانستن آنها مهم و در طراحی کمک بزرگی به ما می کند. خوب پس در ادامه با من همراه باشید.

کارگاه آموزشی طراحی وب

کارگاه آموزشی طراحی و توسعه وب سایت به صورت پروژه محور و کارگاهی

بررسی واحدهای REM -EM – VH- VW و تفاوت بین آنها

برای مدت های طولانی طراحان و توسعه دهندگان وب سایت ها برای اندازه گذاری فونت، حاشیه و یا هر عنصر دیگری از واحد px که نشان دهنده پیکسل بود استفاده می کردند. اما امروزه با توجه به گسترش استفاده از دستگاه های مختلف مانند موبایل و تبلت برای نمایش وب سایت ها لزوم استفاده از واحدهایی که کنترل بیشتری به توسعه دهنده و طراح بدهد بیشتر شد. از این رو واحدهای rem و em تقریبا جای واحد px را گرفت.