Span and Div tags in HTML
Download as PPT, PDF7 likes7,897 views
The document explains the differences and uses of the <span> and <div> HTML tags, highlighting that <div> creates logical divisions and affects larger sections of content while <span> styles inline elements without affecting structure. It notes that <div> can break paragraphs and is more suited for larger blocks of code, whereas <span> is used for smaller chunks. The document also provides examples of how to use both tags and their attributes.
![SPAN and DIV By Biswadip Goswami (C) Biswadip Goswami, [email_address]](https://image.slidesharecdn.com/span-and-div-1234709045588524-1/85/Span-and-Div-tags-in-HTML-1-320.jpg)
![Introduction The <span> and <div> tags are very useful when dealing with Cascading Style Sheets. People tend to use the two tags in a similar fashion, but they serve different purposes. (C) Biswadip Goswami, [email_address]](https://image.slidesharecdn.com/span-and-div-1234709045588524-1/85/Span-and-Div-tags-in-HTML-2-320.jpg)
![<DIV> The <div> tag defines logical divisions (defined) in your Web page. It acts a lot like a paragraph tag, but it divides the page up into larger sections. <div> also gives you the chance to define the style of whole sections of HTML. You could define a section of your page as a call out and give that section a different style from the surrounding text. (C) Biswadip Goswami, [email_address]](https://image.slidesharecdn.com/span-and-div-1234709045588524-1/85/Span-and-Div-tags-in-HTML-3-320.jpg)
![More about <Div> The <div> tag gives you the ability to name certain sections of your documents so that you can affect them with style sheets or Dynamic HTML. One thing to keep in mind when using the <div> tag is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a <div> you can't have a <div> inside a paragraph. (C) Biswadip Goswami, [email_address]](https://image.slidesharecdn.com/span-and-div-1234709045588524-1/85/Span-and-Div-tags-in-HTML-4-320.jpg)
![Attributes in <div> Because the <center> tag has been deprecated in HTML 4.0, it is a good idea to start using <div style="text-align: center;"> to center the content inside your div. The primary attributes of the <div> tag are: style class id <div id="scissors"> <p>This is <strong class="paper">crazy</strong></p> </div> (C) Biswadip Goswami, [email_address]](https://image.slidesharecdn.com/span-and-div-1234709045588524-1/85/Span-and-Div-tags-in-HTML-5-320.jpg)
![SPAN The <span> tag has very similar properties to the <div> tag, in that it changes the style of the text it encloses. But without any style attributes, the <span> tag won't change the enclosed items at all. <div id="scissors"> <p>This is <span class="paper">crazy</span></p> </div> (C) Biswadip Goswami, [email_address]](https://image.slidesharecdn.com/span-and-div-1234709045588524-1/85/Span-and-Div-tags-in-HTML-6-320.jpg)
![The difference The primary difference between the <span> and <div> tags is that <span> doesn't do any formatting of it's own. The <div> tag acts includes a paragraph break, because it is defining a logical division in the document. The <span> tag simply tells the browser to apply the style rules to whatever is within the <span>. a span element is in-line and usually used for a small chunk of in-line HTML whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code. (C) Biswadip Goswami, [email_address]](https://image.slidesharecdn.com/span-and-div-1234709045588524-1/85/Span-and-Div-tags-in-HTML-7-320.jpg)
![Example <span style="color : #f00;">2ndWord</span> Span tag - syntax <SPAN Attribute=value> * text OR tags span applies to * </SPAN> Allowed Attributes: ID = string CLASS = string STYLE = string TITLE = string LANG = Language (i.e. RU - Russian) DIR = ltr|rtl; specifies if text reads left to right or right to left. SCRIPTING EVENTS = string (C) Biswadip Goswami, [email_address]](https://image.slidesharecdn.com/span-and-div-1234709045588524-1/85/Span-and-Div-tags-in-HTML-8-320.jpg)
![Thank You ! For assistance with your ASP.Net requirements contact: Biswadip Goswami Primary e-mail: [email_address] Alt e-mail: [email_address] Webpage: http://people.cognobytes.com/biswadip (C) Biswadip Goswami, [email_address]](https://image.slidesharecdn.com/span-and-div-1234709045588524-1/85/Span-and-Div-tags-in-HTML-9-320.jpg)
Span and Div tags in HTML
- 1. SPAN and DIV By Biswadip Goswami (C) Biswadip Goswami, [email_address]
- 2. Introduction The <span> and <div> tags are very useful when dealing with Cascading Style Sheets. People tend to use the two tags in a similar fashion, but they serve different purposes. (C) Biswadip Goswami, [email_address]
- 3. <DIV> The <div> tag defines logical divisions (defined) in your Web page. It acts a lot like a paragraph tag, but it divides the page up into larger sections. <div> also gives you the chance to define the style of whole sections of HTML. You could define a section of your page as a call out and give that section a different style from the surrounding text. (C) Biswadip Goswami, [email_address]
- 4. More about <Div> The <div> tag gives you the ability to name certain sections of your documents so that you can affect them with style sheets or Dynamic HTML. One thing to keep in mind when using the <div> tag is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a <div> you can't have a <div> inside a paragraph. (C) Biswadip Goswami, [email_address]
- 5. Attributes in <div> Because the <center> tag has been deprecated in HTML 4.0, it is a good idea to start using <div style="text-align: center;"> to center the content inside your div. The primary attributes of the <div> tag are: style class id <div id="scissors"> <p>This is <strong class="paper">crazy</strong></p> </div> (C) Biswadip Goswami, [email_address]
- 6. SPAN The <span> tag has very similar properties to the <div> tag, in that it changes the style of the text it encloses. But without any style attributes, the <span> tag won't change the enclosed items at all. <div id="scissors"> <p>This is <span class="paper">crazy</span></p> </div> (C) Biswadip Goswami, [email_address]
- 7. The difference The primary difference between the <span> and <div> tags is that <span> doesn't do any formatting of it's own. The <div> tag acts includes a paragraph break, because it is defining a logical division in the document. The <span> tag simply tells the browser to apply the style rules to whatever is within the <span>. a span element is in-line and usually used for a small chunk of in-line HTML whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code. (C) Biswadip Goswami, [email_address]
- 8. Example <span style="color : #f00;">2ndWord</span> Span tag - syntax <SPAN Attribute=value> * text OR tags span applies to * </SPAN> Allowed Attributes: ID = string CLASS = string STYLE = string TITLE = string LANG = Language (i.e. RU - Russian) DIR = ltr|rtl; specifies if text reads left to right or right to left. SCRIPTING EVENTS = string (C) Biswadip Goswami, [email_address]
- 9. Thank You ! For assistance with your ASP.Net requirements contact: Biswadip Goswami Primary e-mail: [email_address] Alt e-mail: [email_address] Webpage: http://people.cognobytes.com/biswadip (C) Biswadip Goswami, [email_address]