HTML <div> Tag

<div> tag ஒரு empty container, இது ஒரு division அல்லது section-ஆகா வரையறுக்கிறது. css பயன்படுத்தாமல் இதில் எந்த ஒரு effect-யும் கொண்டுவர இயலாது. css-ஐ பயன்படுத்தி நமக்கு பிடித்த வடிவத்தில் இதை மாற்றி கொள்ளலாம்.

Note: இது ஒரு block element. அதாவது <div> tag-க்கு முன்னும் பின்னும் அதுவாகவே ஒரு break line-ஐ ஏற்படுத்திக்கொள்ளும். ஆகையால் இதை பயன்படுத்தும்போது எப்போதும் ஒரு தனி line ஆகத்தான் இருக்கும்.

Example

Try this code 
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
<div>This is a wonderful day, I have never seen this one before.</div>
<div>Nothing makes a woman more beautiful than the belief that she is beautiful.</div>
<div>You may be one person to the world but <div>you may also be the world to one person.</div> </div>    
</body>
</html>

Output:

This is a wonderful day, I have never seen this one before.
Nothing makes a woman more beautiful than the belief that she is beautiful.
You may be one person to the world but
you may also be the world to one person.

<div> tag with style

Example

Try this code 
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <div class="div-style">This is a wonderful day, I have never seen this one before.</div>
    <div class="div-style">Nothing makes a woman more beautiful than the belief that she is beautiful.</div>
    <div class="div-style">You may be one person to the world but <div class="div-style">you may also be the world to one person.</div> </div>
    <style>
        .div-style{
            margin-bottom: 5px;
            border:1px solid #111;
        }
    </style>
</body>
</html>

Output:

This is a wonderful day, I have never seen this one before.
Nothing makes a woman more beautiful than the belief that she is beautiful.
You may be one person to the world but
you may also be the world to one person.

We recommend to use <div> tag only when no other semantic elements introduced in HTML5 (such as <nav> , <main> or <article>) are appropriate.

You can place any HTML element within the <div> tag, including another <div>.

Note: ஒரு <p> tag-ன் உள்ளே <div> tag இருக்க முடியாது. ஏனெனில் <div> tag-ஐ உள்ளே enter செய்யப்பட்ட உடன் வெளியில் உள்ள <p> tag-ஐ அது உடைத்துவிட்டு மீண்டும் <div> tag மட்டும் தனித்து செயல்பட ஆரம்பித்துவிடும்.

To apply styles inside a paragraph use <span> tag, which is used with inline elements.

<div> with in <p> with style

Example

Try this code 
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <p  class="pstyle">
    This is a wonderful day, I have never 
        <div class="dstyle1">seen this one before.</div>
  I don’t like standard beauty 
    </p>
    <p  class="pstyle">Nothing makes a woman more beautiful than the <div class="dstyle1">belief that she is beautiful.</div> To be beautiful means to be yourself</p>
    <p  class="pstyle">You may be one person to the world but <div class="dstyle1">you may also be the world to one person.</div> You don’t need to be accepted by others. </p>
    <style>
        .dstyle1{
            padding: 5px;
            background-color: lightyellow;
        }
        .pstyle{
            border:1px solid #006699;
            background-color: lightsteelblue;
            border: 1px solid #D7B740;
        }
    </style>    
</body>
</html>

Output:

This is a wonderful day, I have never

seen this one before.
I don’t like standard beauty

Nothing makes a woman more beautiful than the

belief that she is beautiful.
To be beautiful means to be yourself

You may be one person to the world but

you may also be the world to one person.
You don’t need to be accepted by others.

Comments

Ma nuhman 1st August,2024 10:44 am
Good இலகுவாக HTML கற்பதற்பு உதவுகின்றது