I am making a website with personal articles. The body of my articles is a basic div containing paragraphs, but recently I found it useful to use some span's out of the paragraphs to manage my content as desired, hence in the div's.
As the web semantic becomes an important role and becomes more and more well constrained, I was curious of the downsides of such a practice.
I am not too familiar with the standards of HTML yet. However, I was thinking using span's in div's is semantically not clean.
Is the Googlebot going to soil the referencing on that?
There is nothing wrong with using a span element inside of a div element. It is absolutely valid. It will have no negative impact on search engine optimization.
div elements are block elements and span elements are inline elements. Inline elements can be placed inside of block elements. The opposite is what you want to avoid: Do not put div elements inside span elements.
It’s fine if no other text-level element is appropriate in your case.
You can check their purposes in the usage summary: Does it represent a hyperlink, stress emphasis, importance, a side comment, …? If the answer is no to all candidates, go with "Other", i.e., the span element.
div and span elements don’t represent anything, they are meaningless elements to be used in cases where no other element is appropriate. So adding/removing div/span elements would never change the semantics of the document (unless meaningful attributes, like lang, were used).
Related
What is the difference between <p>, <div> and <span>?
Can they be used interchangeably?
Because I am facing problem that, for <span> margin not working but for the <div> and <p> it's working..
p and div elements are block level elements where span is an inline element and hence margin on span wont work. Alternatively you can make your span a block level element by using CSS display: block; or for span I would prefer display: inline-block;
Apart from that, these elements have specific semantic meaning, div is better referred for a block of content having different nested elements, p which is used for paragraphs, and span is nothing but an empty element, hence keeping SEO in mind, you need to use right tag for right thing, so for example wrapping the text inside div element will be less semantic than wrapping it inside a p
A <p> should contain paragraghs of text, a <div> is to layout your page using divisions and a <span> allows markup to be styled slightly different, for example within a <p>
This is how they should be used semantically, the styling of them however using CSS is up to you.
As a web developer, I can't help but feel all these guidelines are incredibly misleading in the year 2015.
Sure, a "p" tag was at one point designed for paragraph use... but in 100% of my applications, designs, and just day-to-day general development, we've encountered nothing but limitations imposed by the "p" tag... it offers no benefit in today's internet.
I would say yes, "p" is a descriptive element, and for that reason if that's all it did; "describe something", I'd be all for it... but it DOESN'T just describe the content, it straight up ALTERS the content, which while already being a limitation in itself, isn't all it does, it also LIMITS the content. Why anyone in their right mind would purposefully embrace a limiting building block when it comes to web development is beyond me. From a design standpoint it doesn't make sense. From a structural standpoint it doesn't make sense. From any from of DOM manipulation PERIOD, it doesn't make sense.
We've all-together stopped using the "p" tag except where we are absolutely forced to (client WordPress post implementations, silly things like that, for example). There is no excuse as to why we can't describe nearly everything with well-named classes and ID's, so we see zero reason to have to bow to "standards" that add no benefit whatsoever, and in fact HINDER every piece of the puzzle. The "p" tag is of no help to the developer, the end-user, nor to modern search engines. In a nutshell... "p" tag is all but deprecated in even remotely complicated implementations (and with very good reason), don't let the comments of these standard's nazi's control how you display your content!
Even on this very site, a site oriented towards developers at it's core, has at the VERY TOP of it's own page a little pop-in piece that could have used a "p" tag as it contains enough text to run around to a second line, but is entirely captured in a DIV (and only a div, not a div -> p) for a nearly infinite number of reasons... foremost being that today, "p" SUCKS compared to any well described block created from DIVs, that is as-well-described (moreso... I say) as a paragraph "p" with the very descriptive id="blurb".
From Stack Overflow:
<div id="blurb">Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.</div>
I say down with
<p>I suck</p>
and long live
<div class="p">I rock</div>
And yes, I do appreciate our current web standards, and things like <span> still have their place, even offering up abilities to do things with some modern browsers you can't accomplish with a <div> container, but it's just that this one in particular, the broken element "p", as a piece of a restructured and modernized HTML... should have been left in the grave where it belongs... this is a generation of web where paragraphs aren't even paragraphs forever anymore... the blocks literally change... it's just plain outdated and impractical.
As others have answered… div and p are “block elements” (now redefined as Flow Content) and span is an “inline element” (Phrasing Content). Yes, you may change the default presentation of these elements, but there is a difference between “flow” versus “block”, and “phrasing” versus “inline”.
An element classified as flow content can only be used where flow content is expected, and an element classified as phrasing content can be used where phrasing content is expected. Since all phrasing content is flow content, a phrasing element can also be used anywhere flow content is expected. The specs provide more detailed info.
All phrasing elements, such as strong and em, can only contain other phrasing elements: you can’t put a table inside a cite for instance. Most flow content such as div and li can contain all types of flow content (as well as phrasing content), but there are a few exceptions: p, pre, and th are examples of non-phrasing flow content (“block elements”) that can only contain phrasing content (“inline elements”). And of course there are the normal element restrictions such as dl and table only being allowed to contain certain elements.
While both div and p are non-phrasing flow content, the div can contain other flow content children (including more divs and ps). On the other hand, p may only contain phrasing content children. That means you can’t put a div inside a p, even though both are non-phrasing flow elements.
Now here’s the kicker. These semantic specifications are unrelated to how the element is displayed. Thus, if you have a div inside a span, you will get a validation error even if you have span {display: block;} and div {display: inline;} in your CSS.
<p> and <div> are block elements by default. <span> is an inline element.
Block elements start and end with a new line in the browser while inline elements do not. "Inline" means they are part of the current line.
With today's complex web designs the purpose of these distinctions are less obvious but if you think back to the early days of HTML (where these tags come from) where documents were basically embellished text with images, the distinction becomes clearer.
Either way, with CSS you can override basically any property of a tag. So if you want a <span> to behave like a <div> or a <p> then all you need to do is add:
span
{
display: block;
}
With this code, you will be able to set the vertical margins as well as the horizontal ones.
1) div element is designed to describe a container of data.
div tag can contain other elements---div is Block Level
2)p element is designed to describe a paragraph of content---para is Block Level
3)span element Usually used for a small chunk of HTML.---span is Inline
4)block-level elements begin on new lines,
inline elements do not.
5)Most browsers insert a blank line between any two block-level elements.
Ex: There will be blank line between para and para and header and para and between two headers,between a paragraph and a list, between a list and a table,
etc
I more thought that,p and div elements are block level element on the other side, span is an inline element. but when you write p in your code it will take space top and bottom but div behavior not like that. Check out this experiment on JS fiddle:
https://jsfiddle.net/arifkarim/9wcef1c3/
I've read many explanations of what the actual purpose of the < span > tag is, and I've tried to incorperate those explanations into real applications but have failed every time.
One person told me that it was to apply classes to sub-tags below it, which does kind of work, except it doesn't apply dimensions to elements, unless you mess around with the display and/or inline settings, which can totally screw up a layout.
Then someone else told me that it's use as a substitute for the < div > tag, which doesn't work because floats or "margin: auto"-type attributes don't work unless contained inside certain types of elements.
Then someone else told me that it's used as a text container, which doesn't work because the "text-align" attribute doesn't work, again, unless contained inside certain types of elements. A default-attribute-cleared < p > tag is much more suited, in my experience.
So what exactly is the point of them? Why are so many people using them when < div > seems to do everything that they're apparently capable of and more?
From Official Docs:
The DIV and SPAN elements, in conjunction with the id and class
attributes, offer a generic mechanism for adding structure to
documents. These elements define content to be inline (SPAN) or
block-level (DIV) but impose no other presentational idioms on the
content. Thus, authors may use these elements in conjunction with
style sheets, the lang attribute, etc., to tailor HTML to their own
needs and tastes.
As it says, you can use <span> tag to structure (inline) the sections of page along with styling which you may optionally pass via id, class or stylesheets.
Characteristics of <span> tag:
It's display is inline by default which means:
you can not apply width to it
you can not apply height to it
you can make it block-level too by using display:block (div serves the same purpose)
The <div> tag is opposite to that and you can apply above rules to it.
It is an inline element with no attached semantics that can be used to wrap some inline content for
the application of JavaScript (e.g. event handlers or moving about the DOM)
the application of CSS
use with the lang attribute
processing by custom tools
… when no element with more appropriate semantics exists.
floats or "margin: auto"-type attributes don't work unless contained inside certain types of elements.
They work (or otherwise) based mostly on the display value, not the element type.
Why are so many people using them when <div> seems to do everything that they're apparently capable of and more?
A div is identical to a span except it:
Can contain block elements
Cannot (error recovery not withstanding) be contained by an inline element (or any other element that can contain only inline content, such as a <p>)
Is display: block by default (instead of inline)
When the text is in a <span> element you can add styles to the content, or manipulate the content.
For an example
Is <h1>Heading</h1> valid in HTML5?
yes what you've written is valid in HTML5, but it's not all inline elements, I think it's just <a> 's it applies to..
Reference: “Block-level” links in HTML5
Tip: if using this set the <a> to display: block; or there may be unintended visual styling results : Source: Test Case
Update:
It is "disallowed" for other "block in inline" combinations where "default styles are likely to lead to confusion" - explanation is here:
Cases where the default styles are likely to lead to confusion
Certain elements have default styles
or behaviors that make certain
combinations likely to lead to
confusion. Where these have equivalent
alternatives without this problem, the
confusing combinations are disallowed.
For example, div elements are rendered
as block boxes, and span elements as
inline boxes. Putting a block box in
an inline box is unnecessarily
confusing; since either nesting just
div elements, or nesting just span
elements, or nesting span elements
inside div elements all serve the same
purpose as nesting a div element in
a span element, but only the latter
involves a block box in an inline box,
the latter combination is disallowed.
Is <div/> different from <span style="display:block" /> in any way?
They render just fine the same. Any semantic difference between the two?
Yes they are different.
Even though you style a span with display: block you still can't put block-level elements inside it:
<div><p>correct</p></div>
<span style="display: block;"><p>wrong</p></span>
The (X)HTML still has to obey the (X)HTML DTD (whichever one you use), no matter how the CSS alters things.
Here's an example where it makes a real difference (for valid code, at least):
<a href='example.com'>
<span class='title' style='display:block;'>The title of the image is also a link</span>
<img src="example.com/someimage.jpg"/>
</a>
That allows you to make your span a block level element and allows the image and span to highlight together when moused over.
A div would not be valid nested inside an a tag.
A <div> is a block level element that has no specific semantics of its own, beyond defining a discrete block of content. A <span> is an inline element that has no specific semantics of its own, beyond defining a discrete segment of inline content.
You can use CSS to make a span display as a block, but there is absolutely no reason to do so EDIT: other than for purely visual effects, as Gabriel demonstrates; what I mean is that you shouldn't use CSS to try to coerce a span into having block-level significance in terms of document structure. Furthermore, if you do, your content will probably appear meaningless to a user without CSS, such as a blind user, or a search engine.
If it's a block, use a div. If it's part of inline content, use a span. Remember, CSS is about presentation alone; your markup still needs to be structured in a logical manner if your content is to be usable.
See http://www.w3.org/TR/html401/struct/global.html#edef-DIV for the details.
Yes. They can contain different things and are allowed in different places.
They will also be rendered differently in environments where CSS is not available (e.g. in some email systems)
For some time I've been making websites, but have never really seen discussion of the proper usage of the container tags. I've seen any number of different types of content in the collection tags, but it usually seems that the page creator just picks a style they like and sticks with it.
The main discrepancy in my mind is that between
<p>
<div>
but I'd also like opinions regarding
<span>
and any others I may be forgetting.
HTML was originally created to put the content of documents into some sort of structure understandable to computers. With that in mind, the p tag is supposed to hold anything that would be structured as a paragraph if the content of the page were to be turned into a printed document. The div and span elements are reserved as general-use containers to facilitate formating and grouping of related elements to provide additional levels of structure, perhaps correlating to pages in a text document.
In some cases, p tags should contain other elements, such as anchor (a), image (img) and other in-line elements, because they relate directly to the content of the rest of the paragraph and it makes sense to group them that way, or the text of the rest of the paragraph provides a more in-depth description.
If there is not additional description of those elements, however, it does not make sense to place them in a paragraph simply as a convenient container; a div would be more appropriate. In general, a paragraph is supposed to contain one paragraph of text and any directly related or described elements. Nothing else makes much sense in a paragraph.
UPDATE: HTML5 also adds a number of other semantic "container" elements, including article, nav, header, section, and aside.
I think, the meaning of the tags is something like this:
<p>Paragraph, usually just text</p>
<div>A block, containing anything</div>
<span>Just a simple non-blocking wrapper</span>
The difference between these three (and many other) tags is their semantic meaning. The HTML standard includes both tags with specific semantic meanings (<p> for paragraphs, <em> for emphasized text, etc.) and tags without semantic meaning.
The latter are <div> and <span>, which are used to identify block- or inline-level content which needs to be identified (using, say a class= or id= attribute), but for which a semantically-specific tag does not exist. For example, one may write <p>Hi, my name is <span class="name">John Doe</span>.</p> — indicating that it's a paragraph (which the browser already has an idea how to handle) and that part of it's content is a name (which means absolutely nothing to the browser unless CSS or JavaScript uses it).
These tags are therefore incredibly useful both in adding additional information to an HTML document which doesn't fit within the semantic tags supplied by the standard (see the hCard specification for an excellent example) and for applying visual (CSS) or functional (JavaScript) structure to a document without altering its semantics.
I think page creators should use semantic markup, meaning that the markup they create should communicate meaning (and not presentation). <div> and <p> have different meanings. The former is used to define a division (or section) of an HTML page, the latter to define a paragraph of text.
<p> is a block-level element that should contain a paragraph, comprised of text, inline elements that modify that text (<p>, <a>, <abbr>, etc.), and images.
<div> is a block-level element used to divide the page, almost always in conjunction with CSS styles.
<span>... well, I honestly don't use this tag that often. It's an inline element, and I use it usually when I'd like to apply styles to a portion of text that wouldn't benefit from using something with more meaning, like the <strong> and <em> tags.
I was tought to view <span> and <div> as the "tofu of webdeveloppement", since it has no real flavor but you can do virtually anything with it.
(X)HTML tags define what the text they're surrounding is. Is it and address, is it a link, is it a paragraph, and so on...
<div> and <span> are simply ways of getting to pieces of your site you normally can't get to. Like when you're trying to resize a | symbol. Fastest way I've ever found was to put a span around it, give it a class and then implement the CSS.
That's what they're good for, in my opinion. I'd be interested to hear more or even corrections on what I've written here.
It sounds like you need to read the HTML specification
The p element:
The p element represents a paragraph.
The div element:
The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.
The span element:
The span element doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. class, lang, or dir. It represents its children.
The major difference between div and span is that span is flow content, phrasing content, and palpable content, while a div is only flow content and palpable content.
Essentially this boils down to:
div elements are block-level elements, and typically may only be placed within other block-level elements, whereas span elements are inline elements, and may be placed within most other elements.
The HTML spec defines which elements are acceptable as descendents of each element.