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?
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;
Related
I have the following:
<a class="clickable_element" href="https://www.mywebsite.com"> ==$0
<div class="content">My Website</div>
</a>
I want to wrap all this in a "h1" tag.
How would I go about doing this using javascript?
You would first have to create the h1 tag, append it to the DOM. Then append the tag to the tag.
Like this
const aTag = document.querySelector('a')
const h1Tag = document.createElement('h1')
document.body.appendChild(h1Tag)
h1Tag.appendChild('aTag')
I am not sure why you want to wrap this with h1 if you can just create a class for the div, but here's the code you can try:
HTML
<h1 id="wrap">
</h1>
JS
document.getElementById("wrap").innerHTML = "<a href='test.html'><div>My Website</div></a>"
I need to replace the content of my P tag to DIV tag in almost 600 html pages.Each page had different name and topic.
<div id = "topicname"></div>
<P><A NAME="4u_uvt"></A><B>FiBu-Übergabe</B></P>
I wrote this Javascript and called in my HTML function, but it is not working
<script>
var mydivpchange=document.querySelectorAll("p");
document.getElementByID("topicname").innerHTML=mydivpchange[1].innerHTML;
</script>
// get tag names that are <p> only in first occurence
let test=document.getElementsByTagName('p')[0];
// create a div element
let y=document.createElement('div');
// state that p = div
y.innerHTML=test.innerHTML;
// replace test with y
test.parentNode.replaceChild(y, test);
div{ background:red;}
<p>test</p>
<br/>
<p>test2</p>
<br/>
<p>test3</p>
Below, the <h3> tag creates a space, and the code gets formatted weirdly. How do you get rid of the space between the 80 and the + sign? The counter-up module that I used is from this link: https://www.jqueryscript.net/animation/Animating-Numbers-Counting-Up-with-jQuery-Counter-Up-Plugin.html
<section id = "cta" class = "wrapper style3">
<div class = "row uniform">
<div class = "4u 6u$(2) 12u$(3)">
<h2><u>Students</u></h2>
</div>
<div class = "4u 6u(2) 12u$(3)">
<h3 class = "counter">80</h3><h3>+</h3>
</div>
</div>
<script>
jQuery(document).ready(function( $ ) {
$('.counter').counterUp({
delay: 30,
time: 1500
});
});
</script>
</section>
Headings are block-level elements meaning two adjacent headings will be rendered on two separate lines (as long as you haven't tinkered with their presentation via CSS).
You can use CSS to append the "+" to the H3 content instead of using another adjacent H3 element:
h3.counter:after {
content: "+";
display: "inline";
}
<h2>Without CSS:</h2>
<h3>80</h3><h3>+</h3>
<h2>With CSS:</h2>
<h3 class="counter">80</h3>
How can I get all elements with specific text(inner HTML) in an HTML document by jsoup?
for example all elements with text test :
<html><head><title>for example></title></head>
<body>
<div id="div1" class='test'>
test
<p id='p1'>test<a id='a1'>test</a></p>
<a id='a2'>test</a>
<img src='' id='img1' alt='test'>
<p id='p2'>example</p>
</div>
</body></html>
note that I don't want to use tags' id or tags' name for selecting elements!
If I understand you correctly:
String html = "<html><head><title>for example></title></head><body><div id=\"div1\" class='test'>test<p id='p1'>test<a id='a1'>test</a></p><a id='a2'>test</a><img src='' id='img1' alt='test'><p id='p2'>example</p></div></body></html>";
Document doc = Jsoup.parse(html);
Elements elements = doc.select("*:containsOwn(test)");
for(Element element:elements)
{
System.out.println(element.toString()+"\n");
}
This will give the output for tags with id: div1,p1,a1,a2.
a module in my Joomla CMS produces the following code:
<li id="myid" clas="">
<span>
<strong>1.</strong>
</span>
<dl>
<dt>
<span>Some text</span>
</dt>
</dl>
</li>
This must not be edited in html, since it is created via multiple plugins.
Is there a way to make "Some text" appear on the right of "1." via CSS. I tried something like:
li {
display: inline;
}
which didnt work. Do you have any suggestions? Thank you very much!
You need to set the dl and dt to display as inline, because their default is block:
#myid dl, #myid dt {
display: inline;
}
Why don't you use ordered list instead unordered list? It can be simplified..
But if yout want go with your code you must delete "" tag from list number, cause it would be deprecated. Solution is add class='strong' in your tag for your number and add more css, here's the code for 'strong' class :
#myid .strong{
font-weight:bold;
}
Your html code :
<li id="myid" clas="">
<span class="strong">1.</span><dl>
<dt>
<span>Some text</span>
</dt>
</dl>
</li>