اغلب اوقات با کلمه اصطلاحی Semantic در HTML5 مواجه می‌شویم، در این جلسه می‌خواهیم به تگ های معنایی و همچنین کاربرد آن در HTML بپردازیم. بنابراین ابتدا و برای بسیاری بیایید معنی کلمه Semantic را بفهمیم، همانطور که ویکی‌پدیا می‌گوید، Semantic به معنای اعتبار نحوی است. بنابراین می گوییم که تگ های معنایی به معنای تگ های معتبر نحوی هستند یا به عبارت ساده : تگ های معنایی آن دسته از عناصر هستند که معانی خاصی را منتقل می کنند و نشان می دهند که حاوی چه نوع محتوایی هستند و آن محتوا چه نقشی را در سند دارد. استفاده از تگ های معنایی به موتورهای جستجو کمک می کند تا براساس این تگ ها به تمامی اطلاعات وب سایت دسترسی پیدا کنند.
Semantics چیست؟
ویژگی اصلی یک تگ معنایی این است که معنای خود را به وضوح به توسعه دهنده و مرورگر منتقل می کند. یا به عبارتی این تگ ها به وضوح محتوای خود را هم برای مرورگر و هم برای برنامه نویس مشخص می کند.
HTML معنایی تنها در مورد استفاده از تگ های معنایی جدید نیست . بلکه در مورد استفاده از برچسب های صحیح برای هر عنصر است ، به طوری که برای همه کاربران آسان باشد.
ساختار آن
از تگ های معنایی زیر می توان برای تقسیم صفحه خود به بخش های مشخص شده استفاده کرد:
<header> : یک هدر برای یک صفحه وب تعریف می کند.
<nav> : یک محفظه برای پیوندهای ناوبری (فهرست) تعریف می کند.
<section> : این تگ یک بخش را در یک صفحه وب تعریف می کند.
<article> : شامل بخش اصلی است که حاوی اطلاعاتی در مورد صفحه وب است و معمولا برای مقالات به کار میرود.
<aside> : محتوای <aside> اغلب به عنوان نوار کناری در یک سند قرار می گیرد.
<footer> : یک پاورقی برای یک سند یا یک بخش تعریف می کند.
چرا باید از تگ های معنایی در HTML استفاده کنیم؟
اما چرا برای نوشتن Semantic در سند HTML باید زحمت بکشیم؟
بهبود رتبه در جستجوگر ها : اگر همه div را به درستی طراحی کنید، هیچ تفاوتی در UI صفحه وب خود نخواهید دید. با این حال، یک چیز را به خاطر بسپارید که شما فقط با انسان‌ها کار نمی‌کنید. خزنده‌های وب و عنکبوت‌های موتورهای جستجو نیز وجود دارند. آنها سایت‌ها را به‌طور خودکار، بدون اطلاع قبلی از آنچه می‌توانند پیدا کنند، می‌خوانند. این‌ها به وضوح معنایی سایت‌هایی که پیدا می‌کنند وابسته هستند، زیرا از تکنیک‌ها و الگوریتم‌های مختلف برای خواندن و فهرست‌بندی سایت‌های زیادی در روز استفاده می‌کنند و نتایج مرتبط را به کاربران وب ارائه می‌کنند و به وضوح رتبه‌بندی برنامه‌ها را به مراتب بهتر می‌کنند.
خوانایی : بلوک کد با استفاده از عناصر معنایی خوانا می شود. عناصر معنایی به راحتی عناصر مشابه را با هم گروه بندی می کنند.
دسترس‌پذیری : عناصر معنایی دسترسی بیشتری به فناوری‌های کمکی مانند صفحه‌خوان‌ها و همچنین توسعه‌دهندگان فراهم می‌کنند.
کدگذاری ثابت : با استفاده از عناصر معنایی، می توان به راحتی به کدنویسی ثابت دست یافت زیرا نمای کلی صفحه وب توسط این عناصر تعریف می شود.
قابلیت استفاده مجدد : یک سند HTML ایجاد شده با استفاده از عناصر معنایی را می توان به راحتی در میان توسعه دهندگان و شرکت های مختلف به اشتراک گذاشت و مجددا استفاده کرد.
برخی از تگ های معنایی
تگ های معنایی زیادی در HTML وجود دارد، اما بیشتر آنها در بیشتر وب سایت ها چندان مورد استفاده قرار نمی گیرند. برخی از تگ های معنایی که بیشتر مورد استفاده قرار می گیرند و نیز محبوب هستند عبارتند از:
- Header
- nav
- section
- aside
- main
- figure
- figcaption
- article
- details
- footer
در ادامه به بررسی بیشتر این تگ ها و نحوه ی استفاده از انها می پردازیم.
1. تگ <section>
این عنصر یک بخش را در یک سند HTML تعریف می کند. محتوای مشابه را همراه با یک عنوان گروه بندی می کند.
<!DOCTYPE html>
<html dir="rtl" lang="fa-IR">
<head>
<meta charset="UTF-8">
<title>HTML آموزش</title>
</head>
<section>
<h1>متاوبز</h1>
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p>
</section>
</body>
</html>
کدهای خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:
2. تگ <article>
ما می توانیم محتوای مستقل را با استفاده از تگ <article> مشخص کنیم. یک مقاله صرفاً برخلاف بقیه وب سایت توزیع می شود و اهمیت منحصر به فرد خود را دارد. می توان از آن برای ایجاد انجمن ها، وبلاگ ها و سرمقاله های روزنامه استفاده کرد. مانند:
<!DOCTYPE html>
<html dir="rtl" lang="fa-IR">
<head>
<meta charset="UTF-8">
<title>HTML آموزش</title>
</head>
<h1>متاوبز</h1>
<article>
<h2> درباره ما </h2 >
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p >
</article >
<article>
<h2> چشم انداز </h2 >
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p >
</article >
<article>
<h2> ماموریت </h2>
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p>
</article >
</body>
</html>
کدهای خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:
استفاده از CSS
ما می توانیم از استایل برای استایل دادن به تگ <article> استفاده کنیم. مانند:
<!DOCTYPE html>
<html dir="rtl" lang="fa-IR">
<head>
<meta charset="UTF-8">
<title>HTML آموزش</title>
</head>
<style>
.meta {
margin: 0;
padding: 1% 10%;
background-color: #ffcccc;
}
.meta > h1, .df {
margin: 10px;
padding: 5px;
}
.df {
background: white;
}
.df > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
<article class="meta">
<h1>متاوبز</h1>
<h2> درباره ما </h2 >
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p >
<article class="df">
<h2> چشم انداز </h2 >
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p >
</article >
<article class="df">
<h2> ماموریت </h2>
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p>
</article >
</article >
</body>
</html>
کدهای خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:
استایل دادن به تگ
تودرتوی تگ های معنایی <article> و <section> در HTML
امکان قرار دادن عناصر بخش در عناصر مقاله و بالعکس وجود دارد. طبق تعریف، عناصر مقاله مستقل هستند، و عناصر بخش، بخش خاصی را تعریف می‌کنند، اما این بر تودرتو بودن آنها در یک سند HTML تأثیری ندارد.
3. تگ <header>
با استفاده از تگ معنایی <header> می‌توانیم محتوای مقدماتی یا پیوندهای ناوبری (فهرست) را به عنوان یک ظرف نمایش دهیم. این شامل لوگوی یک برند یا وب سایت خاص، عنوان یا عنوان صفحه وب و اطلاعات مربوط به مالکیت وب سایت است.
نکته : یک سند HTML می تواند چندین عنصر <header> داشته باشد اما ما نمی توانیم عنصر <header> را در یک عنصر <footer> یا <address> قرار دهیم.
نحوه ی استفاده:
<!DOCTYPE html>
<html dir="rtl" lang="fa-IR">
<head>
<meta charset="UTF-8">
<title>HTML آموزش</title>
</head>
<style>
.meta {
margin: 0;
padding: 1% 10%;
background-color: #ffcccc;
}
h1, .df {
margin: 30px 50px;
padding: 5px;
}
.df {
background: white;
}
.df > h2, p {
margin: 4px;
font-size:16px;
line-height: 1.7em;
}
</style>
<header>
<h1>به متاوبز خوش امدید!</h1>
</header>
<article class="meta">
<h2> درباره ما </h2 >
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p >
<article class="df">
<h2> ماموریت </h2>
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p>
</article >
</article >
</body>
</html>
کدهای خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:
4. تگ معنایی <footer>
پاورقی یک سند HTML با تگ <footer> تعریف می شود. این شامل اطلاعاتی مانند حق چاپ، تماس، اسناد مرتبط، نقشه سایت و … است.
یک سند HTML می تواند چندین تگ پاورقی داشته باشد.
نحوه ی استفاده:
<!DOCTYPE html>
<html dir="rtl" lang="fa-IR">
<head>
<meta charset="UTF-8">
<title>HTML آموزش</title>
</head>
<style>
.meta {
margin: 0;
padding: 1% 10%;
background-color: #ffcccc;
}
footer , header{
background-color: hsl(239, 62%, 75%);
margin: 30px 50px;
padding: 10px 20px;
}
h1, .df{
margin: 30px 50px;
padding: 5px;
}
.df {
background: white;
}
.df > h2, p {
margin: 4px;
font-size:16px;
line-height: 1.7em;
}
</style>
<header>
<h1>به متاوبز خوش امدید!</h1>
</header>
<article class="meta">
<h2> درباره ما </h2 >
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p >
</article >
<footer>
<p> ارسال شده توسط متاوبز </p>
<p> اطلاعات تماس: <a href= "https://metawebz.org/" >
https://metawebz.org/</a>.</p>
</footer >
</body>
</html>
کدهای خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:
5. تگ معنایی <nav>
تگ معنایی <nav> شامل مجموعه ای از پیوندهای اصلی مربوط به یک سند HTML است. لازم نیست همه پیوندها بخشی از تگ <nav> باشند.
نحوه ی استفاده:
<!DOCTYPE html>
<html dir="rtl" lang="fa-IR">
<head>
<meta charset="UTF-8">
<title>HTML آموزش</title>
</head>
<style>
.meta {
margin: 0;
padding: 1% 10%;
background-color: #ffcccc;
}
footer , header{
background-color: hsl(239, 62%, 75%);
margin: 30px 50px;
padding: 10px 20px;
}
h1, .df{
margin: 30px 50px;
padding: 5px;
}
.df {
background: white;
}
.df > h2 , nav>a {
margin: 4px;
font-size: 20px;
line-height: 1.7em;
color: #ff0000;
}
</style>
<header>
<h1>به متاوبز خوش امدید!</h1>
</header>
<nav class="meta">
<a href= "#" > HTML </a> |
<a href= "#" > CSS </a> |
<a href= "#" > PhP </a> |
<a href= "#" > XML </a>
</nav >
<footer>
<p> ارسال شده توسط متاوبز </p>
<p> اطلاعات تماس: <a href= "https://metawebz.org/" >
https://metawebz.org/</a>.</p>
</footer >
</body>
</html>
کدهای خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:
استفاده از تگ معنایی
6. تگ معنایی <aside>
تگ <aside> حاوی اطلاعاتی است که ممکن است مستقیماً به محتوای وب مرتبط نباشد اما به کل وب سایت مرتبط است. همچنین می توان آن را با استفاده از CSS استایل دهی کرد.
نحوه ی استفاده :
<!DOCTYPE html>
<html dir="rtl" lang="fa-IR">
<head>
<meta charset="UTF-8">
<title>HTML آموزش</title>
</head>
<style>
footer , header{
background-color: hsl(239, 62%, 75%);
margin: 30px 50px;
padding: 10px 20px;
}
h1, .df{
margin: 30px 50px;
padding: 5px;
}
p{
margin-right: 50px;
}
aside {
width: 30%;
margin-top: -45px;
margin-left: 50px;
padding: 10px 20px;
float: left;
font-style: italic;
background-color: #ffcccc;
}
</style>
<body>
<header>
<h1>به متاوبز خوش امدید!</h1>
</header>
<p>من امروز صبح از پارک مرکزی بازدید کردم . هوا خوب بود و فوق العاده بود. با خانواده ام خیلی خوش گذشت! </p >
<aside>
<p>
پارک مرکزی یک پارک موضوعی در تفریحگاه جهانی والت دیزنی است که دارای جاذبه‌های هیجان‌انگیز، غرفه‌های بین‌المللی، آتش‌بازی‌های برنده جوایز و رویدادهای ویژه فصلی است .
</p>
</aside >
<p> من امروز صبح از پارک مرکزی بازدید کردم . هوا خوب بود و فوق العاده بود. با خانواده ام خیلی خوش گذشت! </p>
<p> من امروز صبح از پارک مرکزی بازدید کردم . هوا خوب بود و فوق العاده بود. با خانواده ام خیلی خوش گذشت! </p>
<footer>
<p> ارسال شده توسط متاوبز </p>
<p> اطلاعات تماس: <a href= "https://metawebz.org/" >
https://metawebz.org/</a>.</p>
</footer >
</body>
</html>
کدهای خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:
7.تگ معنایی Main
تگ <main> محتوای اصلی صفحه را مشخص می کند. محتوای درون این تگ باید به صورت یونیک باشد. و در بین تگ معنایی <main> ، می توان از تگ های article و section استفاده کرد.
نکات:
- در یک صفحه نباید بیش از یک تگ main استفاده شود.
- این تگ نمی تواند از فرزندان تگ های header, footer, aside, article و یا nav باشد.
- نباید مطالبی شامل سایدبار، فهرست ناوبری، اطلاعات کپی رایت، لوگو سایت یا فرم جستجو باشد.
8. تگ های <figure> و <figcaption>
تگ معنایی <figure> یک تگ مستقل است که حاوی تصاویر، تصاویر، نمودارها و غیره است. عنوان عنصر در عنصر <figure> با <figcaption> داده می شود.
تگ <figcaption> بسته به اولویت نمایش می‌تواند اولین یا آخرین فرزند عنصر <figure> باشد.
نحوه ی استفاده از این تگ ها را میتوانید در مقاله “نحوه استفاده از تصویر با تگ در HTML” بیاموزید.
نتیجه
در این مقاله به این موضوع پرداختیم که تگ های معنایی HTML چیست و چندین مزیت استفاده از آن چیست. این راهنما به منظور ارائه درک کاملی از این که چگونه معناشناسی در HTML می تواند ساختار صفحات وب را بهبود بخشد ایجاد شده است.
چه به دنبال ورود به صنعت هیجان انگیز توسعه وب باشید و چه تازه کار هستید که به دنبال پیشرفت شغلی خود هستید، این بهترین زمان برای برداشتن گام بعدی برای رسیدن به اهدافتان است.
اگر سوالی از ما دارید، با گذاشتن آنها در بخش نظرات زیر با ما در میان بگذارید. کارشناسان ما به سرعت به آنها پاسخ خواهند داد.
در پایان فقط می‌خواهم بگویم که یادگیری نشانه‌گذاری Semantic زندگی شما را آسان‌تر، کد پاک‌کننده‌تر و وب‌سایت شما را بهتر می‌کند.
درباره HTML بیشتر بخوانید و حرفه ای شوید:
- ایجاد اولین سند html و آشنایی با ساختار صفحات آن
- آموزش تگ های تیتر یا heading – تاثیر تگ هدینگ html در سئو سایت
- آموزش تگ p یا پاراگراف در html و کاربردهای آن
- آموزش تگ تاکیدی strong و em در HTML
- آموزش تگ های br و hr در HTML و نکات آن ها
- تمام نکات در مورد کامنت گذاری درHTML
- نحوه استفاده از تصویر با تگ img در HTML
- چگونه لینک یا پیوند یا hyperlink در HTML قرار دهیم؟
- آموزش ایجاد جدول HTML با استفاده از تگ Tableآشنایی با تگ صدا audio و تگ ویدیو video در HTML
- آموزش کار با فرم ها یا Forms در سند HTML
- آموزش قاب درون خطی (iframe) در HTML
- نحوه کار با کلاس و ID در HTML
- کاربرد و آموزش استفاده از تگ های div و span در زبان HTML
می توانید در تلگرام با تیم متاوبز در ارتباط باشید.
