HTML output is not what I expect it to be

Question

I am having some trouble with php. here is my html that I want:

<p><h1>name</h1>surname</p>

where name and surname is variables in php

what i get is:

<p></p> <h1>name</h1> "surname" <p></p>

here is my php code:

echo "<p> <h1>{$rowsList['Name']}</h1> {$rowsList['Surname']} </p>";

Answer 1

Semantics

The basic semantics:

• <h1> tag is used for Headings.
• <p> tag is used for Paragraphs.

You cannot contain a Heading inside a Paragraph.

It is not semantically valid and it doesn't make sense. Instead you need to consider removing the surrounding <p> tags.

From other sources:

StackOverflow

It is impossible to put a heading element inside a p element in HTML markup, not just formally but because browsers implicitly terminate an open p element when they encounter a heading. So the question is meaningless: an element that cannot exist in a certain context cannot have any meaning (semantics) within that context.

Instead of using p to group text and headings together, you can use the div element or, with the usual caveats, HTML5 novelties like section and article.

W3C

According to standards a Paragraph should not contain other block elements (including paragraphs and headers). As indicated in other answers, to group a header with a paragraph you can use the div tag.

You can find a lot of information about this subject also on w3c's website: http://www.w3.org/TR/html401/struct/global.html#block-inline

Solution

Change the PHP Code to:

echo "<h1>{$rowsList['Name']}</h1> <p>{$rowsList['Surname']} </p>";

References:

• Should a heading be inside or outside a <p>?

Answer 2

This is not a problem with PHP. This is basic HTML.

According to the documentation, a <p> tag may contain Phrasing Content.

Phrasing Content is defined as:

Consists of phrasing elements intermixed with normal character data.

Phrasing Elements are:

a, em, strong, small, mark, abbr, dfn, i, b, s, u, code, var, samp, kbd, sup, sub, q, cite, span, bdo, bdi, br, wbr, ins, del, img, embed, object, iframe, map, area, script, noscript, ruby, video, audio, input, textarea, select, button, label, output, datalist, keygen, progress, command, canvas, time, meter

Notice how <h1> is not among them.

All this to say that the docs explicitly imply (???) that <p><h1>...</h1></p> is invalid, and the browser will correct it to its best guess. It should be noted in particular that if you right-click and select View Source (or View Original Source) then you'll see your HTML as you wrote it - it's only in the DOM inspector that you'll see the "corrected" version.