advertisement

Span and Div tags in HTML

29 %
71 %
advertisement
Information about Span and Div tags in HTML
Technology

Published on February 15, 2009

Author: biswadip

Source: slideshare.net

Description

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.
advertisement

SPAN and DIV By Biswadip Goswami (C) Biswadip Goswami, [email_address]

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]

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.

<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]

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.

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]

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.

Attributes in <div> 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. The primary attributes of the <div> tag are: style class id <div id=&quot;scissors&quot;> <p>This is <strong class=&quot;paper&quot;>crazy</strong></p> </div> (C) Biswadip Goswami, [email_address]

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.

The primary attributes of the <div> tag are:

style

class

id

<div id=&quot;scissors&quot;> <p>This is <strong class=&quot;paper&quot;>crazy</strong></p> </div>

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=&quot;scissors&quot;> <p>This is <span class=&quot;paper&quot;>crazy</span></p> </div> (C) Biswadip Goswami, [email_address]

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=&quot;scissors&quot;> <p>This is <span class=&quot;paper&quot;>crazy</span></p> </div>

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]

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.

Example <span style=&quot;color : #f00;&quot;>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]

<span style=&quot;color : #f00;&quot;>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

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]

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

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

DIV und SPANs - HTML lernen - HTML Kurs / Seminar

DIV und SPANs. Über die 2 Elemente DIV und SPAN, kann CSS erst seine volle Pracht entfalten. DIV steht für das englische "division" in der Bedeutung ...
Read more

HTML Tag - W3Schools

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML ...

Read more

Span and Div | HTML Dog

HTML is all about applying meaning to content. Whereas most HTML tags apply meaning (p makes a paragraph, h1 makes a heading etc.), the span and div tags ...
Read more

HTML-TAG
und - webmaster-crashkurs.de

HTML-TAG

und Es gibt in HTML 2 Elemente, die als logische Funktion nur Bereiche umschließen ... Schachteln von HTML-TAGs; HTML-Validator von W3C;
Read more

Span and div - Wikipedia, the free encyclopedia

In HTML, span and div elements ... There are three main reasons to use span and div tags ... The judicious use of div and span is a vital part of HTML ...
Read more

HTML span | mediaevent.de

span-Tags können beliebig ineinander verschachtelt werden. Innerhalb von span dürfen nur Inline-Elemente liegen – also keine HTML-Tags wie div, table ...
Read more

Using Span and Div with CSS in Web Design

The span and div elements are ... SPAN and DIV tags in HTML ... is enclosed by the tags:

Highlighted ...
Read more

HTML div tag - W3Schools

...