Menu - [Jump to main content]

    What is the difference between span and div tags?

    Register to Answer this Question

    Log in if you're already a Bayt.com member.
    irfan shaikh
    by irfan shaikh
    Consultant : Senior Web Designer/Front end Developer - 3 years ago
    is block level element means will take whole avialable width from left to right div is great way to define tableless layout & core structure of your web layout you can make div inline by giving float property float can be left, right, both be cautious when use float becz that can lead to many browser specific bugs mostly with IE6+ always clear your float when needed.
    tag is inline element used to group inline-elements in a document.
    tag provides no visual change by itself.
    tag provides a way to add a hook to a part of a text or a part of a document.
    Eng Nasser
    by Eng Nasser
    programmer_ اعداد برامج - 3 years ago
    http://almsn3.com/2007/11/lesson-7-definition-div-tag-span-tag.html بالعربى ------------------- بالانجليزى http://webdesign.about.com/od/htmltags/a/aa011000a.htm
    Muhammad Sajid
    by Muhammad Sajid
    Applications Engineer - 3 years ago
    The main difference is that the tag is an inline element, whereas the tag is a block level element.
    Two block level elements (divs) will be displayed one after each other vertically, whereas two inline elements (spans) will be displayed one after each other horizontally.
    To understand the difference in visual terms, it might help to think of the element as a word and the element as a paragraph: divs are generally used for laying out blocks of content.
    Spans are normally used for highlighting groups of words within that content.
    Besim Dauti
    by Besim Dauti
    Front End Developer - 3 years ago
    it's very simple.
    both are html tags.
    the differents is when we use.
    the div tag used to contain many data, it is like a box when we can place images, paragraphs, headers etc.
    and span we use more for inline style, example we can place a span tag in paragraph tag, maybe we have a long text and in that text we need somewhere to do the text italic, or bold, we use span tag to give some extra styling in that text.
    it's simple example, but in practive you will see that span tag is very useful tag.
    thanks best regards Besim
    Amr Abd-Elhakim Fawaz
    by Amr Abd-Elhakim Fawaz
    Full Stack Java Web Developer - 3 years ago
    -The tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections.
    -The tag in XHTML is a tag that groupings of inline content (defined) within the content of a page.
    What this means is that a tag defines portions of Web elements to make them easier to manage, style, and manipulate.
    You can use the tag when you want to change the color of a single word.
    The tag is a very powerful tool for Web developers because it is so open-ended.
    The span tag can do anything you want it to do.
    Jawad Ahmad
    by Jawad Ahmad
    Senior Programmer & Software Engineer - 3 years ago
    Others have explained well.
    In short: 1: Div is used to struture your page 2: Span can hold any thing for inline elements
    mostafa abd elhafeez abd elkader ahmeed dwidar
    The SPAN and DIV elements are very useful when dealing with Cascading Style Sheets.
    People tend to use the two elements in a similar fashion, but they serve different purposes.
    The DIV Element The DIV elements defines logical divisions in your web page.
    It acts a lot like a P element, by placing newlines before and after the division.
    A division can have multiple paragraphs in it.
    Using the DIV Tag To use the DIV element, simply surround the area of your page that you want as a separate division with the and tags: contents of div The DIV element gives you the chance to define the style of whole sections of the HTML.
    You can define a division of your page as a call out and give that area a different style from the surrounding text.
    That area could have images, paragraphs, headlines, anything you wanted.
    The DIV element also gives you the ability to ID areas of your documents so that you can change them with Ajax and dynamic HTML.
    The DIV element is different from the new HTML5 SECTION element because it does not give the enclosed content any semantic meaning.
    If you aren’t sure whether the block of content should be a DIV or a SECTION, think about what that content’s purpose is and why you need the DIV or SECTTION element.
    If you need the element simply to add styles to that area of the page, you should use the DIV element.
    If that area of the page has a specific meaning, for example it holds all your social media elements or it contains your blogroll, then you should use the SECTION element.
    One thing to keep in mind when using the DIV element 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.
    The primary attributes of the DIV element are: style class id Even if you don’t use style sheets or DHTML, you should get into the habit of using the DIV element.
    This will give you more flexibility and future proof your HTML.
    Also, you can use the id to identify your divisions so that your web pages are well formed.
    Because the CENTER element has been deprecated in HTML 4.0 and is obsolete in HTML5, it is a good idea to start using to center the content inside your DIV.
    Learn More About the DIV Element The SPAN Element The SPAN element has very similar properties to the DIV element, in that it changes the style of the text it encloses.
    But without any style attributes, the SPAN element won’t change the enclosed items at all.
    The primary difference between the SPAN and DIV elements is that SPAN doesn’t do any formatting of it’s own.
    The DIV element includes a paragraph break.
    The SPAN element simply tells the browser to apply the style rules to whatever is within the SPAN.
    To use the SPAN element, simply surround the text that you want to add styles to with the and tags: Highlighted text and non-highlighted text.
    The SPAN element has no required attributes, but the three that are the most useful are the same as for the DIV element: style class id Use SPAN when you want to change the style of elements without placing them in a new block-level element in the document.
    For example, if you had a Level 3 Heading (H3) that you wanted the second word to be red, you could surround that word with 2ndWord and it would still be a part of the H3 tag, just red.
    For example: This is My Awesome Headline Learn More About the SPAN Element Suggested Reading Overview of the HTML DIV Element The SPAN Tag When to Use the HTML5 SECTION Element Suggested Reading How to Prevent the Carriage Return Before and After DIV Tags CSS Centering - How to Center a Fixed Width Layout Document with CSS Alignments - Floating Your Elements on the Page CSS Help CSS Step by Step CSS Positioning CSS Articles Related Articles CSS Lesson 2: The SPAN and DIV Elements How to Use Span and Div Tags Video Flexible CSS Decendants DIV and Span Tags - How to Use DIV and Span Tags to Format in HTML Video CSS Relationships - HTML Tag Relationships and How they Impact CSS Selector...
    Muhammad Raheel
    by Muhammad Raheel
    Technical Lead - 3 years ago
    Div is Block type HTML tag.
    Span is inline type HTML tag Block means when you will use Div then it will take whole row.
    like: Name: Above code will show Name in one row and textbox in second row: Name Textbox Inline means it will show in one row until width of row has space.
    Name: Above example will show Name and Textbox in one row if width of row has enough space.
    like: Name: Textbox You can make any HTML tag as block by using CSS statement "display: block": like: make Span tag as block (same as Div) Span { display: block; } Make Div tag as inline tag (same as Span) Div { display: inline; }
    by ABU BAKER
    Sr. Software Engg/Web Developer - 3 years ago
    div Tag: Following are the characteristics: As the name indicates, the div tag defines a ‘division’ in a web page.
    div is a block-element; its default display value is “block”.
    div tag is commonly used while creating Css based layouts in html.
    by default, a line-break is placed before and after this element.
    span tag: Following are the characteristics: span tag makes no visual difference in the page, unless customised with style attribute.
    span is an in-line element.
    span is commonly used to stylize texts.
    The in-line feature makes it easy to use custom styles without changing the layout.
    No line-breaks by default, but this can be achieved if we change its in-line nature by specifying in the style attribute to ‘display:block;’
    Faizan Ahmad
    by Faizan Ahmad
    Developer - 3 years ago
    The main difference is that divs are block elements and spans are inline elements.
    Both can be styled using CSS to act however you wish but out of the box you would normally use spans for smaller inline divisions and divs for larger blocks.
    Some things will affect inline and block elements different, for example you cannot put a height onto a span element.

    Loading Show more

    More Questions Like This
    Learn to Advance Your Career
    Advance your career with Bayt.com's self-development tools. These tools are a great way to learn new things related to your job.
    تصميم المواقع بالفوتوشوب - Photoshop For Web Design
    في هذا الكورس يوضح السيد صبري كيفية إستخدام برنامج الفوتوشوب في تصميم موقع إحترا...
    Level: ---
    Duration : 40 Minutes
    Level: ---
    Duration : 35 Minutes

    Thanks for sharing your expertise! Can you also help answer any of these questions?