undefined
021 33328750 © THE ART OF PROGRAMMING -
بخش ششم: HTML معنایی

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

در یک عنصر مانند <p> Hello world! </ p>، قسمتهای <p> و </ p> تگ را تشکیل می دهند، در حالی که Hello world! محتوای داخل است. دلیل این که ما از <p>  استفاده می کنیم این است که برچسب <p>  مرتبط با پاراگراف در HTML است. یک پاراگراف می تواند یک جمله کوتاه یا چیزی طولانی تر باشد، اما در هر صورت، برچسب <p>  یک انتخاب معنایی است زیرا آنچه داخلش است، توصیف می کند.

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

چرا HTML  معنایی مهم است؟

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

سبک ها

اگر به آنچه مرورگر از نشانه های غیر معنایی و معنایی نشان می دهد، نگاه کنیم، می فهمیم بین این دو تفاوت وجود دارد.

 

 

مثال اول از برچسب های عمومی<div>  و <span>  برای نشانه گذاری محتوا استفاده می کند، در حالی که مثال دوم از نشانه گذاری معنایی مانند <p>  برای پاراگراف ها و<h1>  و <h2> برای عنوان ها استفاده می کند و<ol>  و<li >  برای لیست. بهبود معنایی در سراسر نشانه گذاری باعث می شود صفحه فوق بسیار شبیه به یک وب سایت کاربردی، به نظر برسد.

عملکرد

 نشانه گذاری معنایی علاوه بر بهبود ظاهری در اینکه همه چیز چگونه به نظر می رسند، می تواند چگونگی کارکرد آنها را نیز بهبود بخشد. وقتی که ما سعی می کنیم با این دو صفحه وب ارتباط برقرار کنیم، به آنچه اتفاق می افتد (یا اتفاق نمی افتد) دقت کنید

 

 

در مثال اول، ما از CSS برای نشانه گذاری غیرمنطقی، دقیقاً همانند نشانه گذاری معنایی استفاده می کنیم. اما حتی اگر دو نگاه یکسان باشند، آنها عملکرد مشابهی ندارند. تگ های عمومی مانند<div>  و<span>  هیچ قابلیت پیش فرض ندارند، بنابراین وقتی سعی می کنیم روی آنها تمرکز یا روی آنها کلیک کنیم، اتفاقی نمی افتد. یک تگ معنایی مانند<button>  دارای قابلیت پیش فرض است، بنابراین می توان بدون نیاز به هیچ کد اضافی روی آن تمرکز و کلیک کرد.

نتیجه

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