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>
    

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

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

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

دیدگاهتان را بنویسید

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

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

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

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

css-custom-property

تعریف و استفاده از متغیرها در CSS

مانند سایر زبان های برنامه نویسی که از متغیر ها برای نگهداری مقداری استفاده می شود که بتوان بعدا در هر زمان به آن مراجعه کرد، در سی اس اس هم برای نگهداری و یا ذخیره سازی مواردی مانند رنگ ها، نام فونت، اندازه فونت و … استفاده می شود و می توان در جاهای مختلف فایل سی اس اس آن را صدا کرد و از مقدار آن استفاده کرد. اسم رسمی و صحیح این متغیرها custom properties می باشد که معمولا در بین توسعه دهندگان و برنامه نویسان به نام متغیر جا افتاده است.

نصب و استفاده از npm

نصب و استفاده از NPM

NPM مخفف Node Package Manager است. یک پکیج منیجر یا مدیریت پکیجی است که برای NodeJs نوشته شده است. (npm قسمتی از پلتفرم NodeJs است) البته این به معنای آن نیست که حتما باید در پروژه هایی که با NodeJs نوشته می شوند از NPM استفاده کرد بلکه در خیلی از موارد دیگر هم می شود از آن استفاده کرد. اجرای دستورات NPM از طریق خط فرمان (Command line) صورت می گیرد. دانستن ان پی ام به تنهایی کاربردی ندارد اما پیش نیاز خیلی از تکنولوژی های دیگر وب است.