HTML چیست – تعریف و معنی زبان نشانه گذاری فرامتن

HTML یا Hypertext Markup Language یک زبان نشانه گذاری برای وب است که ساختار صفحات وب را تعریف می کند. این یکی از اساسی ترین بلوک های سازنده هر وب سایت است، بنابراین اگر می خواهید در توسعه وب حرفه ای داشته باشید، یادگیری آن بسیار مهم است. در این مقاله، من شما را با جزئیات مربوط به HTML آشنا می‌کنم، چگونه کارها را در صفحات وب انجام می‌دهد، و همچنین بخش بسیار جالبی از HTML – HTML معنایی را لمس خواهیم کرد.

HTML چیست؟

برای درک “HTML” از جلو به عقب، اجازه دهید به هر کلمه ای که مخفف را تشکیل می دهد نگاه کنیم: فرامتن: متنی (اغلب با جاسازی هایی مانند تصاویر نیز) که به منظور اتصال موارد مرتبط سازماندهی شده است. نشانه گذاری: راهنمای سبک برای حروفچینی هر چیزی که باید در قالب نسخه چاپی یا نسخه نرم افزاری چاپ شود زبان: زبانی که سیستم کامپیوتری آن را می فهمد و برای تفسیر دستورات از آن استفاده می کند. HTML ساختار صفحات وب را تعیین می کند. این ساختار به تنهایی برای خوب و تعاملی جلوه دادن یک صفحه وب کافی نیست. بنابراین از فناوری های کمکی مانند CSS و جاوا اسکریپت برای زیباتر کردن HTML و افزودن تعاملی به ترتیب استفاده خواهید کرد. در این مورد، من دوست دارم سه فناوری – HTML، CSS و جاوا اسکریپت را به این ترتیب تجزیه کنم: آنها مانند بدن انسان هستند. HTML اسکلت است،

CSS پوست است، و جاوا اسکریپت سیستم گردش خون، گوارشی و تنفسی است که ساختار و پوست را زنده می کند. همچنین می توانید به HTML، CSS و جاوا اسکریپت به این صورت نگاه کنید: HTML ساختار یک خانه است، CSS دکوراسیون داخلی و خارجی است، و جاوا اسکریپت سیستم برق، آب و بسیاری از ویژگی های کاربردی دیگر است که خانه را قابل زندگی می کند.

تگ های HTML

از آنجایی که HTML نشانه گذاری را برای یک صفحه وب خاص تعریف می کند، می خواهید متن، تصاویر یا جاسازی های دیگر به روش های خاصی ظاهر شوند. به عنوان مثال، ممکن است بخواهید برخی از متن 

 

ها بزرگ، متن های دیگر کوچک و برخی به صورت پررنگ، مورب یا به صورت نقطه گلوله باشند. HTML دارای “برچسب” است که به شما امکان می دهد این کار را انجام دهید. بنابراین، برچسب هایی برای ایجاد عنوان، پاراگراف، کلمات پررنگ، کلمات مورب و موارد دیگر وجود دارد. تصویر زیر تشریح آناتومی یک تگ HTML است:

عناصر HTML

یک عنصر از تگ آغازین، یک کاراکتر، محتوا و یک تگ پایانی تشکیل شده است. برخی از عناصر خالی هستند – یعنی برچسب بسته شدن ندارند اما در عوض منبع یا پیوندی به محتوایی دارند که می‌خواهید در صفحه وب جاسازی کنید. مثالی از یک عنصر خالی <img> است که از آن برای جاسازی تصاویر در یک صفحه وب استفاده می کنید.

عناصر HTML اغلب به جای تگ ها استفاده می شوند، اما تفاوت کوچکی بین این دو وجود دارد. یک عنصر ترکیبی از تگ باز و بسته و سپس محتوای بین آنهاست. من یک تصویر دیگر ساختم تا به شما کمک کنم آناتومی یک عنصر HTML را تجسم کنید:

ویژگی های HTML

تگ‌های HTML نیز آنچه را که صفت نامیده می‌شود، می‌گیرند. این ویژگی ها در تگ افتتاحیه قرار می گیرند و از style و id تا کلاس ها را شامل می شود. آنها مقادیری را دریافت می کنند که اطلاعات بیشتری را در مورد عنصر منتقل می کند و به شما کمک می کند کارهایی مانند استایل سازی و دستکاری با جاوا اسکریپت را انجام دهید.

در اینجا آناتومی یک صفحه اصلی HTML آمده است:

!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Definition of HTML</title>
  </head>
  <body>
    <!--Page content such as text and images goes in here-->
  </body>
</html>

بیایید به بیت های مهم کد در اینجا نگاه کنیم: <!Doctype html>: مشخص می کند که ما از HTML5 در این کد استفاده می کنیم. قبل از معرفی HTML5، باید به صراحت بیان می کردید که در کدام نسخه از HTML با تگ <!Doctype> کدنویسی می کنید. به عنوان مثال، HTML4.0، 3.2، و غیره. اما اکنون دیگر نیازی به آن نداریم. هنگامی که “html” در کد نوشته می شود، مرورگر به طور خودکار فرض می کند که شما در حال کدنویسی در HTML5 هستید. <html></html>: عنصر اصلی یا سطح بالای هر سند HTML. هر عنصر دیگری باید در آن پیچیده شود. <head></head>: یکی از مهم ترین بخش های سند HTML. خزنده های وب به داخل تگ های سر نگاه می کنند تا اطلاعات مهمی در مورد صفحه به دست آورند. این شامل اطلاعاتی مانند عنوان صفحه، شیوه نامه، اطلاعات متا برای سئو و بسیاری موارد دیگر است. <meta />: این یک عنصر خالی است که متا اطلاعات صفحه را منتقل می کند. چنین اطلاعاتی ممکن است شامل نویسنده، نوع رمزگذاری مورد استفاده (تقریباً همیشه UTF-8)، پاسخگویی، سازگاری و موارد دیگر باشد. خزنده های وب همیشه به متا تگ نگاه می کنند تا اطلاعاتی در مورد صفحه وب به دست آورند که نقش مهمی در سئو خواهد داشت. <title></title>: عنوان صفحه وب را مشخص می کند. همیشه در تب مرورگر نشان داده می شود. <body></body>: تمام محتوای سند HTML در داخل th قرار داردHTML چیست - تعریف و معنی زبان نشانه گذاری فرامتن

برچسب بدن فقط یک تگ <body> در کل صفحه می تواند وجود داشته باشد

Semantic HTML چیست؟

HTML معنایی به این معنی است که تگ‌های HTML شما معنای واقعی چیزی را که برای آن استفاده می‌شوند را منتقل می‌کنند. معناشناسی بخشی جدایی ناپذیر از HTML از زمان پیدایش آن در اوایل دهه 90 بوده است. اما تا اواخر دهه 90 که CSS در اکثر مرورگرها شروع به کار کرد، هرگز اهمیت خاصی پیدا نکرد. در HTML معنایی، برچسب‌های خنثی معنایی مانند <div> و <span> مورد توجه قرار نمی‌گیرند، زیرا از نظر معنایی برچسب‌های توصیفی‌تر مانند <header>، <nav>، <main>، <section>، <footer> و <article> می توانند همان کاری را که انجام می دهند انجام دهند.

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

برچسب های معنایی مهم و کاری که انجام می دهند

بیایید به برخی از متداول‌ترین تگ‌های معنایی HTML نگاهی بیندازیم: <header>: عنصر <header> بخش مقدماتی یک صفحه وب را تعریف می کند. این شامل مواردی مانند لوگو، ناوبری، تعویض تم و نوار جستجو است. <nav>: عنصر <nav> موارد پیمایش صفحه مانند خانه، مخاطب، درباره، پرسش‌های متداول و غیره را مشخص می‌کند. <main>: عنصر <main> معمولاً به‌عنوان نواده فوری تگ در نظر گرفته می‌شود. این شامل بخش های اصلی سند HTML جدا از <header> و <footer> است. در حالت ایده آل، باید فقط یکی از این موارد در کل سند HTML وجود داشته باشد. <section>: عنصر <section> بخش خاصی از صفحه وب را تعریف می کند. این ممکن است بخش ویترین، بخش درباره، بخش تماس یا موارد دیگر باشد. شما می توانید از بخش های متعدد در یک سند HTML استفاده کنید

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

<aside>: همانطور که از نام آن پیداست، این نشان دهنده یک نوار کناری در یک صفحه وب است. معمولاً بخشی از صفحه وب است که مستقیماً با محتوای اصلی مرتبط نیست. <footer>: عنصر <footer> مواردی مانند پیوندهای سریع، اطلاعات حق چاپ یا هر داده دیگری مربوط به کل وب سایت یا صفحه وب را در خود جای می دهد. توجه داشته باشید که از آنجایی که عناصر معنایی معنای واقعی و آنچه را که برخی از محتوای خاص واقعا انجام می‌دهند (مانند ناوبری برای پیمایش، کنار گذاشتن نوار کناری و غیره) منتقل می‌کنند، این عناصر به طور خودکار در جایی که قرار است قرار بگیرند قرار نمی‌گیرند. شما هنوز باید این کار را با CSS انجام دهید. یک سند HTML معنایی بسیار ساده به شکل زیر است: <!DOCTYPE html> <html lang=”en”>

 

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

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

گروه ارتباطات شبکه های آماتیس
سبد خرید
empty basket

هیچ محصولی در سبد خرید نیست.