I am starting to learn HTML and in the lesson I am on it tells me to include text in the body with <p> paragraph tags. However, in a different section, it just tells me to put some text between <h1> tags and the result seems to be the same. Are <p> tags necessary to include in between heading tags?
Paragraph tags necessary with header tags in HTML?
3.8k views Asked by AudioBubble At
7
There are 7 answers
0
On
h1 through h6 are header tags p is a paragraph tag. will by default in most browsers display larger unless a reset of sorts is applied to it.
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>Some Text</p>
</body>
</head>
here is a jsfiddle so you can see http://jsfiddle.net/snymax/93TSp/ Edit http://jsfiddle.net/snymax/93TSp/1/ displays h1 - h6 p and free text.
0
On
Many of the HTML tags have some special meaning in terms of their display.
Block Level and Inline Level. Block level elements are semantically defined t start with a new line. Inline elements can share space within the same line. <h1> and <p> both are block level elements. General meaning of <h1> is a heading. A bolder, bigger text. <p> tag used to put large text. say a description of some thing. You are suggested to use them according to their meanings. <span> is an example of an inline element. You should judge how to use them according to your requirement. The general idiom is you should only put Block level (and inline ones) in a block level element only and not in an Inline element. In a stricter note, some parsing environments other than browser ( like small device publishing formats ) throw errors if you do such things.
That said, it is all your will how you include them.
For an advanced understanding : Mozilla's trusted documentation
0
On
Direct answer
No, the <p> is not necessary inside heading. Moreover, it must not be used there!
According to both the HTML 4 DTD and HTML 5 content models, the p element cannot be used inside h1 and it cannot contain h1 either.
References to specs
In HTML 4, p element is defined as block-level and can contain only inline elements, the same holds for h1 element.
In HTML 5 p element can be used in contexts where flow content is expected and can contain phrasing content. The same holds for h1 element again.
Text
Other answers mentioned “free text” – paragraph text not marked up a p element contents. Text is categorized as both phrasing content and flow content in HTML 5 and it’s nothing really special. With HTML 4 I am not sure about this and I suspect that the spec does not say much about it.
Being flow content means that text can be directly embedded in body as its content model is flow content. In fact, text can be embedded virtually anywhere. Using p elements is necessary for styling and paragraph breaks as any sequence of whitespace normally collapses into one before being displayed. But in some simple cases p need not be used, e.g. when the whole document is just a heading and one paragraph:
<!DOCTYPE html>
<title>Really minimalistic HTML 5 example</title>
<h1>Really minimalistic HTML 5 example</h1>
And that’s all, folks!
Looking for html, head and body tags? They are omitted; the elements still exist, though. But there is no p element. You can verify that in Firebug or by applying styles to body and p. If you want “And that’s all, folks!” to be a real p paragraph, just place <p> before “And”. (Closing tag </p> can be omitted.)
How to think about HTML
As many people offer misleading advice on HTML, I want to point you in the right direction, as far as HTML understanding is concerned.
Element is not a tag. Element is a unit of document structure. Tag is a string that represents element in document source code. Most elements need two tags (opening and closing one) to represent them. E.g. p element is usually represented by <p> opening tag, </p> closing tag and the text between those two. The opening tag can also be e.g. <p style="color: red"> – a different tag for the same element. Opening tag lists element’s attributes (style attribute in this case).
HTML is used to mark up structure of a document. You can completely ignore that browsers can somehow display h1 in big bold font, with big margins. CSS takes care of elements’ presentation. JS takes care of element’s behavior.
The important thing on h1 is it is a level 1 heading. It has this meaning, these semantics. p, on the other hand, is paragraph (approximately; for details see my question on paragraphs in HTML). It is natural that headings and paragraphs are two distinct components of a document and that they are used independently one of the other. Using elements properly, respecting their defined semantics, is necessary for pretty display with styles switched off, SEO, browsing with screen readers and overall accessibility.
In HTML you can have text in many ways even without anything on the HTML, not even the
<!DOCTYPE>tag!The
<p></p>is just a way of design to the HTML that includes a certain font and size.So technically, you CAN have
<p></p>within a<h1></h1>tag but it's not really needed, it make a bit of difference though.