.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

ASP.NET Core. Issues with Creating Cookies 02nd February, 2019

My View on the Life cycle of a Fixed Cost Web Project 01st July, 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