کاربرد تگ header چیست؟
تگ header حاوی محتوای مقدماتی برای نزدیکترین تقسیم بندی اجداد خود یا عنصر ریشه مقطعی آن است.
بخش مطالب محتوایی است که دامنه عنوان ها و پاورقی ها را مشخص می کند. عناصر زیر به عنوان محتوای تقسیم بندی دسته بندی می شوند: <article>, <aside>, <nav>, <section> بخش بندی عناصر ریشه می تواند اصول مطالب خاص خود را داشته باشد ، اما بخشها و عناوین داخل این عناصر به اصول مطالب اجداد آنها کمک نمی کند. برچسب های زیر به عنوان ریشه های بخش بندی طبقه بندی می شوند (<blockquote> ، <body> ، <fieldset> ، <figure> ، <td>).
عنوان ها می توانند حاوی عنوان ها ، زیرعنوان ها ، اطلاعات نسخه ، فرم های جستجو ، آرم ها ، کنترل های پیمایش و غیره باشند.
طریقه نوشتن header
تگ header به عنوان <header> </header> با محتوای هدر بین برچسب های شروع و پایان درج شده است.
مثل این:
<header>
Header content...
</header>مثال ها
یک مثال ساده از header
<!DOCTYPE html>
<title>Example</title>
<style>
.example header,
.example article,
.example footer,
.example main,
.example nav {
border: 1px solid orange;
padding: 3px;
margin: 3px;
width: 50%;
}
.example header {
background: #FDF7D3;
}
</style>
<div class="example">
<header>Header...</header>
<main>
Main...
<article>Article...</article>
<article>Article...</article>
<article>Article...</article>
</main>
<footer>Footer...
<nav>Nav...</nav>
</footer>
</div>تگهای داخل header
یک header به طور معمول شامل یک عنوان برای بخش است (اگرچه این مورد نیازی نیست). یک header همچنین می تواند حاوی پیمایش ، جستجو ، آرم و سایر مطالب باشد. عناوین سند در این مثال ، header حاوی یک عنوان برای کل سند است. این سند شامل سه مقاله جداگانه در مورد همان موضوع است.
<!DOCTYPE html>
<title>Example</title>
<style>
.example header,
.example article,
.example footer,
.example main,
.example nav {
border: 1px solid orange;
padding: 3px;
margin: 3px;
width: 80%;
}
.example header {
background: #FDF7D3;
}
</style>
<div class="example">
<header>
<h1>Mindfulness Articles</h1>
</header>
<main>
Main...
<article>
Mindfulness article 1...
</article>
<article>
Mindfulness article 2...
</article>
<article>
Mindfulness article 3...
</article>
</main>
<footer>Footer...
<nav>Nav...</nav>
</footer>
</div>تگ header داخل تگ article
در این مثال ، header در داخل یک article وجود دارد. این بدان معنی است که header برای تگ article (و نه لزوماً کل صفحه) اعمال می شود.
<!DOCTYPE html>
<title>Example</title>
<style>
.example header,
.example article,
.example footer,
.example main,
.example nav {
border: 1px solid orange;
padding: 3px;
margin: 3px;
width: 80%;
}
.example header {
background: #FDF7D3;
}
.example header>p {
font-weight: bold;
}
</style>
<div class="example">
<main>
Main...
<article>
Article...
<header>
<h1>Become a Zen Master Today</h1>
<p>Five experts share their knowledge for attaining enlightenment.</p>
</header>
<p>In our recent journey through South East Asia, we...</p>
</article>
</main>
<footer>Footer...
<nav>Nav...</nav>
</footer>
</div>مثال فرم جستجو
در این مثال ، header شامل یک آرم و یک فرم جستجو است.
<!DOCTYPE html>
<title>Example</title>
<style>
.example header,
.example article,
.example footer,
.example main,
.example nav {
border: 1px solid orange;
padding: 3px;
margin: 3px;
width: 80%;
}
.example header {
background: #FDF7D3;
}
</style>
<div class="example">
<header>
<img src="{your logo}" alt="Logo">
<input type="search" name="q"><input type="submit" value="Search">
</header>
<main>
Main...
<article>
Article...
</article>
</main>
<footer>Footer...
<nav>Nav...</nav>
</footer>
</div>ویژگی های تک header
header هیچ ویژگی منحصر به فردی ندارد.
مارا در شبکه های اجتمایی دنبال کنید.
