عناوین و تیترها در زبان HTML

با سلام و احترام خدمت شما همراهان روکسو، در این جلسه قصد داریم در رابطه با Heading ها صحبت کنیم.

Heading چیست؟

Heading ها در واقع تیترهایی هستند برای قسمت های مختلف یک صفحه و از <h1> شروع شده و تا <h6> ادامه پیدا می کنند. به صورتی که <h1> مهم ترین عنوان یا تیتر و <h6> کم اهمیت ترین عنوان را مشخص می کند.

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که در خروجی مشاهده کردید، این تگ ها در ظاهر نیز با هم متفاوت هستند و هر چه اهمیتشان بیشتر باشد، بزرگتر می شوند اما اهمیت اصلی آن ها در ظاهرشان نیست چرا که ظاهر را می توان با CSS نیز تغییر داد. اهمیت اصلی در مسئله ی سئو است؛ موتورهای جست و جو از heading ها استفاده می کنند تا ساختار یک صفحه ی وب را ایندکس کنند. بنابراین نباید از ساختار صفحات وب خود غافل شوید.

برای ساختاربندی صحیح توجه کنید که <h1> همیشه باید عنوان اصلی تمامِ صفحه باشد بنابراین نباید در هر صفحه بیشتر از یک عدد <h1> داشته باشیم. سپس به ترتیب اهمیت از تگ های <h2> و <h3> و ... استفاده کنید. برای مشاهده ی ساختار HTML صفحه ی خود می توانید از وب سایت هایی مانند HTML 5 Outliner استفاده کنید. برای مثال ما سایت روکسو را به آن دادیم و نتیجه به شکل زیر بود:

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

همچنین کاربران سایت نیز صفحات شما را بر اساس heading ها بررسی می کنند تا مطالب مورد نظرشان را پیدا کنند.

نکته: مرورگرها به طور خودکار قبل و بعد از یک heading، مقداری فضای خالی اضافه می کنند تا بین عنوان و مطالب مربوطه فاصله ایجاد شود.

نکته: هیچ گاه از heading ها برای بزرگتر کردن نوشته ها و پررنگ کردنشان استفاده نکنید. برای این کار باید از CSS استفاده کنیم که در جلسات بعد با آن آشنا خواهیم شد. تنها مورد استفاده ی heading ها عناوین و تیترها هستند!

سوال: اگر بخواهیم heading من اندازه ی بزرگتری داشته باشد چکار کنم؟

پاسخ: همانطور که گفتیم تمام این موارد در CSS نوشته می شود اما برای مثال این مورد را برایتان توضیح میدهم. شما می توانید از font-size استفاده کنید:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:60px;">Heading 1</h1>

<p>You can change the size of a heading with the style attribute, using the font-size property.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

من سایز این heading را روی 60 پیکسل گذاشته ام. شما می توانید به JSBin بروید و این مقدار را تغییر دهید تا ببینید چطور کوچک و بزرگ می شود.

استفاده از <hr>

تگ <hr> در زبان HTML هنگامی استفاده می شود که بخواهیم یک قسمت از صفحه را از قسمتی دیگر جدا کنیم. معمولا زمانی که قسمتی از مطلب ما از مطالب دیگر جدا است از این تگ استفاده می کنیم. خروجی این تگ به صورت یک خط افقی در صفحه است:

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>

</body>
</html>

اگر می خواهید خروجی این تگ را ببینید باید آن را در JSBin مشاهده کنید.

برچسب <head> چیست؟

بسیاری از طراحان مبتدی تگ <head> را با heading ها اشتباه می گیرند اما واقعیت این است که این دو تگ هیچ ارتباطی با هم ندارند. در واقع عنصر <head> نگهدارنده ی اطلاعات metadata است و بین تگ های <html> و <body> قرار می گیرد. metadata اطلاعاتی است که در مورد خودِ سند HTML است و هیچ گاه به نمایش در نمی آیند. بگذارید مثالی را ببینیم:

<!DOCTYPE html>
<html>
<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>
<body>

<p>The HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>

</body>
</html>

به غیر از عناصر p در کد بالا چیز دیگری به نمایش در نمی آید. یکی از metadata هایی که در کد بالا استفاده کرده ایم meta charset است که مشخص می کند سند ما از چه نوع encoding ای پشتیبانی می کند. برای زبان فارسی باید UTF-8 را به کار ببرید اما امروزه پیشنهاد می شود به طور کلی از هر زبانی استفاده کردید این مقدار را روی UTF-8 تنظیم کنید. در مورد این تگ ها نیز بعدا به طور مفصل صحبت خواهیم کرد.

آیا می توانم سورس HTML را ببینم؟

حتما تا به حال شده است که به وب سایتی بروید و با دیدن یکی از قسمت های آن به وجد بیایید و به خودتان بگویید واقعا دوست دارم بدانم چطور آن را کدنویسی کرده اند. باید بدانید که سورس HTML تمام وب سایت های دنیا به صورت آزاد و برای تمام کاربران قابل دسترسی است!

اگر بخواهید کدِ قسمت خاصی از یک صفحه ی وب را ببینید باید همانطور که در مرورگرتان هستید روی آن قسمت کلیک راست کنید و گزینه ای شبیه به Inspect یا Inspect Element را انتخاب کنید. با این کار صفحه ای باز می شود و کد آن قسمت را به شما نشان می دهد.
اگر بخواهید کد تمام آن صفحه را یکجا ببینید می توانید کلیک راست کنید و گزینه ای شبیه به View Page Source یا View Source را انتخاب کنید. در این صورت تمام سورس HTML آن صفحه را خواهید دید.

حتما با خودتان می گویید من چرا باید بخواهم سورس HTML یک صفحه را ببینم؟ شما با نگاه کردن به صفحات مختلف در دنیای وب می توانید دانش HTML خود را به شکل موثری افزایش دهید. با این کار چشمتان به کدهای واقعی عادت می کند و فرآیند یادگیری نیز برایتان ساده تر می شود.

سوال: اگر سورس HTML و CSS و ... وب سایت های مختلف به صورت آزاد قابل دسترسی است، آیا من می توانم قالب یک سایت را بدزدم و روی سایت خودم بگذارم؟

پاسخ: از نظر فنی و اینکه شدنی است یا نشدنی باید گفت بله می توانید، اما به هیچ عنوان چنین کاری نکنید! دلایل آن نیز واضح است:

اولا این کار غیر اخلاقی است. دزدی کردن هیچ گاه کار پسندیده ای نبوده است و در شان یک برنامه نویس نیست که اینچنین اخلاق را زیر پا بگذارد.

دوما این کار غیرقانونی است و صاحب وب سایت می تواند از شما شکایت کند چرا که محتوای اینترنتی و نرم افزاری تحت ماده 1 و 13 از قانون حمایت از حقوق پدیدآورندگان نرم افزار های رایانه ای مصوب دی ماه 1379 مجلس شورای اسلامی محافظت می شوند:

ماده1: حق نشر، عرضه، اجرا و حق بهره برداری مادی و معنوی نرم‌افزار رایانه‌ای متعلق به پدیدآورنده آن است. نحوه تدوین و ارائه داده‌ها در محیط قابل پردازش رایانه‌ای نیز مشمول احکام نرم‌افزار خواهد بود. مدت حقوق مادی پنجاه (50) سال از تاریخ پدید آوردن نرم‌افزار و مدت حقوق معنوی نامحدود است.
ماده 13: هرکس حقوق مورد حمایت این قانون را نقض نماید علاوه بر جبران خسارت به حبس از نود و یک روز تا شش ماه و جزای نقدی از ده میلیون (000 000 10) تا پنجاه میلیون (000 000 50) ریال محکوم می‌گردد.

شما می توانید سند کامل این مصوبه را در این صفحه و این صفحه از سایت سرآمد مطالعه کنید.

سوما اگر کاربران شما ببینند که قالب سایت شما کپی شده یا دزدیده شده از سایت های دیگر است، چه فکری در مورد شما می کنند؟ آیا فکر می کنید این کاربران به سایت شما اعتماد می کنند؟ معمولا سایت هایی که قالب دیگر سایت ها را می دزدند سایت های scamming و فریبکاری هستند که می خواهند پول مردم را بدزدند بنابراین با این کار اعتماد کاربرانتان را برای همیشه از خود سلب می کنید.

همانطور که گفتم می توانید از سورس وب سایت ها برای آموزش و یادگیریِ خودتان استفاده کنید اما حق هیچ بهره برداری را از آن ندارید.

خلاصه ی مقاله

در این قسمت در مورد انواع عناوین (heading ها و head ها) در زبان HTML صحبت کردیم و همچنین با قوانین مربوط به کپی رایت و حق نشر آثار آشنا شدیم. امیدوارم این قسمت برایتان سودمند بوده باشد.

دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

Seyyed_MR

12 شهریور 1398

سلام ممنون از مطالب مفید سایت تون یه مشکلی بعضی از صفحات دارن ! خروجی هایی که از کد ها نشون داده میشه ، جا به جا هستن مثلا در قسمت پنجم HTML : برای خروجی کد های استفاده از hr ، خروجی کد های font-size میاد امیدوارم که این موارد تصحیح بشن ^_^ با تشکر