Two lines in h1 tag

HtmlCss

Html Problem Overview

I need to fit two lines in one h1 tag (instead of making two separated h1 tags).

How can I create a line break inside of h1 tag?

Html Solutions

Solution 1 - Html

Using:

<h1>Line 1 <br/> Line 2</h1>

Solution 2 - Html

A W3C validated method is

<h1>Line 1 <span style = "display: block;">Line 2</span></h1>

Solution 3 - Html

Summarizing all clever answers, this is what https://validator.w3.org says for each one:

Validated:

<h1>Line 1 <br/> Line 2</h1>
<h1>Line 1<br>Line 2</h1>
<h1>Line 1 <span style = "display: block;">Line 2</span></h1>

Invalid

<h1>
    <p>Line1</p>
    <p>Line2</p>
</h1>

Reason:

> Error: Element p not allowed as child of element h1 in this context

<h1>
  <div>line1</div>
  <div>line2</div>
</h1>

Reason:

> Error: Element div not allowed as child of element h1 in this context.

Tested code:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<h1>Line 1 <br/> Line 2</h1>
<h1>Line 1<br>Line 2</h1>
<h1>
    <p>Line1</p>
    <p>Line2</p>
</h1>
<h1>Line 1 <span style = "display: block;">Line 2</span></h1>

<h1>
  <div>line1</div>
  <div>line2</div>
</h1>
</body>
</html>

Solution 4 - Html

You can insert markup inside h1, so that you can simply do <h1>foo<br>bar</h1>.

Solution 5 - Html

Standard quote that br inside h1 is valid

Let's teach more people to read the current standard

4.3.6 "The h1, h2, h3, h4, h5, and h6 elements" says:

> Content model: Phrasing content.

Then we click the definition of "Phrasing content", which leads to 3.2.5.2.5 "Phrasing content" which says:

> Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs. > > ..., br, ..., span, ...

so we see that br is in the huge list of phrasing content elements, and therefore can go inside h1.

This also shows us that another option would be to do something like:

<h1><span>ab</span><span>cd</span></h1>

and then make the span be display: inline-block; with CSS.

Solution 6 - Html

You can use the line break tag

<h1>heading1 <br> heading2</h1>

You can also do it with PHP

$str = "heading1 heading2 heading3";
foreach(explode(" ",$str) as $data)
{
 echo '<h1>' .  $data  . '</h1>' . '<br>';
}
Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

Is there a Node OAuth Server Implementation

node.jsOauth

Next Solution:

How can I tell if I have Service Pack 1 for Visual Studio 2010 installed?

Visual StudioVisual Studio-2010

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionOded HarthView Question on Stackoverflow
Solution 1 - HtmlTom WaltersView Answer on Stackoverflow
Solution 2 - HtmlJWorks StudiosView Answer on Stackoverflow
Solution 3 - HtmlmarcanuyView Answer on Stackoverflow
Solution 4 - HtmlzoulView Answer on Stackoverflow
Solution 5 - HtmlCiro Santilli Путлер Капут 六四事View Answer on Stackoverflow
Solution 6 - HtmlIslam RoshanView Answer on Stackoverflow