What Elements Can Be Contained Within a <A> Tag

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 a map 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



    Leave a reply



    Submit