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>
Related
I need value "1" to be displayed adjacent to "Id" field but its displaying in a new line.The tag is supposed to be inline not sure why its being moved to new line.
jsfiddle
HTML
<b>Id : <p id="productid">1</p></b>
A <p> element is a paragraph, which by default is a block element.
In this case, you can't use <p> because:
It is not allowed inside <b> elements (because <p> can only be used where flow content is expected, but the content model of <b> is phrasing content). Always remember to validate your code.
Semantically, it's clear that it isn't a paragraph.
I suggest using
<b>Id: <span id="productid">1</span></b>
Demo
#productid{
display:inline-block;
}
p is a block level element by default. You can set it to display inline-block to make it do as you describe using basic css.
I'm not sure if you are unable to access css, so in case you cannot, see oriol's answer. No reason not to just make it a span.
Bit of a side note, it is a little odd to put a p tag inside a b tag. Technically you CAN do this, but it looks like using a span tag is the more proper way to handle this.
I was placing some icon fonts inside a link and then i asked myself:
is semantically correct to use a span tag outside a p one?
In example
<a href="http://fb.com">
<span class="my-icon-font">link</span>
</a>
From a semantic perspective, a span really doesn't mean much. It's just a marker for some inline content.
From a technical perspective, a span can go anywhere that you have an inline display context, which basically means anywhere at all (since HTML allows you to have inline elements in the same context as block elements).
It certainly isn't limited to being inside a p tag. It can go pretty much anywhere.
The short answer is NO
You can read these two section
span element
Contexts in which this element can be used:
Where phrasing content is expected.
p element
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Phrasing content.
A span just allows phrasing content element inside it while a p is an flow content element. However, a p can contains a span.
Yes; there is nothing wrong with that.
However, you might as well move the class to the <a>.
Sure, there's nothing wrong with that. As long as you don't do this:
<a href="http://fb.com">
<span class="my-icon-font">link
</a></span>
And, since your tag covers the whole same text as your does, it is better to add the class to the tag:
<a href="http://fb.com" class="my-icon-font">
link
</a>
Would make sense to use where, for example, you might want to emphasize the text of more than one paragraph in sequence. Otherwise, I would just use a class inside my tag to emphasize the text.
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).
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.
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;
}