Two lines in h1 tag

开发者 https://www.devze.com 2023-03-23 01:55 出处：网络

I need to fit开发者_JAVA百科 two lines in one h1 tag (instead of making two separated h1 tags). How can I create a line break inside of h1 tag?Using:

相关专题：css

I need to fit开发者_JAVA百科 two lines in one h1 tag (instead of making two separated h1 tags).

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

Using:

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

A W3C validated method is

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

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>

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

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.

You can use the line break tag

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

You can also do it with PHP

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

echo $h1;

Two lines in h1 tag

Validated:

Invalid

Tested code:

精彩评论

关注公众号

热门标签

图文推荐

Two lines in h1 tag

Validated:

Invalid

Tested code:

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：