What elements can be contained within a a tag?
Inline elements ( a, span, strong, em
among others ) can contain other inline elements and text nodes. An anchor can contain a span, which can contain a text node.
Generally, block-level elements may
contain inline elements and other
block-level elements. Generally,
inline elements may contain only data
and other inline elements. Inherent in
this structural distinction is the
idea that block elements create
"larger" structures than inline
elements.
From http://www.w3.org/TR/html401/struct/global.html
As noted in other answers, you can't nest an a
in an a
.
What elements can a span tag contain in HTML5?
Only inline elements may be contained within inline elements. span
is an inline element. So, tags like a
, img
, sup
, etc. can go within a span, but block level elements like div
and p
cannot.
UPDATE
In reality, different elements which default to inline display behave differently. Some "inline" elements may allow block elements (a
for example), while others don't (like span
).
If you're interested in what an HTML tag may contain, your most official source is the WHATWG page on HTML elements. You can check any HTML element and see what content is permitted (see 'Content Model' for each element):
http://www.whatwg.org/specs/web-apps/current-work/multipage/#auto-toc-4
Here's the definition of the span tag, which indicates that only 'phrasing' content is allowed.
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-span-element
What are the allowed tags inside a li ?
TL;DR: an <li>
can contain any element that is valid in <body>
.
In the HTML 4.01 spec for lists you’ll find the relevant extract of the DTD:
<!ELEMENT LI - O (%flow;)* -- list item -->
This specifies that an <li>
may contain flow content, which is the collection of all block and inline elements.
The HTML5 spec for an <li>
is the same in that it also allows any flow content.
How to do styling on HTML tags contained within the a hyperlink tag
Well, in the first example, it looks like you didn't close the div tag. Try:
<a href="https://www.worldwide_news.com">
<div style="border:1px; border-style:solid;">
<p>Here is a link to my other blog</p>
<img src="image.jpg">
<p>Once you get there do leave a comment!</p>
</div>
</a>
As for your second, I made it work, technically, but that was just by wrapping it in <a></a>
tags. I don't think 'p href's are a thing.
Is there a list of HTML5 elements that can be nested inside other elements?
https://html.spec.whatwg.org/multipage/indices.html#elements-3
https://html.spec.whatwg.org/multipage/indices.html#element-content-categories
Since these helpful sections are marked as 'non-normative', technically you'd have to go to each element listing (a's, for example: https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element) and check the Content model definition, which isn't always 100% straightforward, but could still probably be consumed fairly usefully programmatically.
There are pages here and there on the internet with such lists if you can't be bothered; you would just have to trust that they compiled their lists properly against the spec.
The W3C has given control of HTML5 over to the WHATWG.
https://www.w3.org/html/
http://w3.org/tr/html5
Historically (HTML5 has changed the rules on this some), inline elements can be children of most things and block elements cannot be children of inline elements, so just having an idea what is inline and what is block (block elements take up available width by default, typically forcing preceding & following elements linearly above & below), will go a long way.
List of HTML5 elements that can be nested inside P element?
The HTML5 spec tells us that the <p>
element's content model is phrasing content. Phrasing content is defined by the spec:
3.2.5.1.5 Phrasing content
Phrasing content is the text of the document, as well as elements that
mark up that text at the intra-paragraph level. Runs of phrasing
content form paragraphs.a
(if it contains only phrasing content)abbr
area
(if it is a descendant of amap
element)audio
b
bdi
bdo
br
button
canvas
cite
code
command
datalist
del
(if it contains only phrasing content)dfn
em
embed
i
iframe
img
input
ins
(if it contains only phrasing content)kbd
keygen
label
map
(if it contains only phrasing content)mark
math
meter
noscript
object
output
progress
q
ruby
s
samp
script
select
small
span
strong
sub
sup
svg
textarea
time
u
var
video
wbr
text
What HTML elements are meant to contain text?
Some of these are defined as block-type and some as text-level. But they were meant to contain texts (or at least are used as text-wrappers.)
<tt>
<i>
<b>
<big>
<small>
<em>
<strong>
<dfn>
<code>
<samp>
<kbd>
<var>
<cite>
<abbr>
<acronym>
<sub>
<sup>
<span>
<bdo>
<address>
<div>
<a>
<object>
<p>
<h1>
,<h2>
,<h3>
,<h4>
,<h5>
,<h6>
<pre>
<q>
<ins>
<del>
<dt>
<dd>
<li>
<label>
<option>
<textarea>
<fieldset>
<legend>
<button>
<caption>
<td>
<th>
<title>
<script>
<style>
<blockquote>
Related Topics
Text-Overflow Is Not Working When Using Display:Flex
Full Width Backgrounds on Outlook '07/'10/'13
Text Overflow Ellipsis on Two Lines
Fixed Header, Footer With Scrollable Content
Two Inline-Block, Width 50% Elements Wrap to Second Line
Example of Multipart/Form-Data
Maintain Image Aspect Ratio When Changing Height
Is the 'Type' Attribute Necessary For ≪Script≫ Tags
How to Close ≪Img≫ Tag Properly
Why Top Margin of HTML Element Is Ignored After Floated Element
What Is the Functionality of !Doctype
Responsive CSS Trapezoid Shape
Weird Effect When Applying Transparent Border Over an Element with a Gradient Background