.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 of a JIRA Workflow for Web Development 17th April, 2018

How To Solve: SQL Server detected a logical consistency-based I/O error: invalid protection option. 19th March, 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