When writing about algorithms, it is often very convenient to write some (pseudo)code inside a paragraph, or even in the middle of a sentence. To visually support the structure of a more complex sentence, lists come handy too.
Obviously, one sentence must not be split across different paragraphs. But in our case it has to be due to HTML nesting rules.
Paragraph is the p element, which cannot contain block-level elements. Unfortunately for our case, pre and lists are block-level.
If I do not obey the spec and include pre or ol/ul/dl in a p, the p is automatically closed right before the element’s start tag by any parser I know. (This is due to the SGML OMITTAG feature settings on p.) Maybe this and backward compatibility are the reason behind the design decision of disallowing pre and lists inside p.
Is there any way, how to include lists and longer code snippets into paragraphs?
I could re-formulate my sentences and paragraphs not to need snippets and lists, but it needs much thinking and attention and could make my text harder to read and understand. This is not a solution for me.
I could use code with whitespace: pre and display: block for longer code snippets and code with whitespace: pre-wrap for the shorter ones. Is this semantically correct?
I could think of lists inside sentences as mere visual sugar with no semantics at all. Then I would use spans with display: list-item to make them look like lists. Would that be correct from the semantical point of view? Is the sacrifice of semantical structure necessary?
This question applies to both HTML and XHTML as the rules for nesting elements are the same. By HTML i mean HTML 4.01 Strict, by XHTML i mean XHTML 1.0 Strict. Is this issue somehow addressed in HTML 5?
To be explicit, I want a standards-compliant, both syntactically and semantically correct solution, not a non-standard hack of any kind. Specifically, turning p into div is not a solution for me.
Related questions
ul element can never be a child of p element
<code> vs <pre> vs <samp> for inline and block code snippets
<pre> tag making browsers close paragraphs
Can I have a <pre> Tag inside a <p> tag in Tumblr?
Should ol/ul be inside <p> or outside?
unordered list in a paragraph element
Nest lists in paragraphs in html
See also
CSS Design: Taming Lists # A List Apart
As far as HTML is concerned, all that a single <p> element represents is a block of phrasing content that happens to flow like a paragraph of text. Even though it's called a paragraph, it doesn't have to strictly represent a paragraph of text in writing.
You are not compromising semantics in any way by breaking a paragraph, even mid-sentence, into two <p> elements in order to introduce a list or a block-level code snippet. It is completely acceptable.
As a matter of fact, HTML5 agrees (whereas HTML 4 woefully has absolutely nothing to say beyond "the P element represents a paragraph"):
List elements (in particular, ol and ul elements) cannot be children of p elements. When a sentence contains a bulleted list, therefore, one might wonder how it should be marked up.
For instance, this fantastic sentence has bullets relating to
wizards,
faster-than-light travel, and
telepathy,
and is further discussed below.
The solution is to realise that a paragraph, in HTML terms, is not a logical concept, but a structural one. In the fantastic example above, there are actually five paragraphs as defined by this specification: one before the list, one for each bullet, and one after the list.
The markup for the above example could therefore be:
<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
<li>wizards,
<li>faster-than-light travel, and
<li>telepathy,
</ul>
<p>and is further discussed below.</p>
If you view the source of the document, you can see that even the quoted example consists of a <p> element containing the text "The markup for the above example could therefore be:", immediately followed by a <pre> element containing the example markup.
If you are still concerned, HTML5 offers an alternative, but that basically involves using a <div> instead of separate <p> elements, which as you've stated is not a solution for you.
Lastly, it is safe to assume that everything I've mentioned applies to HTML 4 and XHTML 1 as well. For what it's worth, this concept was explored in XHTML 2, which would have allowed <p> elements to contain any other type of content.
Related
I realized that I was using blockquote throughout my HTML to emphasize paragraphs that have to be learned by my students – which is obviously wrong, since the blockquote is meant to specify a section that is quoted from another source.
In my case (mathematics), the paragraph(s) define(s) or describe(s) a word and should stand out visually.
After some research, I found the em tag which "marks text that has stress emphasis", however, it seems to be designed for single words or a group of words, but not for paragraphs.
So the question is: What is the correct HTML tag to emphasize a complete sentence or a section (several paragraphs)?
Semantically, if you're defining something - and if fits with the structure of your document - you should look at <dl>: definition lists.
MDN has a page which explaiins what you need to know: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
Within a <dl>, you have <dt> (definition term) and <dd>(definition description). <dd> is block-level, so can contain block-level elements such as paragraphs and lists, but <dt> is inline and should only contain other inline elements. If you're really keeping close to the rules :)
Example:
<dl>
<dt>Stack Overflow</dt>
<dd>
A place that holds many answers, some of which are <em>mostly</em> correct.
</dd>
</dl>
Most browsers will apply some indenting to definition lists by default, but that's about all you'll get out of the box in terms of styling. You'll need to apply your own styling rules to make them stand out more, but the variety of tags you get as part of a definition list should help you with that.
There's some discussion around the accessibility of definition lists for screen reader users, with different browsers and readers producing different results (see https://webaim.org/discussion/mail_thread?thread=7089). This isn't optimal, but it seems that using definition lists isn't any worse than using unordered lists (<ul>); not an ideal solution (because one doesn't really exist), but not the worst option.
dfn element
If the content is important because it’s a definition (and all definitions are important in your document), you can use the dfn element and style the parent element accordingly.
<p class="definition">definition of the <dfn>term</dfn></p>
The nearest ancestor p (or li, or section, or term-description group in a dl) has to define the term.
So if you have multiple paragraphs (like in the next example), the paragraphs without the dfn descendant are not semantically connected to the term/definition.
<div class="definition">
<p>paragraph about the term</p> <!-- semantically not part of the definition -->
<p>definition of the <dfn>term</dfn></p>
<p>another paragraph about the term</p> <!-- semantically not part of the definition -->
</div>
If the definition consists of multiple paragraphs, you can either use section or dl to convey that all these paragraphs contain the definition, but both alternatives aren’t always suitable.
strong element
If the content is important for other reasons (e.g., not every definition is important, or things other than definitions can be important, too), you can use the strong element. It conveys
strong importance, seriousness, or urgency for its contents.
You can even convey the relative level of importance by using more strong elements:
<p>sentence with an <strong>important part</strong></p>
<p>sentence with a <strong><strong>very important part</strong></strong></p>
<p><strong>important sentence with an <strong>especially important part</strong></strong></p>
As the strong element can only contain phrasing content, you can’t mark multiple paragraphs with one strong element.
If the content is important for other reasons, but happens to contain a definition, dfn and strong should be combined, of course. And even if every definition is important, you may still use strong in addition, either to convey that definitions are important in this document, or to convey their relative importance.
There is a group of DOM elements intended to add emphasis to the HTML content:
strong
b
em
i
del
strike
However, while semmantically, this will indicate emphasis, no screen reader (JAWS, Window Eyes, etc) will indicate so.
I will use strong tag.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
The element is for content that is of "strong importance," including things of great seriousness or urgency (such as warnings). This could be a sentence that is of great importance to the whole page, or you could merely try to point out that some words are of greater importance compared to nearby content.
I am looking for a proper html5 tag which I can use for marking summary of a very lengthy article. The summary itself can span for a paragraph or two.
I know there is a <summary> tag in html5 but this tag behaves in conjunction with <details> tag.
and secondly, I want to highlight a paragraph or two in the middle of a lengthly article. These highlighted section are important text that needs to be prominently displayed. Is there any html5 tag for this? or should I just use a class for highlighting? The point is, it's just not visual importance, but includes semantic importance.
No, there is no block-level element for importance, and no element whatsoever for a summary (the summary element inside details is not really for a summary at all but rather a title of a kind).
In traditional HTML up to and including HTML 4.01 (and XHTML 1.0), em and strong indicate emphasis, but their definitions are very vague. In practice, they are little else than pseudo-semantic counterparts of italic and bolding, i and b. HTML5 makes the topic even more confusing by distinguishing between “stress emphasis” (which “changes the meaning of the sentence”) and “strong importance, seriousness, or urgency” without really defining the difference. In any case, em and strong are text-level (inline) markup, intended for individual words or short phrases rather than entire sentences, still less paragraphs or sequences of paragraphs.
The closest you can get is <p><strong>...</strong></p>, but it is questionable whether this is a good idea. It’s surely not the way strong is meant to be used, but it’s formally valid.
Thus, the practical approach is to use div elements (or maybe p elements) with a class attribute and suitable styling.
So, I have a checkbox followed by some text.
<label>
<input type="checkbox" name="remember_me" id="remember_me">
Remember me on this computer
</label>
It works fine. However, when I put the text in a paragraph tag, it puts the text on the next line. This made me wonder, other than formatting purposes and what not, is it highly inadvisable to use text without any tags? Why or why not? Is the usage of tagless text simply against etiquette?
By “tagless text”, you seem to refer to text content and text-level markup (like label and input) that is not wrapped in a block-level container like p or div. Such text has always been valid in HTML, though HTML 2, HTML 4, and XHTML 1.0 all have a “strict” version where such text (which might be called “loose text”) is not allowed e.g. directly inside the body element or directly inside a form element. In HTML 2.0, the “strict” version was characterized as “more structurally rigid”. HTML 4 is silent about the reasons for the rule, and in HTML 4, the “strict” version of the language is primarily a “purified” version that mostly lacks presentational markup (markup used only for achieving specific visual appearance, like the font element)—this really has nothing to do with disallowing “loose text”, but the two things were bundled together.
The rule that disallows “loose that” does not have any tangible benefits, and it has probably caused more confusion (when people try to validate HTML against a “strict” specification) than any good. In HTML5, which is work in progress but widely regarded as becoming the de facto standard for HTML, has no such rule. It has a complicated “paragraph” concept that does not coincide with the p element concept or with the traditional typographic paragraph concept. Anyway, it explicitly says that text need not be wrapped in a p element even if it is structurally a “paragraph” (in HTML5 sense). It also describes that a p element can be used to wrap a part of a form, like an input field and its label.
So it’s rather confusing. The bottom line is that a p element is a block element that may contain text and text-level markup only (and browsers actually enforce this) and that has default top and bottom margin, corresponding to about one empty line or a little less. So in addition to causing its content to start on a new line (and the subsequent content to start on a fresh line), p also causes some vertical spacing. In contrast, the div element behaves similarly but without the margins (vertical spacing).
The practical conclusion is that the p element can be used to group text if the vertical margins are desired. If they are not desired but line breaks are, div is suitable. And if you don’t want even line breaks (though a form field and its label usually work best when they appear on a line of their own), don’t use any particular markup.
Novadays, the purpose of the tags is to define semantic meaning and have less to do with the presentation (how the text looks to the user, new lines, etc). This is rather the purpose of CSS, the cascading style sheets.
By using the <p> tag, you are telling web crawlers and other users that the data is indeed, the paragraph, a logically complete piece of text.
A paragraph (from the Greek paragraphos, "to write beside" or "written
beside") is a self-contained unit of a discourse in writing dealing
with a particular point or idea. A paragraph consists of one or more
sentences.[1][2] Though not required by the syntax of any language,
paragraphs are usually an expected part of formal writing, used to
organize longer prose.
Source: Wikipedia
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.
I see the <p> tag used a lot in the code of others but have never used it in my own work.
I'm wondering what advantage this gives over using a <div> tag?
Are there any benefits I could get
from incorporating the <p> tag
into my pages?
Is there any disadvantage in only
using <div> tags without <p>?
DIV indicates a separate section on a page, which is not semantically connected to the others. With P tags you indicate that this piece of text is broken into paragraphs but it still stays a single entity.
ADDED: With "semantics" people usually refer to the possibility to extract information from HTML as to what various elements of a page represent and how they are related to each other, as opposed to treating the whole HTML as just a markup to be rendered. For example, when you do menus it is recommended that you use ULs (unordered list) for that purpose, because it will be possible to learn from the markup that all LIs (list items) contained within a particular list probably mean choice options of the same level. I know it is helpful for screen readers for impaired people that you try to make your markup as semantic-rich as possible.
If you're not concerned with this, then it is virtually no difference for the rendered result whether you use DIVs or Ps. You can style both with CSS to achieve the same look and feel.
Semantic HTML is still not "the absolute good" to be strived for. For many people semantics does not add any value as they wish just that their pages are rendered correctly. That's why the ever-lasting discussion on whether to use tables for markup (and add semantics where it does not belong) or stick to CSS is not going to end any soon.
p means 'paragraph', div means 'division'. That's as complicated as it gets. It's a way of telling search-engines, scrapers, tools, etc that this is a paragraph of text.
div is undesirable when you're actually marking up a 'paragraph' of text.
Both tags have a different purpose.
p indicates a paragraph, usually for
organising content (text and
images,mostly)
div on the other hand is a
rectangular space on the canvas,
usually for layout purposes.
Example: You would put your navigation panel in a div, making it easy to move it from the left to the right of the page, or switching to a 3 column layout. The different sections in your navigation (first the general site navigation, next specific hotlinks to the most recent blog post or whatever) could be seperated by putting them in defferent paragraphs.
(I know, bad example, because the navigation is better represented by unordered lists, but what the hey).
In direct answer to your question, they give you the advantage of differentiating between organising your layout and organising your content, in a way that becomes clear in the HTML source.
If you are tagging content so you can lay it out with CSS, you probably want <div>; <p> should be used to indicate a paragraph of text and that's it.
Beyond just the semantics of it (which are important), you will also want to consider validation problems. According to the HTML4 spec, you are not allowed to nest other block-level elements (<div>, <ul>, other <p>, etc) inside a <p> without invalidating your HTML.
I've seen a number of instances where parsers will choose to prematurely close the <p> to allow the other nested block element to begin.
Are there any benefits I could get
from incorporating the tag into my
pages?
Yes, provided that you use it correctly -- because the use of semantic HTML is always a benefit.
There are a range of reasons why this is so, but the primary one for people who need a quick explanation is SEO. Search engines will understand your page better if you use semantic HTML.
p tags are for paragraphs. p tags often contain additional CSS styling regarding the textual content that goes into them, and this styling can be defined in various places in the css documentation. for example, a p usually has a bit of extra space below it. if you try laying something out with p tags, you'll end up with uneven padding.
It is better to use divs if you want to have more control over the content in your page from a programmatic perspective. sticking to divs for all layout concerns will also allow you to use p tags exclusively for paragraphs.