DIV, P and SPAN tags.

By default, <p> </p> will add line breaks before and after the enclosed text (so it creates a paragraph). <span> does not do this, that is why it is called inline. When we are using normal text at that time we want <p> tag.

When we are using normal text with some effects at that time we want <span> tag. An important difference is that <div >, <p> are block elements and  <span> is inline, meaning that <p>Hi</p><p>There</p> would appear on different lines when <span>Hi</span><span>There</span>winds up side by side.

You can make your span a block level element by using CSS display: block; or for span I would prefer display: inline-block;

With CSS you can override basically any property of a tag. So if you want a <span> to behave like a <div> or a <p> then all you need to do is add:

span
{
     display: block;
}

Making <p> a <span>

p {
    float: left;
    margin: 0 0 0 0;
}

No spacing will be around, it looks similar to span.

<p> and <div>:

Both <p> and <div> are block elements by default. div is better referred for a block of content having different nested elements, p which is used for paragraphs.

<div> is a generic block level container that can contain any other block or inline elements, including other DIV elements. The <p> element, as its name somewhat implies, is for paragraphs. Thus, <p> should be used when you want to create blocks of paragraph text.

A “DIV” tag can wrap “P” tag whereas, a “P” tag can not wrap “DIV” tag-so far I know this difference. Anything that can go in a <p> can go in a <div> but the reverse is not true. <div> tags can have block-level elements as children. <p> elements cannot.

Advertisements
By Sriramjithendra Posted in HTML5 Tagged

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s