Span and Div tags in HTML

8,233 views
7,851 views

Published on

This slide guides through the differences of the Span and Div tags in HTML.

I started a channel on YouTube for Networking lovers. "VERY SIMPLE NETWORKING" SERIES can be found at http://www.youtube.com/bgccnadom.

THANK YOU FOR YOUR SUPPORT AND LIKES.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,233
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
128
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Span and Div tags in HTML

  1. 1. SPAN and DIV By Biswadip Goswami (C) Biswadip Goswami, [email_address]
  2. 2. Introduction <ul><li>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. </li></ul>(C) Biswadip Goswami, [email_address]
  3. 3. <DIV> <ul><li>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. </li></ul><ul><li><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. </li></ul>(C) Biswadip Goswami, [email_address]
  4. 4. More about <Div> <ul><li>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. </li></ul><ul><li>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. </li></ul>(C) Biswadip Goswami, [email_address]
  5. 5. Attributes in <div> <ul><li>Because the <center> tag has been deprecated in HTML 4.0, it is a good idea to start using <div style=&quot;text-align: center;&quot;> to center the content inside your div. </li></ul><ul><li>The primary attributes of the <div> tag are: </li></ul><ul><li>style </li></ul><ul><li>class </li></ul><ul><li>id </li></ul><ul><li><div id=&quot;scissors&quot;> <p>This is <strong class=&quot;paper&quot;>crazy</strong></p> </div> </li></ul>(C) Biswadip Goswami, [email_address]
  6. 6. SPAN <ul><li>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. </li></ul><ul><li><div id=&quot;scissors&quot;> <p>This is <span class=&quot;paper&quot;>crazy</span></p> </div> </li></ul>(C) Biswadip Goswami, [email_address]
  7. 7. The difference <ul><li>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>. </li></ul><ul><li>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. </li></ul>(C) Biswadip Goswami, [email_address]
  8. 8. Example <ul><li><span style=&quot;color : #f00;&quot;>2ndWord</span> </li></ul><ul><li>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 </li></ul>(C) Biswadip Goswami, [email_address]
  9. 9. Thank You ! <ul><li>For assistance with your ASP.Net requirements contact: </li></ul><ul><li>Biswadip Goswami </li></ul><ul><li>Primary e-mail: [email_address] </li></ul><ul><li>Alt e-mail: [email_address] </li></ul><ul><li>Webpage: http://people.cognobytes.com/biswadip </li></ul>(C) Biswadip Goswami, [email_address]

×