Should the <img> tag be wrapped in a <p> tag or can it be just used without a <p> tag?
<img> is an inline element and as such needs to be placed inside a block level element to validate.
Something like a <p>, <div>, <h1>, or a <li> would suffice.
Inline elements cannot be placed directly inside the body element; they must be wholly nested within block-level elements.
According to the HTML 4.01 spec may the IMG tag appear inside any element which allow %inline elements, that means it cannot be directly inside the <body> tag, but it may very well be inside an <div> tag instead of the <p>-tag.
EDIT:
this means that the img tag may be inside any block level tag (div, p, li, ...)
I can't comment or vote yet, but the answer by Younes is wrong. You cannot write an image tag like this:
<img src=""> </img>
Also, the best place to look for what is allowed and not allowed for HTML tags, the best source is the actual specs, available on the W3C website. Here's the link for the img tag for HTML 4.01:
http://www.w3.org/TR/html4/struct/objects.html#h-13.2
And here's the link showing the differences between HTML 4.01 and XHTML 1.0 (which is where the comes from:
http://www.w3.org/TR/xhtml1/#diffs
In general, an img can be wrapped by most container tags (some exceptions, like pre, do exist), but it is not required. If you are trying to make your HTML semantic, then most often, it won't make sense to have your img inside a paragraph tag, but it might make sense to put it into a div.
If you want to make it act like a block the ever useful
.somewhere img
{
display:block;
}
is good. (As noted above it needs to be a descendent of a block level element but that can be any level above obviously, so you don't need to do this all the time:
<div><img></div>
If you have a link around the image, you can do the same display:block as above to the a element.
a.somewhere, a.somewhere img
{
display:block;
}
Related
Sometimes I want to put a wrapper element around several other HTML elements with the sole purpose of setting up a convenient CSS selector to refer to all the contained elements:
<TAG id="just-a-handy-wrapper">
<abc ...>
...
</abc>
...
<pqr ...>
...
</pqr>
</TAG>
...and in the CSS:
#just-a-handy wrapper * {
...
}
I find this easier to manage and maintain than the alternative of assigning a common class to all the items captured by the #just-a-handy wrapper * selector above.
In this example, I've used fictitious tags <abc>, ..., <pqr>, etc., for the contained elements to stress the fact that I'm looking for a solution that works irrespective of the nature of the specific tags among the contents.
I've also used the fictitious tag TAG as a placeholder for the desired "wrapper tag", because my question is precisely about the best HTML tag to use for this purpose. By "best" I mean most "universal" in the types of elements it can contain in valid HTML5, and "most layout-neutral".
IOW, the ideal HTML tag would the one where the page including the code above would always be rendered exactly the same as one where the <tag ...> and </tag> lines were removed, or commented out:
<!-- <tag id="just-a-handy-wrapper"> -->
<div ...>
...
</div>
...
<div ...>
...
</div>
<!-- </tag> -->
A div, for example, is not "layout-neutral" (the browser will generally have strong ideas about how to layout a div), therefore it would not do to set tag equal to div. Here's a simple example of this:
original
with <div> wrapper around two of the three blue
rectangles
Yes, there is a CSS for that supported by major browsers
display: contents
E.g.
<section class="container"><div>Parent is virtually not rendered</div></section>
.container {
display: contents;
}
Sorry, I fear there is no such tag.
Imaginge a scenario where your <abc> or <pqr> tags are block-level tags, say <p> tags. In order to fullfill your requirement (the layout should be the same, if the tag is there or not), the container tag would need to be a blocklevel tag to be w3c conform, and it should not have any default stylings. As far as I know, a <div> is exaclty that.
Now imaginge a scenario where your<abc> or <pqr> are inline tags like <i> or <b>. In order to fullfill your requirement the container tag would need to be a inline tag itself, otherwise it would break the line.
Now the thing is it is not possible for a tag to be inline- and block-level at the same time.
And to answer your question about the most universal tags:
Use div as a container for block-level contents and use span as a container for inline contents. These tags are made for this purpose.
From the w3c Visual Formatting Model document:
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously
In your fiddles, the lack of layout neutrality is demonstrated by the text-align: center; rule on the .outer element no longer applying to the .inner elements, once there was a wrapper element layered between them.
I know that you'd prefer to speak in generalities to stress your point about a layout neutral tag, but since all HTML elements must have a formatting context, there will always be a side-effect to adding more tags to the markup. (In this case, your <div> tag is a block.)
Most often there's no visual issue, but insofar as your layout depends on formatting contexts, adding more elements will always run counter to you having a layout-neutral tag.
I would echo #Mario A's answer that where you need to wrap a tag with something layout neutral, wrap block tags with <div>s, and inline tags, with spans, so as not to introduce new formatting contexts that could disrupt your layout.
<span> is layout neutral but it depends on which types of elements go within in, for example it cannot contain block elements like <div>. Whether an element renders as a block depends on the element, but can be specifying, for example <div style="display:inline-block"> or <div style="display:table-cell"> display differently.
Since it's a CSS question, you can use IDs on your elements to add extra CSS rules, or apply several different classes to one ID. EG
<div id="mydiv" class="blacktext">helloo</div>
<div class="blacktext class2">hello</div> <!-- apply class blacktext and class2-->
CSS
.class2 { background-color: #FF0000;}
References
[1] the <span> tag
The tag is used to group inline-elements in a document.
The tag provides no visual change by itself.
The tag provides a way to add a hook to a part of a text or a part of a document.
[2] span vs div
Answer on stackoverflow about inline-block, block and inline with <span> and ` compared
There isn't such a tag, and there very well should be one.
Some tags like fieldset have behavior that affect child elements, but also do not require having any rendering. fieldset, when disabled, will disable all children input elements and is incredibly useful. However, you cannot wrap it around a <tr> specifically because it needs to be rendered.
I think the slot tag can be a good candidate for your requirements.
I use the h2 tag in this way. Is this usage of the H2 tag correct?
<h2>What is this?</h2>
<h2>How much does it cost?</h2>
<p class="title-faq"><h2>What is this?</h2></p>
It's not appropriate to use a tag that means "heading" within body text. The tags are logical tags; their use imparts meaning to the enclosed text -- namely, that the text is a section heading.
Although you could use the display: inline attribute, consider using a more appropriate tag, or even a tag.
Aside from that, and to answer your question, a h2 is a block level element. Making it an inline level element will cause it to behave similarly to how you describe the b tag acting
SEE HERE
The first two are ok, you put the H2 tag outside the A tag. However, the P tag denotes an paragraph of text, so you should put your header tag before this P tag.
No. When you have two headings of the same level in succession, what would the first one be a heading for?
Using a link inside a heading is technically allowed, but poor usability. Headings are normally targets for links, instead of being clickable.
Nesting h2 inside p is not even syntactically valid, or possible: a browser implies a closing </p> when a p element is open and an <h2> tag is encountered.
It’s also bad for maintainability and modifiability to use inline styles (like here in style attribuets).
A while back I was using the w3c validator for HTML5 and I was experimenting with a tag to replace the deprecated <tt> tag. I typed this little example:
<!DOCTYPE html>
<html>
<head><title>Valid tags inside other tags</title></head>
<body>
<p>Inside paragraph you cannot use <pre>preformated text</pre></p>
</body>
</html>
And got this error:
Line 6, Column 66: No p element in scope but a p end tag seen.
But when I changed the <pre> tag for the <code> tag, no error was raised.
I suppose this is because you cannot have preformated text inside a paragraph, but I had no luck searching for a regex or something that can point me to valid tags inside other tags.
Anyone can point me to such resource?
EDIT:
Turns out that I suck at reading documentation and I haven't look at Block-level elements. So, now the question is, How can I know which are valid inline elements and how to use block-level elements inside other block-level elements?
With HTML5 the old categories of block and inline have been extended and replaced by a new content model. The distinction between block and inline is now something which only really matters in CSS.
If you look at any particular element in the spec you'll see that it has a list of content categories it belongs to, the category in which the element can be used and the allowed content model of its descendants.
The p element has a content model of phrasing content, therefore it cannot contain a pre element because that can be used only where flow content is expected.
Is it syntactically and semantically correct to nest <div> or any other block level element inside the <p> tag. I am talking about HTML4 Transitional DTD.
If not then is it OK to instead use <span style="display: block"> instead?
Syntactically, a div inside a p is invalid in all standards of HTML. Moreover, when using a conforming HTML parser, it is impossible to place a <div> element inside a <p> in the DOM because the opening <div> tag will automatically close the <p> element.
Semantically, the correct choice depends on the content that you are marking up. You will need to show at least a sample full paragraph and possibly the content surrounding it to be sure of providing sufficient information for the correct semantic mark-up to be determined.
However, given that both <div> and <span> are semantics free, and that CSS in no way can ever change that, if you are certain that the contents of the <p> tag truly form a paragraph, and that <span style="display: block"> gets you the presentational effect that you are seeking, then that is valid HTML and would be a wholly appropriate solution.
No, a paragraph element may not contain other block elements.
Reference
A paragraph tag is intended for a block of text. If your elements is a part of the text (and not block elements), it would be semantically correct, otherwise not. A span tag with display:block is still a block element.
It is syntactically incorrect, as you can see for yourself using the W3C markup validator.
Semantically and practically I would say it's "ok" in the sense that a) it is very natural, b) all browsers handle it correctly (indeed this is one of the easiest problems they have to face daily).
If your HTML is produced by user input (e.g. an HTML editor widget using which visitors can leave comments) then I 'd say simply let it be, even if it is "incorrect".
Otherwise, you could change the markup a bit. Personally I would go with
<div class="para">
<div>Some content</div>
</div>
and give .para appropriate margins with CSS.
FWIW: I had a paragraph bracketed by paragraph tags. Inside that I put a div with display:inline on the div. But it still treated the div as a block element and closed the paragraph, creating a new line with a paragraph spacing.
It appears that any block element inside paragraph tags forces the paragraph to close even if the block element is being displayed as inline in its CSS.
Without any context, it seems fine to me, so long as your outer tag really is still a paragraph. If your div is something like your top nav bar, then not so much, but if it's a container for an image and caption that you're going to float off to the right, then there's no problem.
Do I need to wrap a tag (a href="#") in a <p> tag? I guess it can be wrapped in any block level element like div but I'm not sure.
It is an inline element and doesn't have to be wrapped anywhere.
The page body is already a block-level element, so anything you have inside it is respectively wrapped by it.
No. If you want to make the anchor element block level you use the css property display: block;
Google Mail
You can wrap an anchor in a p element if you want to do something like:
<p>My favorite search engine is Google, because it allows me to fine tune my search</p>