.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

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

JIRA Workflow for Web Development Example: Simple and Effective 17th 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.

  • View Comments (1) ...
    Navigation

    Privacy Preference Center