HTML – تگ های پایه (Basic Tags)

تگ Heading

تگ Heading یکی از تگ‌های مهم در HTML است که برای تعریف عنوان یا سرخط‌های متن استفاده می‌شود. این تگ به صورت <h1> تا <h6> در HTML وجود دارد، که هرکدام از این تگ‌ها سطح مختلفی از اهمیت را برای متن تعیین می‌کنند.

برای مثال، تگ <h1> بیشترین اهمیت را دارد و عنوان اصلی صفحه یا بخشی از صفحه را نشان می‌دهد. در حالی که تگ <h6> کمترین اهمیت را دارد و معمولاً برای عناوین فرعی یا رده‌بندی‌های کوچکتر استفاده می‌شود.

در اینجا یک مثال از استفاده از تگ‌های Heading در HTML آورده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Heading در HTML</title>
</head>
<body>
    <h1>این یک عنوان اصلی است</h1>
    <p>اینجا متنی است که به همراه عنوان اصلی قرار دارد.</p>
    
    <h2>این یک عنوان فرعی است</h2>
    <p>اینجا متنی است که به همراه عنوان فرعی قرار دارد.</p>
    
    <h3>عنوان کوچکتر</h3>
    <p>اینجا متنی است که به همراه عنوان کوچکتر قرار دارد.</p>
</body>
</html>

در این مثال، تگ‌های `<h1>` تا `<h3>` برای ایجاد عناوین مختلف استفاده شده است که با توجه به سطح اهمیت، اندازه و استایل متفاوتی را نمایش می‌دهند.

تگ Paragraph

تگ Paragraph در HTML برای تعریف یک پاراگراف متن استفاده می‌شود. این تگ برای گروه‌بندی و ارائه متن به صورت بلوک استفاده می‌شود. متنی که درون این تگ قرار می‌گیرد، به صورت یک پاراگراف در نظر گرفته می‌شود و به طور پیش فرض بین دو پاراگراف فاصله‌ای اضافه می‌شود. در زیر یک مثال از استفاده از تگ Paragraph در HTML آورده شده است:
<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Paragraph در HTML</title>
</head>
<body>
    <h1>عنوان اصلی</h1>
    <p>این یک پاراگراف متن است. در اینجا متنی برای نمایش در یک پاراگراف قرار گرفته است.</p>
    
    <h2>عنوان فرعی</h2>
    <p>در این قسمت یک پاراگراف دیگر وجود دارد که برای توضیحات اضافی به کار رفته است.</p>
</body>
</html>

تگ Line Break

تگ Line Break یا <br> در HTML برای ایجاد یک شکست خط در میان یک متن یا بلاک متن استفاده می‌شود. با استفاده از این تگ، می‌توانید متن را به دو خط مجزا تقسیم کنید بدون ایجاد یک پاراگراف جدید.

در زیر یک مثال از استفاده از تگ Line Break آورده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Line Break در HTML</title>
</head>
<body>
    <h1>عنوان اصلی</h1>
    <p>این یک متن است که در یک خط نوشته شده است.<br>
    این خط جدید است که با استفاده از تگ Line Break ایجاد شده است.</p>
    
    <h2>عنوان فرعی</h2>
    <p>در اینجا یک متن دیگر قرار دارد.<br>
    این متن نیز به دو خط متفاوت تقسیم شده است.</p>
</body>
</html>

در این مثال، تگ <br> برای ایجاد یک شکست خط استفاده شده است. متن داخل هر تگ <p> به دو خط متفاوت تقسیم شده است با استفاده از این تگ.

تگ center

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

در زیر، یک مثال از استفاده از تگ <center> آورده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Centering در HTML</title>
</head>
<body>
    <h1>عنوان اصلی</h1>
    <center>
        <p>این یک متن است که در وسط صفحه قرار می‌گیرد.</p>
        <img src="example.jpg" alt="تصویر مثال" width="300">
    </center>
    
    <h2>عنوان فرعی</h2>
    <center>
        <p>در اینجا یک متن دیگر قرار دارد که مرکز چین شده است.</p>
        <ul>
            <li>آیتم 1</li>
            <li>آیتم 2</li>
            <li>آیتم 3</li>
        </ul>
    </center>
</body>
</html>

در این مثال، تگ <center> برای مرکز چین کردن محتوای داخلی آن استفاده شده است. همچنین، متن، تصویر و لیست داخلی به وسیله این تگ در وسط صفحه قرار گرفته‌اند. اما توجه داشته باشید که از نظر استاندارد HTML5، تگ <center> دیگر توصیه نمی‌شود و به جای آن از CSS استفاده می‌شود.

تگ Horizontal Lines

تگ <hr> یا خط افقی در HTML برای ایجاد یک خط افقی جداکننده در صفحه استفاده می‌شود. این تگ برای جدا کردن بخش‌های مختلف یک صفحه و یا ایجاد جداسازی بین محتواها استفاده می‌شود. در زیر، یک مثال از استفاده از تگ <hr> آورده شده است:
<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Horizontal Line در HTML</title>
</head>
<body>
    <h1>عنوان اصلی</h1>
    <p>این یک متن است که بعد از آن یک خط افقی قرار می‌گیرد.</p>
    <hr>

    <h2>عنوان فرعی</h2>
    <ul>
        <li>آیتم 1</li>
        <li>آیتم 2</li>
        <li>آیتم 3</li>
    </ul>
    <hr>

    <p>متن دیگری که بعد از آن یک خط افقی دیگر قرار می‌گیرد.</p>
    <hr>
</body>
</html>

در این مثال، تگ <hr> برای ایجاد خطوط افقی استفاده شده است. این خطوط افقی بین متن‌ها و لیست‌ها قرار داده شده‌اند تا بخش‌های مختلف صفحه را جدا کنند و به خوانایی و دیدگاه کلی صفحه کمک کنند.

Empty Element چیست؟

در HTML، عناصر خالی یا “empty elements” عناصری هستند که در داخل خود هیچ محتوای قابل مشاهده‌ای ندارند و تنها توسط یک تگ شروع کننده تمثیل می‌شوند، بدون نیاز به تگ پایان دهنده. این عناصر معمولاً برای ایجاد تغییرات یا افزودن ویژگی‌های خاص به محتوای صفحه استفاده می‌شوند و بدون درج محتوای اضافی به صفحه اضافه می‌شوند.

تعدادی از عناصر خالی رایج در HTML شامل عناصری مانند <br>, <hr>, <img>, و <input> می‌شوند. به عنوان مثال:

  • – <br>: این تگ برای ایجاد یک شکست خط (line break) در متن استفاده می‌شود، بدون نیاز به تگ پایانی.
    – <hr>: این تگ برای ایجاد یک خط افقی (horizontal line) جداکننده بین محتواها یا بخش‌های مختلف صفحه استفاده می‌شود.
    – <img>: این تگ برای درج یک تصویر در صفحه استفاده می‌شود و تنها به یک تگ شروع کننده نیاز دارد.
    – <input>: این تگ برای ایجاد فیلدهای ورودی مختلف مانند فرم‌های متنی، چک باکس‌ها، دکمه‌های رادیویی و غیره استفاده می‌شود، و مانند تگ‌های دیگر، به یک تگ شروع کننده نیاز دارد.

استفاده از عناصر خالی در HTML می‌تواند به بهبود ساختار و قابلیت دسترسی وب‌سایت‌ها کمک کند و ویژگی‌های اضافی را به محتوا اضافه کند.

تگ Preserve Formatting

تگ pre در HTML برای نگه‌داشتن فرمت‌بندی اصلی متن به صورتی که در کد منبع آن وجود دارد، استفاده می‌شود. این تگ از این طریق برای نمایش کد‌های کامپیوتری، متن‌های قالب‌بندی شده، یا هر نوع متنی که نیاز به حفظ فرمت دارد، مناسب است. در زیر، یک مثال از استفاده از تگ pre آورده شده است:
<!DOCTYPE html>
<html>
<head>
    <title>مثال تگ Preserve Formatting در HTML</title>
</head>
<body>
    <h1>نمونه کد</h1>
    <pre>
        <code>
            <html>
                <head>
                    <title>صفحه عنوان</title>
                </head>
                <body>
                    <h1>سلام، دنیا!</h1>
                    <p>این یک متن است که در تگ <p> قرار دارد.</p>
                </body>
            </html>
        </code>
    </pre>
</body>
</html>

در این مثال، تگ pre برای نگه‌داشتن فرمت‌بندی دقیق کد HTML استفاده شده است. بدون استفاده از این تگ، مرورگر ممکن است فرمت‌بندی را تغییر دهد و کد را به‌طور پیش‌فرض نمایش دهد. اما با استفاده از تگ pre، فرمت‌بندی اصلی کد حفظ می‌شود و دقیقاً به همان شکلی که در کد منبع ظاهر می‌شود، نمایش داده می‌شود.

تگ Nonbreaking space

Nonbreaking space در HTML یک نوع فاصله است که مانع از شکستن خط در هنگام نمایش متن می‌شود. این فاصله برای جلوگیری از جدا شدن کلمات یا عباراتی که به طور منطقی با یکدیگر مرتبط هستند، مورد استفاده قرار می‌گیرد. در HTML، nonbreaking space با استفاده از کد entity &nbsp; نشان داده می‌شود.

مثال ۱: استفاده از nonbreaking space برای جلوگیری از جدا شدن شماره صفحه از عبارت مرتبط با آن:

<p>صفحه &nbsp;۱۰۰</p>
در این مثال، nonbreaking space بین عبارت “صفحه” و شماره صفحه قرار داده شده است تا جلوگیری از جدا شدن آنها در صورت نوسان قالب‌بندی صفحه انجام شود. مثال ۲: استفاده از nonbreaking space برای جلوگیری از جدا شدن کلمات در جمله:
<p>این یک مثال از استفاده &nbsp; nonbreaking space در &nbsp;HTML است.</p>

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.