I wanted to know if tables are allowed inside anchors like this:
<a>
<table>
<tr>
<td>Hello!</td>
</tr>
</table>
</a>
Because some people on the internet say it is allowed while others say it is not.
I looked under §4.5.1 The a element and it says the content model is "transparent". Then I looked into 3.2.5.3 Transparent content models to see what that means. And it says:
[...] the elements required in the part of the content model that is "transparent" are the same elements as required in the part of the content model of the parent [...]
They use the word required but I think it must be the word allowed.
Inside the 'a' element no elements are required at all. Instead the question is which elements are allowed. Or am I wrong?
Note that this question is not about whether tables are allowed inside anchors but instead if there is a mistake in section 3.2.5.3 of the HTML specification.
They use the word required but I think it must be the word allowed.
well, you just answered yourself with the next sentence:
Inside the 'a' element no elements are required at all.
and no
Instead the question is which elements are allowed.
that's not the question of the content model of the spec.
the spec says that an a-tag can't contain other interactive elements, which would then make those elements not-allowed.
also to the tables inside links question: as long as the table does not contain any interactive elements (buttons, inputs, other links etc.) you can put a table inside your a-tag (if that's a good idea is another question), the spec itself even gives that exact example:
The a element can be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g., buttons or other links).
so no, in my opinion there is no "mistake" there.
Related
I currently have an id attribute on each section heading in a HTML document, so that URLs can be generated with a hash fragment that links directly to that section in the document. For example:
<h2 id="section3.4">Section 3.4 - Foo</h2>
This would, of course, be linked as page.html#section3.4.
I would like to offer an alternative formatting for that fragment, e.g. page.html#s3.4. The exact formatting is arbitrary and not important here.
Obviously one cannot simply apply multiple ID tags to a single HTML element in order to achieve this. The solution, it seems, is to add a secondary tag to the page at the same position as the heading, e.g.:
<h2 id="section3.4">Section 3.4 - Foo</h2><xyz id="s3.4"></xyz>
Is there a standard or preferred tag type that is used for this purpose? Searching around, I was surprised to find no "best practice" answer for this.
Technically the tag type is arbitrary, since any element with an id attribute should work, but picking canvas or script, for example, is clearly silly. I've seen a suggested, but I'm not sure that is semantically correct, since a is supposed to create an anchor to a location, not be a location.
One thought I had was to have the enclosing section tag's ID be the target, but that doesn't enable an arbitrary number of alternate fragment names, and technically it isn't linking to the same location since the bounding box is subject to CSS.
I feel like the ideal element would be one that is guaranteed to have no visual presence on the DOM, hold the same vertical position as the adjacent element, have no side effects, and which makes semantic sense as a positional marker, all while also not having any impact on accessibility (e.g. screenreaders). However, I cannot think of such an element. Is there a standard that I missed? If not, which tag might be the best option?
In inline contexts, use a <span> element wrapping the text inside the appropriate heading.
<h2 id="section3.4"><span id="s3.4">Section 3.4 - Foo</span></h2>
In block contexts, use a <div>.
Both are semantically neutral. And this approach ensures the heading text receives appropriate focus regardless of which fragment identifier is used.
Sometime ago I read somewhere that one single line of text is considered a paragraph, therefore valid to be placed into a <p> element that "represents a paragraph/block of text".
Browsing around this is confirmed by some examples that I've just found:
http://www.w3.org/wiki/HTML/Elements/p#Example_A
http://reference.sitepoint.com/html/p
In my particular case I am making a <form> that includes some validation messages for each field and that are only meaningful to the user once they interact with the page.
For positioning purposes (<p> is a block element) would be easier to use <p> elements for these messages, but since <span> is a more generic and meaningless element I could use it too with "display:block" but I am not sure if I should do this instead.
Could you tell me what is the element to be used in this case?.
Thanks!
The HTML5 spec defines that the p element "represents a paragraph", and a paragraph is defined as:
A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.
No-one can generally answer if you should use p or not, this depends on each particular case, and also your understanding of the content.
Now, if you think p may not be appropriate, why do you want to go with span when you are looking for a block element? Just use div instead.
SPAN is kind of Styling tag only. it is being used when you are going to add a class by yourself and you don't need any un-wanted (Default) styles.
And P is which normally comes with default styling from a client browser and if you are using some pre-written styles (bootstrap etc).
I would like to understand what is wrong with this:
<body>
<h2>
<table>
<tr>
<td> Text</td>
</tr>
</table>
</h2>
</body>
Validator complains:
document type does not allow element "table" here; missing one of "object", "ins", "del", "map", "button" start-tag
Further explanation says:
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>",or "<font>").
Both h2 and table are block level so the last comment does not seem to apply. I want a table with h2 sized elements that is all... What is the right way to tell table to use the same size that h2 uses?
Thanks!
CSS. Tables are simply not allowed inside headings, since it makes no semantic sense. Have you ever seen a book chapter whose title was a table? Don't use HTML semantic tags for appearance; style them yourself.
It doesn't matter whether table is block or inline by CSS, only what the HTML DTD says they are. Look here: only "flow" elements are allowed into td. Follow the link to see the definition of "flow": you'll see it's "inline" or "block". You can continue to follow those links down, until you find that, e.g. sub is fine, as is span... but you won't find table.
Also - tables are not even display: block - they have their own layout value, display: table. Not that it matters.
CSS is the appropriate way to change the size of HTML elements. HTML isn’t designed to be used to create visual effects.
There’s no way in CSS to specifically tell a <table> to be whatever size <h2>s are.
However, you can tell tables and h2s to both be one specific size, e.g.:
h2,
table {
font-size: 2em;
}
You could also use Chrome’s Web Inspector (or similar tools in other browsers) to check what the default styles are, and apply the relevant ones to your table. These default styles might vary between browsers though.
As for why you can’t have a table inside an <h2> tag, I’m not sure off the top of my head if the HTML spec offers rationales for its nesting rules, but <h2>s are meant to mark up headings, i.e. relatively short pieces of text that describe a section of a document.
It’s difficult to imagine how a table would be an appropriate heading.
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.