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/
Related
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).
I am new to HTML and CSS and I would like to know the difference between flow content and phrasing content. Other than the W3 official documentation the MDN documentation is helpful and states:
Flow content is defined as following:
Elements belonging to the flow content category typically contain text
or embedded content.
Phrasing content is defined as following:
Phrasing content defines the text and the mark-up it contains. Runs of
phrasing content make up paragraphs.
However, the documentation gives very little difference between the two, can somebody clarify what the major differences are between phrasing content and flow content?
The easiest way to remember, is that if it can be inside a sentence, it's phrasing content.
Text can be inside a sentence, so it's phrasing.
An emphasised bit can be inside a sentence, so it's phrasing.
An image can be inside a sentence, so it's phrasing.
A sub-heading or an article cannot be inside a sentence, so they are not phrasing.
A link can be inside a sentence, so it's phrasing. But as of HTML 5, one is also allowed to have a link containing whole blocks of text, in which case it is not phrasing.
Phrasing content falls into three categories:
Content that is replaced by something visually. (E.g. as <img> is replaced by an image.
Content that contains text within a run.
Content that provides metadata about a specific piece of text within a run. (E.g. <link> when used with itemprop rather than <link> in the <head> which defines a relationship between a document as a whole and the resource linked to).
Flow content includes phrasing content, but also elements like <p> and <h1> which define a whole run of text, <article> which contains one or more runs and <table> which contains rows of cells which contain runs of text.
It is very critical in advanced CSS to know the different kinds of content and not just the definition of it , or just the list of elements that come under a certain type of content , but also "Why" a certain element comes under a certain category and whats the major difference between similar content categories , in the case of my question , whats the difference between "Phasing content" and "Flow content".
I don't entirely agree.
It's absolutely vital to basic HTML to know this. It's the very first thing that should be taught in HTML after writing <html><head><title>Hello</title></head><body><p>Hello World!</p></body></html> in a text editor and opening it in a browser, and "there are several different elements in HTML". It may not become fully clear until one has then learnt the elements that are examples of each, but getting one's head around it is important as a lot of things just don't make sense otherwise and it makes the difference between a simple markup language with easy-to-remember elements and attributes and a messy soup of tags where you can never remember why validators are saying you're doing it wrong.
Now certainly, your CSS is going to generally follow from your semantics, and the defaults follow from them too (most visible phrasing content is either a replaced element or display: inline;, most other flow content is either display: block; or something that relates quite obviously to the semantics (e.g. tr: {display: table-row;}).
But because the HTML is where you think first about the semantics, when writing the CSS you can focus more on just the rendering, and to a degree free yourself from that concern. Certainly, correct semantics should not generally become a restriction upon the CSS beyond the simple fact that you obviously want a visual design that helps your message get across.
So for example, just because <p> is defined as "a paragraph" and in our culture paragraphs are today generally typeset as blocks of text with either a vertical margin between them or an indent on the first line, does not mean we have to follow that rule. We can layout our paragraphs in late-mediæval style like here with paragraphs running together separated by pilcrows.
Not that you are likely to want to do so, but you certainly can. So while good CSS does build on the semantics of the elements, it also frees us from them in that we don't have to have incorrect semantics in order to have something look (or sound) like we want.
I think this can be considered the main point about phrasing content:
Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.
(Highlight by me.)
Phrasing content is mainly whatever you (could/would) put into paragraphs. For longer parts of text content inside your page, most of it should usually be organized into paragraphs. Paragraphs are the most basic level of structuring text content, same as you would have it in a traditional written text in a book or similar.
Flow content is a broader category. As you can see in the Venn diagram on the MDN page, it contains all other categories of content (with the exception of meta data, with is displayed as being partly outside of it – which makes sense, since a lot of meta data goes into the head element.)
So phrasing content is mostly intra-paragraph level, whereas flow content is basically whatever you might want to put inside body directly, or in any of the “larger” structuring elements.
You see that the list of elements for flow content and the list of elements for phrasing content overlap in large parts – f.e. both contain elements such a, img, input, label, span, etc. All of those elements you might want to put inside a p paragraph for a good reason, but they might also be children of body directly, or nested into other elements, such as a links inside an (un-)ordered list for purpose of marking up a navigation list, an img that is the site logo (and therefor not part of a paragraph), etc. So a lot of that stuff can be both inside of paragraphs, as well as outside of them – depending on the specific meaning of the piece of content they mark up.
The elements that phrasing content does not encompass, but that are part of flow content only, are those that are not allowed inside a paragraph – p itself of course, the different headline levels, section, article, aside, div, form, footer, fieldset, table etc. You might also call these the main, “top level” structural elements.
If you are familiar with the “old” HTML 4.01 classification of inline vs block elements, then this should not present too much trouble. Most of what was categorized inline was allowed in paragraphs, whereas no other block element was allowed inside a paragraph. (Of course HTML 5 added some new elements, that therefor where not part of either inline or block before.)
I used paragraphs to make the point up to here mostly, but same holds true for headline elements as well. Those were also only allowed to contain inline elements in HTML 4.01 – and now their content model is phrasing content as well. Putting a div, footer, table or paragraph inside a headline would just not make sense; putting a link or image in there however can make sense in a lot of cases easily.
And of course this kind of “trickles down” as well. For an element such as em (random example), the content model is phrasing content as well. Would not make sense otherwise – for an em element inside a paragraph all of a sudden to allow elements that the paragraph itself is not allowed to contain, would not be sensible at all.
(The a element has gotten some special treatment in HTML 5 though. Previously only allowed to contain inline elements, it can now contain both phrasing content and flow content – f.e. having an a contain a div or a paragraph is allowed. It depends on context of course – if the a itself is an ancestor of an element that allows only phrasing content, then it itself can only contain phrasing content too. This change was made due to demand by developers to be able to use larger sections of structured content to link somewhere else – f.e., you might want a link to contain a headline plus some additional [paragraph] text inside it. Before HTML 5, people had to “fake” this using inline elements inside the link and formatting them via CSS to look like a headline and paragraph.)
So although HTML 5 has broken up the two basic categories of block and inline into several categories, flow and phrasing content are the two most important ones of those still, I think, and can be said to be the “successors” of block and inline to a certain extend.
And when in doubt, there is always the specification to look things up in; and the validator will tell you if you nested elements in a way that is not allowed. I’d recommend you always check your pages using this tool – and with time, all of this will come more naturally by itself.
These categories are made when trying to give a semantic meaning to markup in order to best describe the content in it.
Phrasing content defines the text and the mark-up it contains and is a subcategory of the flow-content, but there are also other subgroups as headers and sections....
Even if it's not very descriptive the documentation gives the exact list of elements which belong to the respective categories.
PHRASING CONTENT
Phrasing content is made up of text content, embedded content elements and phrasing elements, possibly interspersed with HTML comments and/or white space.
These HTML elements are allowed to be used in HTML code where either flow content is expected or phrasing content is expected, with some possible restrictions in specific cases.
Flow Content
Flow content in HTML is made up of flow elements, phrasing content and text content, possibly interspersed with HTML comments and/or white space.
Flow content Elements restricted for use only where flow content is allowed
These HTML elements can be used only in HTML code where flow content is allowed, with some additional restrictions in specific cases. In addition, text and HTML elements categorized as phrasing content can also be used where flow content is expected.
I have read many articles on the display:block property.What it does it make your element behave like paragraph tag or block element to be exact.My worry is that then why don't we just use paragraph tag there since it already is a block level element and we can also use id(once) and class(many times) attributes on it.Similarly on observing many CSS structure i found that on first or second line following is done more often than not.
header,section,nav,figure,..etc{
display:block;
}
Same question why don't just use paragraph tag and useful nomenclature for figures,nav,footer and header inside .Following is my solution
<p class="mainNavigation"> </p>
<p class="MainNavfigures"> </p>
<p class="footer"> </p>
<p class="bodyContent"> </p>
So the whole argument is this "Why to invent more tags when P was already there for us?"
Semantics:
mainNavigation is not a paragraph
MainNavfigures is not a paragraph
footer is not a paragraph
bodyContent is likely one or more paragraphs, with other things too.
...but you've told us in your code that each of these items is a paragraph.
Machines (search engines!) reading code won't know what your class-names mean and will not know to handle your content accordingly.
Humans reading your code will be understandably confused as well.
Yes, feel free to use a tag that already behaves as close as possible to what you want, unless there is a reason to use a different tag. A div tag is often more natural to use as a general-purpose block element rather than p, as the paragraph has margin by default.
Sometimes, there isn't a tag available with both the style and functionality that you need. For example, if you want a link that is a block tag, that doesn't exist. You use an a tag and style it with display:block.
For SEO reasons, you should use some specific elements for certain things. The web crawlers simply expect to find some things in certain elements. There should for example be a h1 tag on the page that contains a headline describing the contents. The h1 element is a block element with large and bold text, and a lot of margin, so often you want to style it to fit into the layout.
can we have content text directly in <div>text content</div> or it should be like <div><p>text content</p></div>? according to web standards.
You can have character data directly inside a div element. If (and only if) that character data is a paragraph, then it should also be marked up as a paragraph (as per your second example). If you only have one paragraph of content inside the div, then you should usually avoid having the div element as it serves no purpose.
You can have it directly in a div. The div is often used to group block-elements to format them with styles, but normal, unmarkedup text in a div is just fine.
There's a two questions implied here, can and should. can is straight-forward, should is not.
So, Can you nest content text directly into a div?
The current active spec states The div element has no special meaning **at all**. So, yes there is no reason why you cannot nest text directly into a div, but that text has no special meaning.
Should you nest content text directly into a div?
No, not really. There is one fundamental problem with putting text into an element that has no special meaning. What does that text mean? Is it a title or a simple block of text, etc. For most people this isn't an issue. If you're using a screen reader it is. The screen reader needs more information to understand the context of the text. This is why the HTML spec on div now includes the following text:
Note Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of
more appropriate elements instead of the div element leads to better
accessibility for readers and easier maintainability for authors.
so ideally all your text should be nested into a HTML element that represents it's context, e.g. <p>, <h1>, etc.
Yes, you can directly add content text into a div tag, although using p tags would be preferable in most circumstances.
Screen readers seem to handle <div>phrasing content</div> and <div><p>phrasing content</p></div>
differently in some circumstances.
It seems that the rules for elements that can contain flow content and elements that can contain phrasing content are different.
The standards are not so well defined. I would choose your second example, because it is more structurally sound, and therefore more semantic.
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.