لطفا صبر کنید...

آموزش رایگان فرانت اند؛ جلسه هشتم Semantic HTML

سلام خدمت دوستان و همراهان عزیز هولوسن

این دوره برنامه نویسی فرانت اند (front-end) تحت وب، با زبان های HTML و CSS را شامل می‌شود.

در جلسه اول با معرفی برنامه نویسی وب در خدمتتان بودیم. و در جلسات گذشته با زبان HTML آشنا شدیم و همینطور با ساخت اولین صفحه HTML ، اکستنشن‌های VSCode و Chrome ، لینک‌ها و تصاویر آشنایی با استایل‌ها، کامنت، جداول، لیست‌ها و تگ div در خدمتتان بودیم. همینطور در جلسه قبل تحت عنوان تگ‌های فرم در خدمتتان بودیم. در این جلسه قرار است تا با تگ‌های معنادار یا سمنتیک در HTML آشنا شویم.

پس با ما همراه باشید. ?‍?
مارو هم از نظرات خوب خودتون بی بهره نذارید. ❤?

جهت دانلود فایل‌های این جلسه اینجا کلیک کنید

اکثر تگ‌هایی که دیدیم مثل تگ‌های a، div، ol، li تگ‌های غیر معنادار هستند. یعنی فرض کنید کسی که با زبان انگلیسی آشنا است، با دیدن این تگ‌ها نمی‌تواند حدس بزند که این تگ‌ها چه کاری انجام می‌دهند. اما تگ‌های معنادار مثل address، aside، section، footer یک انگلیسی زبانی که کمی با HTML آشنا باشد، می‌تواند حدس بزند که کاربرد این تگ‌ها کجاست. مثلا می‌تواند حدس بزند که footer به عنوان پاورقی سایت در پایین استفاده خواهد شد. به این تگ‌ها، تگ‌های معنادار می‌گوییم. البته برخی از وب‌سایت‌ها به غلط فقط تعدادی از تگ‌های HTML5 را مثل article و section و aside و امثالشان را به عنوان تگ معنادار می‌شناسند.

semantic html tags

حالا که به انتهای بخش HTML رسیدیم باید نکته‌ای را در رابطه با تگ‌های HTML بدانید. برخی از تگ‌های HTML بلاکی (block-level) هستند و برخی دیگر این‌لاین (inline) هستند.

به طور خلاصه تفاوت این دو نوع تگ در این است که زمانی که از تگ‌های بلاکی استفاده می‌کنیم، کل عرض صفحه را می‌گیرند ولی تگ‌های inline را می‌توانیم وسط تگ‌های دیگر استفاده کنیم، به شکلی که فقط اندازه خودشان فضا اشغال می‌کنند.

تگ‌های بلاکی شامل :