اگر به دنبال راه‌اندازی یک وبلاگ یا سایت برای خود هستید و البته قصد دارید وب‌سایتتان را خودتان ایجاد کنید، نیاز است که با اصول اولیه این کار آشنا شوید. در اولین مراحل کدنویسی برای ایجاد سایت باید انواع تگ‌ها و کاربردهای آنها را شناخته و دلیل استفاده از آنها را بدانید.
در این مقاله با کاربردی‌ترین تگ‌های HTML و نحوه استفاده از آنها آشنا خواهیم شد.
HTML چیست؟
زبان نشانه‌گذاری html، پایه و اساس هر وب‌سایتی است. کدهای html مشخص می‌کنند که عناصر بصری در کدام قسمت‌ها قرار بگیرد، به چه شکل باشند و رفتار آنها چگونه باشد. این‌ها اولین مواردی هستند که مرورگر در ابتدا و حتی قبل از دریافت کدهای css و جاوا اسکریپت دریافت می‌کند.
این کدها به مرورگر اجازه می‌دهند تا ساختار صفحه‌ها را بخواند و محتواهای آنها را نشان دهد. عناصر یک وب‌سایت از طریق کدهای html که ما از آنها استفاده می‌کنیم به نمایش درمی‌آیند، پس باید مطمئن شویم که از آنها به‌درستی استفاده می‌کنیم. این زبان طی سال‌های اخیر پیشرفت‌های بسیاری داشته تا از طریق عناصر خود بتواند محتوا را به بهترین شکل ممکن ارائه دهند و مشتریان بتوانند ارتباط بهتری با وب‌سایت برقرار کنند.
از آنجایی که html تکامل یافته، مواردی را که قبلاً استفاده از آنها را پیشنهاد می‌کرده، ممکن است دیگر کارایی خوبی نداشته باشند. این موضوع اهمیت زیادی دارد که همگام با پیشرفت‌های این زبان پیش برویم و خود را با قوانین آن به‌روزرسانی کنیم. از این طریق می‌توانیم بهترین محتوا را به کاربران خود ارائه دهیم.
عنصر <div> یکی از اصلی‌ترین تگ‌های html به‌حساب می‌آید. در حال ادبی پیش‌فرض این تگ هیچ‌گونه استایلی ندارد و هیچ ویژگی به آن نسبت داده نشده است، البته تمام مرورگرها از آن پشتیبانی می‌کنند. با اعمال کردن استایل مورد نظر خود به این تگ، رفتار و ظاهر آن را در مرورگر تعیین می‌کنیم.
در ادامه به بررسی تگ‌های پایه html و مواردی که باید حتماً از آنها در پروژه‌های خود استفاده کنیم می‌پردازیم:
تگ‌های پایه html کدم‌اند؟
تگ‌های معنایی (Semantic Tags) هستند که به محتواهای درون خود معنا می‌بخشند. تگ <header> یکی از این موارد است. تگ‌های غیر معنایی (Non-semantic Tags) نیز تگ‌هایی هستند که برای اعمال کردن استایل‌های مورد نظر به کار می‌روند و هیچ معنای خاصی ندارند.
پیش از اینکه HTML5 مجموعه جدید خود را برای عناصر معنایی معرفی کند، توسعه‌دهندگان وب از تگ <div> برای رسیدن به تأثیرات مشابه تگ‌های معنایی استفاده می‌کردند. به عنوان مثال <div id=”header”> به عنوان تگ هدر بکار می‌رفت.
با اضافه کردن توضیحاتی به این تگ، دولوپر متوجه نوع کاربرد آن تگ می‌شد، اما مرورگر قادر به فهمیدن آن توضیحات نبود.
مقاله مرتبط: پنج ویژگی زبان HTML که احتمالا نمیدانستید
تگ‌های معنایی از جمله تگ <nav> و <header> به ساختاربندی صفحات وب کمک می‌کنند. تگ‌ها باید به گونه‌ای باشند که تنها با نگاه کردن به آنها متوجه کاربرد آنها شویم که این امر با تگ <div> در جایگاه تگ‌های معنایی امکان‌پذیر نبود.
این مقاله به شما کمک خواهد کرد تا همیشه بتوانید از تگ‌های معنایی که به عنوان پایه و اساس صفحات وب هستند به درستی استفاده کنید.
تگ <header>
این تگ در حالت عادی شامل عناصری تکراری می‌شود که به طور مستقیم با دیگر قسمت‌های یک صفحه وب ارتباطی ندارد. ویژگی‌هایی که این تگ می‌تواند در بر بگیرد، مجموعه‌ای از عناصر مقدماتی و ناوبری هر صفحه است که شامل لوگو، ناوبری کل سایت یا بخش جستجوی محتوای سایت است.
نکته جالب توجه این است که در یک صفحه می‌تواند چندین تگ <header> قرار بگیرد. به عنوان مثال، در صفحه اصلی یک وبلاگ می‌توان بابت هر پست یک تگ <header> در نظر گرفت.
تگ <nav>
اکثر وب‌سایت‌ها بخشی را به عنوان ناوبری در نظر می‌گیرند. این بخش می‌تواند شامل لینک‌هایی به صفحات مختلف سایت یا استایلی به عنوان برد کرامب سایت باشد. البته نیازی نیست که هر لینک در یک تگ <nav> مجزا قرار بگیرند. تنها مجموعه‌ای از لینک‌هایی از دیگر صفحات نیاز به قرار گرفتن در یک تگ <nav> دارند، البته این مورد نیز به محتوا بستگی دارد.
یک الگوی معمول برای این تگ شامل لینک‌هایی به صفحه سیاست‌ها و قوانین سایت یا صفحه ارتباط با ما در فوتر سایت است. استفاده از محتوای فوتر در این تگ، برای شناسایی لینک‌های ناوبری سایت کافی است و نیازی به استفاده از تگ <nav>مجزا نیست.
تگ <main>
تگ <main> به عنوان نقطه کانونی هر وب‌سایت به حساب می‌آید. هرکدام از بخش‌هایی که خارج از هدر و فوتر باید در بخش main قرار بگیرند. به این نکته توجه داشته باشید که در هر صفحه باید یک تگ <main> بکار رود. تکنولوژی‌هایی که قابلیت خواندن محتوای صفحات وب را دارند، می‌توانند عنصر main را تشخیص داده و این امکان را به کاربران بدهند تا سریعاً به سراغ این بخش از صفحه وب بروند.
تگ <aside>
تگ <aside> نیز همانند تگ <main> شامل اطلاعات اصلی هر صفحه می‌شود. اطلاعاتی که درون این تگ قرار می‌گیرد، می‌تواند مجزا از دیگر محتواهای سایت به نمایش درآید. به عنوان مثال، از این تگ برای ایجاد ناوبری سایدبار یا قرار دادن تبلیغات در کنار فوتر استفاده می‌شود.
تگ <footer>
تگ <footer> شامل تمام اطلاعات خلاصه‌ای از محتوای وب‌سایت می‌شود. معمولاً اطلاعاتی از جمله آدرس، اطلاعاتی در مورد کپی‌رایت یا لینک‌هایی به صفحات مکمل سایت می‌شود. نیازی نیست که حتماً فوتر سایت و اطلاعات آن در انتهای صفحه قرار بگیرد، می‌توان این بخش را در هر قسمتی از صفحه قرار داد یا اصلاً آن را بکار نبرد.
تگ <article> و <section>
طبق قوانین W3C، این دو تگ به با ویژگی‌ها و عملکرد یکسان معرفی شده‌اند. هر دوی آنها با این هدف طراحی شده‌اند تا بخش‌های مشخصی از سایت را در کنار یکدیگر قرار دهند. تنها تفاوت اصلی آنها، نوع ترکیب‌بندی آنها است. تگ <article> عملکردی مستقل دارد. در واقع محتوای درون آن به عنوان عنصری مستقل شناخته می‌شوند. به عنوان مثال، یک پست وبلاگ، نظر یک کاربر یا توییت قرار داده شده در صفحه سایت با این تگ به نمایش گذاشته می‌شوند.
در مقابل تگ <section> قرار دارد که وظیفه آن قرار دادن بخش‌های مختلف یک صفحه در کنار یکدیگر است که به تنهایی معنایی خاصی ندارند. در واقع این تگ با گردآوری محتواهای مختلف سایت معنا می‌گیرد و عملکردی مستقل نخواهد داشت. به عنوان مثال، مجموعه‌ای از گرافیک‌های مرتبط، یک فصل از کتاب یا یک تب از تب‌های قرار گرفته در یک رابط کاربری با استفاده از این تگ به نمایش گذاشته می‌شوند.
نکته جالب توجه این است که هر تگ <article> می‌تواند شامل تعدادی تگ <section> باشد.
این موضوع را به یاد داشته باشید که تگ‌های معنایی HTML، عملکردهایی بیش از ساختار کلی سایت دارند. در واقع هرکدام از این عنصرها بیانگر یک معنای خاص هستند که شکل اصلی و مناسبی را برای یک وب‌سایت ایجاد می‌کنند. تنها زمانی از تگ‌های <div>و <span> استفاده کنید که هیچ تگ جایگزینی برای آنها وجود نداشته باشد.
چرا استفاده مناسب از زبان نشانه‌گذاری HTML مهم است؟
بکار بردن صحیح و بجای تگ‌های Html در کدهای وب‌سایت خود از اهمیت زیادی برخوردار است. در ادامه به بررسی دلایل این امر می‌پردازیم:
۱. بهبود سئوی سایت
موتورهای جستجوگر از جمله گوگل همیشه در حال خزیدن در سطح وب به منظور یافتن وب‌سایت‌ها و ثبت محتواهای آنها هستند. آنها خزیدن خود را با جستجو برای تگ‌هایی از جمله <h1> و <article> انجام می‌دهند تا محتواهای درون این تگ‌ها را طبق الگوریتم‌های خود بررسی و تحلیل کنند. به عنوان مثال، جستجو برای بلیت یک کنسرت با جستجو برای عنوان‌هایی شامل نام آن رویداد انجام می‌شود. در این میان، تگ <p> شامل متن معرفی هنرمند مورد نظر و تگ <time> شامل زمان برگزاری کنسرت می‌شود. اگر در این فرآیند جستجو توسط موتورهای جستجوگر، محتوای مورد نظر توسط این تگ‌ها یافت نشود، این سایت در نتایج جستجو برای این محتوا به نمایش درنخواهد آمد.
۲. دسترسی بهتر
برخی از عناصر بیانگر رفتارهایی مرتبط با خود آنها هستند. به‌عنوان مثال، تگ <button> شرایطی را برای عمل کلیک کردن بر روی یک دکمه فراهم می‌کند و مرتبط با آن است. اگر بجای استفاده از تگ <button> از تگ <div> استفاده شود، سیستمی که وظیفه خواندن عملکردها را دارد، متوجه نخواهد شد که این بخش به عنوان دکمه ایجاد شده است، مگر اینکه به تگ <div> ویژگی‌هایی را اضافه کنیم تا به تگ <button> تبدیل شود.
بهبود دسترسی سایت با استفاده از تکنولوژی مناسب مرتبط است. بدون استفاده از عناصر بصری در سایت، ناوبری آن آسان نخواهد بود. اگر دسترسی به بخش‌های مختلف سایت شما آسان نباشد، مسلماً کاربران سایتتان را رها خواهند کرد.
بخش‌های مهم سایت خود را می‌توانید با استفاده از تگ <nav> یا اضافه کردن ویژگی‌های متناسب به تگ‌های دیگر، محتوای سایت خود را بهتر به مرورگر معرفی کرده و از این طریق دسترسی آن را برای کاربران خود آسان‌تر کنید.
بدون رعایت این مسائل یا استفاده نابجا از تگ‌ها،کاربر قادر به یافتن محتواهای مورد نیاز خود نخواهد بود.
۳. برنامه‌ریزی برای آینده
یکی از اصول اولیه هر وب‌سایت، رعایت اصول کدنویسی به هنگام ایجاد سایت است. عملکرد سایت در تمام طول فعالیت آن به ساختار طراحی وب‌سایت در مراحل اولیه بستگی دارد. البته از همان ابتدا باید سایت را به طریقی طراحی کرد که برای تغییرات و به‌روزرسانی‌های آینده نیز آمادگی‌های لازم را داشته و با تکنولوژی‌های جدید سازگار باشد و البته به‌راحتی بتوان عناصر سایت خود را به‌روزرسانی کرد. با استفاده صحیح از عناصر و تگ‌ها در مراحل ابتدایی، این اطمینان را خواهید داشت که وب‌سایت شما در آینده نیز قابل‌درک و یافتن خواهد بود.
با بررسی موارد گفته شده در این مقاله و رعایت آنها به هنگام ایجاد سایت خود، برای همیشه حضوری پررنگ در موتورهای جستجوگر داشته باشید و از این طریق کاربران بیشتری را به خود جذب نمایید.
