All geek questions in one place

Question regarding img tag in html

Should the <img> tag be wrapped in a <p> or can it just be used without the <p> tag?

+4
source share
4 answers

I cannot comment or vote, but Younes's answer is wrong. You cannot write an image tag, for example:

 <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 specifications available on the W3C website. Here is the link for the img tag for HTML 4.01:

http://www.w3.org/TR/html4/struct/objects.html#h-13.2

And here is a link showing the differences between HTML 4.01 and XHTML 1.0 (where it comes from:

http://www.w3.org/TR/xhtml1/#diffs

In general, img can be wrapped with most container tags (some exceptions, such as pre, exist), but this is not required. If you are trying to make your own HTML semantics, then most often it doesn't make sense to have your img inside the paragraph tag, but it might make sense to put it in a div.

+3
source

<img> is an inline element and as such needs to be placed inside a block level element for validation.

Something like <p> , <div> , <h1> or <li> would be enough.

Inline elements cannot be placed directly inside a body element; they must be fully nested in block level elements.

+7
source

According to the HTML 4.01 specification, an IMG tag can appear inside any element that allows% inline elements, which means that it cannot be directly inside the <body>, but it may well be inside the <div> instead of the <p> tag - tag.

EDIT: this means the img tag can be inside any block level tag (div, p, li, ...)

+4
source

If you want to make it act like a block, ever useful

 .somewhere img { display:block; }

it's good. (As noted above, it must be a descendant of a block level element, but it can be any level higher, obviously, so you don't have to do this all the time:

  <div><img></div>

If you have a link around the image, you can make the same screen: block, as described above, into element a .

  a.somewhere, a.somewhere img { display:block; }
+1
source

Source: https://habr.com/ru/post/1299332/

More articles:


All Articles