What is the difference between HTML tags and ?

Question

I would like to ask for some simple examples showing the uses of

and . I\'ve seen them both used to mark a section of a pa

相关标签:

Answer 1

Just for the sake of completeness, I invite you to think about it like this:

• There are lots of block elements (linebreaks before and after) defined in HTML, and lots of inline tags (no linebreaks).
• But in modern HTML all elements are supposed to have meanings: a <p> is a paragraph, an <li> is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using <blockquote> whether the content was a quote or not.
• So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.
• For this reason, they added two more elements to HTML: the generic, or meaningless elements <div> and <span>, because otherwise, people would go back to abusing the elements which do have meanings.

Answer 2

I would say that if you know a bit of spanish to look at this page, where is properly explained.

However, a fast definition would be that div is for dividing sections and span is for applying some kind of style to an element within another block element like div.

Answer 3

<div> is a block-level element and <span> is an inline element.

If you wanted to do something with some inline text, <span> is the way to go since it will not introduce line breaks that a <div> would.

---

As noted by others, there are some semantics implied with each of these, most significantly the fact that a <div> implies a logical division in the document, akin to maybe a section of a document or something, a la:

<div id="Chapter1">
   <p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>

Answer 4

It's plain and simple.

• use of span does not affect the layout because it's inline(in line (one should not confuse because things could be wrapped))
• use of div affects the layout, the content inside appears in the new line(block element), when the element you wanna add has no special semantic meaning and you want it to appear in new line use <div>.

Answer 5

There are already good, detailed answers here, but no visual examples, so here's a quick illustration:

<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>

<div> is a block tag, while <span> is an inline tag.

Answer 6

Remember, basically and them self doesn't perform any function either. They are not specific about functionality just by their tags.

They can only be customized with the help of CSS.

Now that coming to your question:

SPAN tag together with some styling will be useful on having hold inside a line, say in a paragraph, in the html. This is kind of line level or statement level in HTML.

Example:

<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>

DIV tag functionality as said can only be visible backed with styling, can have hold of large chunks of HTML code.

DIV is Block level

Example:

    <div class="large-time">
    <p>Am writing <span class="time"> this answer</span> in my free time of my day. 
    </p>
    </div>

Both have their time and case when to be used, based on your requirement.

Hope am clear with the answer. Thank you.