هرکسی که در طراحی یا توسعه وب شرکت داشته باشد، اصطلاح «معنای» را با ارجاع به HTML5 و وب به طور کلی برمی‌خورد. این اصطلاح اغلب مشکل ساز برای بسیاری از ما به طور قابل درک گیج کننده است، به ویژه از آنجایی که فقدان مشخصی از اجماع وجود دارد. روی تعریف آن در زمینه های خاص

در این مقاله، آنچه که HTML5 را نسبت به پیشینیان خود معنایی‌تر می‌کند، بررسی می‌کنیم، و بیان می‌کنیم که چه معنایی برای توسعه وب در حال حاضر و آینده دارد.

معناشناسی درباره معناست

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

مرد کامپیوتر را از پنجره پرت کرد.

معناشناسی به جنبه ای از جمله مربوط می شود که به افرادی که آن را می خوانند اجازه می دهد پیام موجود در آن را درک کنند. همراه با نحو، معناشناسی بخش بزرگی از چیزی است که ارتباط از طریق زبان را تسهیل می کند. وقتی ما در مورد معناشناسی در رابطه با HTML صحبت می کنیم، در مورد ارتباط بین برنامه های کامپیوتری صحبت می کنیم، نه انسان ها. HTML معنایی اساساً با هدف افزایش میزان توانایی برنامه‌ها است process، یا محتوای وب را تفسیر کنید. به عنوان مثال، وب زیر را در نظر بگیرید page گزیده ای حاوی برخی از ساختارهای HTML قدیمی تر:

<p>The man threw the computer through the window.</p>
<img src="https://www.webdesignerdepot.com/2012/12/why-html5-is-more-semantic/broken_window.png" alt="Broken Window" />

عناصر (و ویژگی ها) به مرورگر اطلاعاتی در مورد روش ارائه محتوا به کاربر می دهند. عناصر پاراگراف به طور پیش فرض با فضای خالی در بالا و پایین آنها نمایش داده می شوند، عناصر تصویر با استفاده از فایل تصویر موجود در ویژگی src و غیره نمایش داده می شوند. روی. هنگامی که مرورگر با هر یک از این عناصر روبرو می شود، محتوا را به روشی خاص ارائه می کند که در نهایت توسط برچسب های استفاده شده تعیین می شود.

ساختارهای HTML در حال حاضر معنی دارند

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

<img src="https://www.webdesignerdepot.com/2012/12/why-html5-is-more-semantic/broken_window.png" alt="Broken Window" />

اگرچه به صورت مخفف است، اما نام عنصر img چیزی معنادار در مورد محتوای برچسب نشان می دهد، یعنی اینکه یک تصویر است. به این ترتیب، می توانید جنبه معنایی HTML را شبیه به ابرداده در نظر بگیرید، به این ترتیب که تگ عنصر و نام ویژگی ها داده ها (داده های موجود در وب) را توصیف می کنند. page عنصر و محتوای صفت بودن).

به یاد دارید زمانی که ما شروع به جداسازی محتوا از سبک کردیم؟

برخی از ساختارهایی که در HTML استفاده کرده‌ایم به مرورگر می‌گویند که چگونه آیتم‌های محتوا را در a استایل کند page. با گذشت زمان، ما تشویق شدیم که قالب بندی a را جدا کنیم page از محتوای آن

به عنوان مثال، ما تگ i را با em جایگزین کردیم، که معنی بیشتری دارد و به مرورگر نمی گوید که چگونه متن داخل عنصر را نمایش دهد. هدف از استفاده از em به جای i، انتقال اطلاعات در مورد ماهیت آیتم محتوا است، نه اطلاعاتی در مورد سبک سازی آن. البته em روی استایل تاثیر می‌گذارد، که دلیل اصلی استفاده ما از آن است، با این حال جزئیات سبک را به مرورگر و/یا کد CSS که به طور ایده‌آل از آن جدا می‌شود، واگذار می‌کند. page نشانه گذاری

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

آیا این شبیه XML نیست؟

اگر در گذشته از XML استفاده کرده باشید، با مفاهیم در نشانه گذاری معنایی آشنایی خواهید داشت. به عنوان مثال، هنگامی که یک سند XML (یا طرحواره) را برای یک مجموعه داده طراحی می کنید، عناصر و ویژگی ها را برای مدل سازی آیتم ها در داده ها انتخاب می کنید. در حالت ایده‌آل، نام عنصر و ویژگی، اقلام داده را به روشی معنادار تعریف می‌کند:

<news_story piece_id="12345">
 <journalist>Jim Smith</journalist>
 <posted>23 November 2012</posted>
</news_story>

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

به هر حال، معنا انواع مختلفی دارد

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

تگ img از این جهت معنادار است که چیزی در مورد محتوای عنصر می گوید و آنچه را که هست توصیف می کند.

برخی از عناصر جدید HTML5 مانند هدر و پاورقی از این جهت معنادار هستند که چیزی در مورد نقش یا هدف عنصر در ساختار کلی یک عنصر نشان می‌دهند. page.

پس چگونه همه اینها به کد HTML5 مربوط می شود؟

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

<header>
 <h1>Man in Window Outburst</h1>
</header>

این هدر عنصر می تواند شامل عناصر دیگری باشد و تمایل دارد حداقل یک عنصر عنوان را شامل شود. تگ پاورقی مشابه است، با تگ دوباره چیزی معنادار در مورد محتوای عنصر و ارتباط آن با بقیه عناصر را بیان می کند. page:

<footer>
 <p>The information روی this website is nothing but lies.</p>
</footer>

این ناوبری برچسب هدف a را توصیف می کند page بخش، یعنی حاوی پیوندهای ناوبری:

<nav>
 <ul>
 <li><a href="https://www.webdesignerdepot.com/2012/12/why-html5-is-more-semantic/news.php">News</a></li>
 <li><a href="https://www.webdesignerdepot.com/2012/12/why-html5-is-more-semantic/weather.php">Weather</a></li>
 <li><a href="https://www.webdesignerdepot.com/2012/12/why-html5-is-more-semantic/entertainment.php">Entertainment</a></li>
 </ul>
</nav>

این بخش عنصر معمولاً گروهی از آیتم ها را در خود جای می دهد روی همان موضوع، اغلب همراه با یک هدر. عنصر بخش معنای نسبتاً انتزاعی دارد، اما با این وجود معنادار است:

<section id="overview">
 <h2>What happened</h2>
 <p>Police officers apprehended the man at 3.30pm...</p>
 <img src="https://www.webdesignerdepot.com/2012/12/why-html5-is-more-semantic/images/arrest.jpg" alt="The Arrest"/>
</section>

این مقاله عنصر مشابه است، برای تعریف یک مورد که خود شامل است استفاده می شود:

<article>
 <h2>The Law</h2>
 <p>The law روی throwing items through windows is very clear...</p>
</article>

یک کنار تگ نقش یک عنصر را نسبت به زمینه آن در داخل نشان می دهد page، مانند نسخه توسعه یافته زیر کد مقاله بالا:

<article>
 <h2>The Law</h2>
 <p>The law روی throwing items through windows is very clear...</p>
 <aside>In 1998 four people were arrested for throwing a server machine...</aside>
</article>

اینها تنها تعدادی از عناصر جدید HTML5 هستند که بهبودهای معنایی را ارائه می دهند، سایر عناصر شامل رسانه و عناصر ورودی کاربر و همچنین ویژگی های اضافی هستند. گنجاندن ریز داده ها در HTML5 همچنین زمینه را برای گنجاندن اطلاعات معنایی در صفحات وب و برنامه های کاربردی فراهم می کند. همانطور که می بینید، برخی از این عناصر جدید هم از نظر محتوا و هم از نظر ساختار معنادار هستند.

به برخی از تگ های قدیمی (که بسیاری از آنها هنوز در دسترس هستند)، مانند div فکر کنید. عنصر div به سادگی یک تکه از a است page – نام تگ مطلقاً چیزی در مورد محتوای عنصر یا نقش آن در داخل آن به ما نمی گوید page. به عبارت دیگر، تگ معنای بسیار کمی را منتقل می کند. بسیاری از تگ‌های قدیمی یا تقریباً هیچ معنایی را منتقل نمی‌کنند، یا در برخی موارد معنای عمومی و بدون تعریف را منتقل می‌کنند. هر مورد در یک وب page در یکی از مجموعه‌ای از دسته‌بندی‌های عناصر بسیار کلی قرار داشت. کلید معنی دار کردن چیزی خاص بودن است. تگ های جدید HTML5 به ما این امکان را می دهند که محتوای وب را با استفاده از اصطلاحات خاص تر تعریف کنیم.

آیا قبلاً معنی را به نشانه گذاری خود اضافه می کردید؟

اگر صفحات وب را برای مدت زمان معقولی ایجاد کرده اید، برخی از عناصر جدید HTML5 ممکن است زنگ هایی را برای شما به صدا درآورند. در واقع، توسعه دهندگان از قبل با استفاده از ویژگی های عنصر، به ویژه کلاس و ID، سطحی از معنا را در صفحات خود ایجاد می کردند. به عنوان مثال، اگر تا به حال به عنصری یک کلاس یا شناسه ویژگی “footer” یا “header” داده اید، مطمئنا تنها نیستید. با HTML5، این معنا در خود نشانه گذاری به جای مقادیر ویژگی منتقل می شود. اگر از این ویژگی‌ها برای پیاده‌سازی ویژگی‌های یک ظاهر طراحی خاص استفاده می‌کردید، عملاً کاری را به صورت دستی انجام می‌دادید که خارج از جعبه در HTML5 تعبیه شده است – و با عناصر معنایی مزایای بیشتری وجود دارد…

چرا ما این همه کار را انجام می دهیم؟

بسیار خوب، همه اینها خیلی خوب است، اما شما را ببخشید که بپرسید چرا ما برای چیزی که اساساً مفهومی/آکادمیک به نظر می‌رسد دچار این همه دردسر می‌شویم. خوب، می توانید مطمئن باشید که دلایل خوبی برای حرکت در جهت معنایی تر وجود دارد. همانطور که دیدیم، معنای HTML5 به ما اجازه می دهد تا کد نشانه گذاری ایجاد کنیم که آیتم های محتوا را توصیف می کند. این جنبه توصیفی کد به برنامه‌های دیگر اجازه می‌دهد تا با کاربردهای مختلف از محتوا استفاده مؤثرتری کنند:

• قابلیت جستجو قرار است با پیشرفت معناشناسی وب دگرگون شود. نشانه گذاری معنایی محتوا/داده را قابل جستجوتر می کند. صفحات وب البته نه تنها در مرورگر وب مشاهده می شوند، بلکه توسط برنامه های دیگری مانند روبات های موتور جستجو نیز پردازش می شوند. از آنجایی که نشانه‌گذاری معنایی به گونه‌ای طراحی شده است که به برنامه‌ها اجازه دهد صفحات وب را به روش‌های معنی‌داری تفسیر کنند، این در نهایت باید کیفیت عملکردهای جستجو/پرس و جو را به میزان قابل توجهی بهبود بخشد. در “رویای” تیم برنرز لی برای وب، رایانه‌ها می‌توانند تمام داده‌ها را به صورت آنلاین تجزیه و تحلیل کنند – ممکن است راه زیادی باشد، اما انگیزه معنایی HTML5 با این نوع هدف بلندمدت است. .
• دسترسی یکی از مزایای کلیدی نشانه گذاری معنایی است. ابزارهای دسترس‌پذیری می‌توانند از دسترسی معنی‌دارتر به محتوای وب سود بسیار زیادی ببرند. چنین ابزارهایی شامل افزونه های مرورگر برای کاربران با محدودیت بینایی، شنوایی، مشکلات یادگیری و غیره است روی. نشانه گذاری معنایی آن را برای یک برنامه کاربردی تر امکان پذیر می کند process محتوای وب و نتیجه آن برای انتقال پیام اصلی به کاربر به نحوی که متناسب با نیاز او باشد. این مفهوم از طریق تکنیک هایی مانند طراحی واکنش گرا فراتر از قابلیت دسترسی و به قلمرو انعطاف پذیری دستگاه گسترش می یابد. نتیجه یک رویکرد فراگیرتر برای ارائه محتوای وب است.
• سازگاری باید یک خیر واقعی برای HTML5 معنایی باشد. نشانه‌گذاری معنایی سازگاری را بهبود می‌بخشد، زیرا آیتم‌های محتوا به‌طور منطقی‌تر به انواع عناصر خاص تخصیص داده می‌شوند. این در تضاد با مدل‌های قدیمی‌تر است، که در آن موارد اغلب می‌توانستند به‌طور منطقی در هر یک از طیفی از انواع عناصر مختلف قرار گیرند – انتخاب یکی نشانگر ماهیت محتوا یا نقش آن در page، این فقط بازتابی از انتخاب توسعه دهنده بود. با نشانه‌گذاری معنایی، سطح مشخص‌تر معنا باعث می‌شود این انتخاب‌ها کمتر آزاد باشند، اما نتایج ذاتاً در هنگام تفسیر توسط مرورگر یا سایر برنامه‌ها قابل اعتمادتر هستند.

توسعه دهندگان پیشرفت فناوری های وب را هدایت می کنند

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

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

تصویر/تصویر کوچک ویژه، موارد استفاده تصویر زبان از طریق Shutterstock.