آموزش تگ header در html فیلم آموزشی
در این بخش از آموزش تگ های html به آموزش تگ header در html5 میپردازیم.
در گذاشته برای ایجاد سربرگ یک سند و یا نوشته از div با کلاس مختلف و البته اغلب با کلاس header استفاده می کردند.
اما با رونمایی از آخرین نسخه html5 تگ header جای div قدیمی را پر کرده است.
تگ Header در HTML چیست ؟
فهرست موضوعات در این آموزش
تگ header تگی است که با استفاده از آن میتوان قسمت هدر ( یا هم خودمونی بخش سربرگ ) رو در یک صفحه ی وب ایجاد نمود.
بطور کلی هرچیزی میتونه header داشته باشه، بفرض مثال یه سایت وقتی کلی بهش نگاه میکنیم خب header داره، فوتر هم داره ، حال اگه ما بخوایم یه باکس تو صفحه ایجاد کنیم برای اینم میتونیم هدر و فوتر درست کنیم ( پس برای اینه که میگم هرچیزی میتونه هدر داشته باشه )
پس بطور کلی میتونیم اینجوری بگیم که ، به بالایی ترین ( یا از سمت بالا ابتدایی ترین ) بخش از یک وبسایت یا بخش از یک صفحه یا بخش از یک تگ را هدر یا header میگوییم.
تگ هدر (تگ header ) برای معرفی یک بخش و یا تمام بخش استفاده می شود.از این تگ به عنوان تگ عنوان نیز یاد می کنند.تیتر روزنامه ها همانند بخش هدر در سایت است.
تگ header در html
تگ header در نسخه های قبلی html وجود نداشت.با تغییر و تحولات در html5 یکسری از تگ ها حذف و یکسری دیگر به آنها اضافه شدند.در این میان تگ header در html5 جز تگ هایی بود که به این زبان نشانه گذاری اضافه شد.
این تگ از لحاظ ظاهری تغییری در سایت ها به وحود نیاورده بلکه از لحاظ معنایی و مفهومی مورد استفاده قرار میگیرید.
خوب است بدانید در HTML4 و نسخه های قبل از آن برای تعریف سربرگ اصلی یا همان هدر سایت که در همه صفحات سایت می بایست نمایش داده شود، از یک تگ div که در داخل آن یک id که معمولا برابر با header بود استفاده می شد. البته هنوز هم برخی طراحان از تگ div برای ساخت هدر سایت استفاده می کنند و تمام عناصر مورد نیاز هدر هم درون همان تگ با id هدر قرار می گیرد. به شکل زیر
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="header" class="header"> <div class="logo"><a href="#"><img src="" alt="logo"></a></div> <nav> <ul> <li><a href="">خانه</a></li> <li><a href="">درباره ما</a></li> <li><a href="">طراحی وب</a></li> <li><a href="">دوره ها</a></li> </ul> </nav> </div> |
توجه داشته باشید با تغییر در پروتکل doctype html در ورژن های جدید html خوب است بجای تگ div حتما از تگ header استفاده کنید تا موتور های جستجو و مرورگرها به بهترین شکل قسمت های مختلف وب سایت شما را تشخیص داده و این کار در سئو شما تاثیر گذار باشد.
قرار گیری تگ هدر در html5
تگ header اغلب بعد از تگ head و داخل تگ body در ابتدا قرار می گیرد.البته این مورد الزامی نیست و می توان از این تگ چندین مورد در سند html خود داشته باشیم.
نکته: همانطور که گفته شده در اکثر تگ ها می توان از این تگ header استفاده کرد.اما حتما یادتان باشد که header را نمی توان داخل تگ footer – آدرس و یا تگ header دیگر قرار داد.
کاربرد تگ هدر ( header ) چیست ؟
همانطور که گفته شد، از تگ هدر برای ساخت سربرگ یا همان هدر یک صفحه یا یک عنصر مثل article و… استفاده می شود. تگ header اغلب بعد از تگ head و داخل تگ body در ابتدا قرار می گیرد. البته این مورد الزامی نیست و می توان از این تگ چندین مورد در سند html در جاهای مختلف داشته باشیم.
اما به همین سادگی؟
خیر. تگ header یکی از تگ های معنادار یا Semantic است که در کنار تگ هایی مثل تگ section، تگ article، تگ footer ، تگ nav ، تگ aside ، تگ details و تگ summary جهت ایجاد ساختار و طرحبندی حرفه ای برای محتوای سایت استفاده می شود. و در کنار تگ های ذکر شده عنصرهای layout را تشیل می دهد.
بنابریان از آنجا که این تگ یک تگ معنادار است، قطعا برای رتبه بندی در موتورهای جستجو و به عبارتی سئو سایت شما اهمیت بالایی دارد.
اگر بخواهیم فنی تر بیان کنیم باید بگوییم: این تگ از لحاظ ظاهری تغییری در سایت ها به وجود نمی آورد بلکه از لحاظ معنایی و مفهومی مورد استفاده قرار می گیرید. برای آشنایی بیشتر می توانید مقاله تگ های معنا دار را مطالعه کنید.
در اصل کاربرد تگ هدر را می توان به عنوان یک ظرف یا container برای محتوای مقدماتی یا مجموعه ای از لینک های پیمایشی دانست. در این تگ می توانید از تگ های h1 تا h6 ، تگ hgroup، جدول، لوگو یا آیکون و اطلاعات مربوط به نویسنده و یا سایت استفاده کنید.
دستور پیش فرض CSS تگ header
معمولا مرورگرها تگ header را بصورت پیش فرض یک تگ بلاکی در نظر گرفته و با دستورات CSS پیش فرض زیر نمایش می دهند. اگر در مورد مفهوم display: block اطلاعی ندارید حتما مقاله ویژگی display در css و مقاله تگ های بلاکی را مطالعه کنید.
|
1 2 3 |
header { display: block; } |
سوالات متداول در مورد تگ هدر
استفاده از تگ هدر در سئو تاثیر گذار است؟
همانطور که در متن مقاله توضیح دادیم، تگ header یک تگ معنادار بوده و قطعا در سئو تاثیرگذار است.
تگ header فقط برای ساخت هدر سایت استفاده می شود؟
خیر. همانطور که پیش تر گفته شد، شما از تگ هدر می توانید به تعداد دلخواه در یک سند html استفاده کنید. مثلا برای هدر تگ article.
منظور از تگ header همان تگ های h1 تا h6 است؟
خیر. تگ های h تگ های heading هستند که در زبان انگلیسی گاها به تگ header هم شناخته می شوند.
برای نصب نرم افزار برای کد نویسی html از لینک زیر استفاده فرمایید.
آموزش نرم افزار های مورد نیاز طراحی وب سایت
در صورت که به طراحی وب آشنایی ندارید میتوانید از آموزش زیر استفاده فرمایید .
در صورت که میخواهید به صورت حرفه ای طراحی وب را فرا بگیرید از لینک زیر استفاده فرمایید .
آموزش css html آموزش HTML5 CSS3
در یافت تمام جلسات آموزش مرحله به مرحله html از لینک زیر استفاده فرمایید.
هنوز بررسی‌ای ثبت نشده است.