.NET Daily

Which HTML tags can you place inside an a, p or h1 tag?

Introduction

Darius

Darius

Darius Dumitrescu is a creative Senior CMS Consultant with in depth .NET knowledge, focused on Web Development and Architecture Design.


LATEST POSTS

My View on the Life cycle of a Fixed Cost Web Project 01st July, 2018

How to Deliver Accurate Project Status Reports 21st April, 2018

HTML

Which HTML tags can you place inside an a, p or h1 tag?

Posted on .

I often see lots of HTML validation mistakes in the code of some developers that don’t know what exactly you can place inside a paragraph tag inside an anchor tag and every time I validate their markup I get a red page from W3C validator.

So I decided to make a list with the HTML tags allowed in the following more sensible tags: <p>, <a> and headings(<h1>, <h2>, etc.).

For HTML 4.01

Tags that can be placed inside a <p> tag

The paragraph tag is a block element so the following tags can be placed inside it:

Common tags: em, strong, br, pre, a, span, img, input, label, select.

Less common tags: dfn, code, samp, kbd, var, cite, abbr, acronym, sub, sup, small, mark.

DO NOT place the following tags in <p>: div, p, h1, h2, …, h6, ul, table.

Tags that can be placed inside a <a> tag

The hyperlink tag is an inline element so the following tags can be placed inside it:

Common tags: em, strong, br, pre, a, span, img, label.

Less common tags: dfn, code, samp, kbd, var, cite, abbr, acronym, sub, sup, small, mark.

DO NOT place the following tags in <a>: div, p, h1, h2, …, h6, ul, table.

Tags that can be placed inside a <h1> tag

The heading tag is a block element so you can place the same tags as you can place inside <p> tag:

Common tags: em, strong, br, pre, a, span, img, input, label.

Less common tags: dfn, code, samp, kbd, var, cite, abbr, acronym, sub, sup, small, mark.

DO NOT place the following tags in the heading tag: div, p, other headings, ul, table.

I did not mention tags like <select> because even they probably are valid when are nested inside a heading, it’s not a very good placement for them, especially considering things like Search Engine Optimization.

For HTML 5

The biggest novelty on HTML 5 is that it is allowed to add block-level elements inside the paragraph and anchor tags. This is kinda of a big deal!

Reference links:
http://w3c.github.io/html-reference/a.html
http://w3c.github.io/html-reference/p.html

Darius

Darius

Darius Dumitrescu is a creative Senior CMS Consultant with in depth .NET knowledge, focused on Web Development and Architecture Design.

Comments
  • user

    AUTHOR Clint Goodman

    Posted on 1:03 am February 17, 2016.
    Reply

    I’m not sure that you can put an `a` tag inside of an `a` tag. Is that legal? My understanding is that doing so is illegal. Can you please provide a reference that supports putting an `a` tag in an `a` tag? Thanks!

    Loved the rest of the article.

  • This site uses Akismet to reduce spam. Learn how your comment data is processed.

    View Comments (1) ...
    Navigation