متن در HTML

اگرچه تصویر، ویدئو و صدا در سراسر دنیای وب وجود دارد اما هنوز هم متن مهمترین قسمت تشکیل دهنده وب است.

پاراگراف ها

پاراگراف ها <p> یکی از پرکاربردترین عناصر HTML می باشند. این عناصر بصورت پیشفرض از نوع بلاک هستند و بسیار سریع می شود از آنها جهت نمایش متن استفاده کرد:

<p>
   .بهترین شیوه صداقت وفای به عهد است
</p>

لیست ها

در HTML سه نوع لیست وجود دارد:

• <ul> لیست غیر ترتیبی
• <ol> لیست ترتیبی
• <dl> لیست توضیحی

لیست ها در HTML ساختار مخصوص به خود را دارند. همیشه باید <ul> و <ol> پدر <li> باشند تا یک لیست داشته باشیم. <li> آیتم های یک لیست هستند. و هیچگاه به تنهایی استفاده نمی شوند و همیشه به عنوان فرزندان مستقیم <ul> و <ol> مورد استفاده قرار می گیرند.

لیست های غیر ترتیبی

فرض کنید می خواهیم چهار رنگ را بصورت لیستی نام ببریم. در اینجا ترتیب رنگ ها اهمیت ندارند پس از لیست غیر ترتیبی <ul> استفاده می کنیم:

<ul>
  <li>سفید</li>
  <li>مشکی</li>
  <li>سبز</li>
  <li>زرد خیلی خیلی پررنگ</li>
</ul>

معمولا اینگونه لیست ها را با یک علامت در کنار هر آیتم می بینیم. در این مثال نتیجه بصورت زیر خواهد بود:

• سفید
• مشکی
• سبز
• زرد خیلی خیلی پررنگ

لیست های ترتیبی

حال فرض کنید می خواهیم اسامی چهار دانش آموز برتر یک کلاس را به ترتیب بنویسیم. پس چون در اینجا ترتیب اهمیت دارد از عنصر لیست ترتیبی <ol> استفاده می کنیم:

<ol>
  <li>مجتبی</li>
  <li>رضا</li>
  <li>احسان</li>
  <li>مهدی</li>
</ol>

بصورت پیشفرض آیتم های لیست ترتیبی بصورت خودکار شماره دارند و نیاز نیست در HTML شماره را بنویسیم:

1. مجتبی
2. رضا
3. احسان
4. مهدی

( هیچوقت که ما شاگرد اول نبودیم حداقل عقدمون رو توی این مثالا خالی کنیم :) )

لیست های توضیحی

از لیست های توضیحی زمانی استفاده می شود که آیتم ها بصورت جفت وجود دارند. در این حالت عنصر لیست <dl> است.

آیتمی که قرار است مورد توضیح واقع شود (<dt>) و توضیحی که قرار است در مورد آیتم وارد شود (<dd>) به عنوان فرزندان عنصر <dl> خواهند بود:

<dl>
  <dt>HTML</dt>
  <dd>ساختار یک صفحه وب</dd>
  <dt>CSS</dt>
  <dd>ظاهر یک صفحه وب</dd>
  <dt>JS</dt>
  <dd>تعاملات موجود در یک صفحه وب</dd>
</dl>

نتیجه این لیست توضیحی بصورت زیر خواهد بود:

HTML

ساختار یک صفحه وب

CSS

ظاهر یک صفحه وب

JS

تعاملات موجود در یک صفحه وب

نقل قول ها

برای بیان یک نقل قول از عنصر <blockquote> استفاده می کنیم:

<p>حضرت علی (ع) فرمودند:</p>
<blockquote>
  “بهترین شیوه صداقت وفای به عهد است.”
</blockquote>

خروجی به شکل زیر خواهد بود:

حضرت علی (ع) فرمودند:

“بهترین شیوه صداقت وفای به عهد است.”

عنوان ها

برای اینکه برای یک سند ساختار داشته باشیم عناوین یک نقش مهم را در این مورد بازی می کنند. در HTML شش سطح عنوان وجود دارد. که سطح اول <h1> مهمترین آنها محسوب می شود.

پس اگر یک مقاله را مثال بزنیم. عنوان مقاله را با <h1> و عنوان هر قسمت از مقاله را با <h2> و اگر هر قسمتی دارای قسمت های زیرین بود هر کدام را با <h3> عنوان گذاری می کنیم. به همین صورت می توان از سطوح مختلف عناوین در HTML بهره برد.

استفاده از عناوین بصورت صحیح در مسائل مربوط به بهینه سازی موتورهای جستجو از اهمیت زیادی برخوردار است.

به عنوان نمونه استفاده از عناوین <h1> تا <h3> در همین پست مشاهده می کنید.

<h1>عنوان مطلب</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus aperiam natus, fugiat eos facilis quibusdam distinctio dignissimos ducimus qui ad molestiae quam ipsam est perferendis reprehenderit accusantium sit ipsa, amet?</p>

<h2>عنوان بخش اول مطلب</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, sed.</p>

<h2>عنوان بخش دوم مطلب</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis corporis, mollitia rem sequi eius tempora, architecto dolore quis nulla sunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, sed.</p>

<h3>عنوان زیر بخش اول بخش دوم</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, sed.</p>

<h3>عنوان زیر بخش دوم بخش دوم</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, sed.</p>