Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to write both h1 and h2 in the same line?

Tags:

html

css

I have a page and I want simply to make a header. This header is an <h1> text aligned to the left, and an <h2> aligned to the right, in the same line, and after them, an <hr>. My code so far look as follows (if you test it, you'll see that it's wrong):

<h1 align="left">Title</h1>  <h2 align="right">Context</h2>  <hr/> 

Thanks guys!

like image 414
Bruno Machado - vargero Avatar asked Jan 19 '11 14:01

Bruno Machado - vargero


People also ask

How do I display two tags on the same line?

To display multiple div tags in the same line, we can use the float property in CSS styles. The float property takes left, right,none(default value) and inherit as values. The value left indicates the div tag will be made to float on the left and right to float the div tag to the right.

How do I put two headings on the same line in HTML?

The following code will allow you to have two headings on the same line, the first left-aligned and the second right-aligned, and has the added advantage of keeping both headings on the same baseline. Show activity on this post. Add a span with the style="float: right" element inside the h1 element.

How do you use H1 and H2?

Whereas your H1 tag is used for your document's main heading; Your main points are wrapped in subheadings known as H2s. In other words: A <h2> tag defines the second-level headings in your webpage.

What is H1 and H2 in writing?

H1: Explaining H1 and H2 Header Tags and How They Affect SEO. H2: Header 1 text is usually the largest text on the page, and serves as the title for that page's content. H2: Relevant Header 2 text guides visitors to a specific section of web content.


2 Answers

h1 and h2 are native display: block elements.

Make them display: inline so they behave like normal text.

You should also reset the default padding and margin that the elements have.

like image 70
Pekka Avatar answered Sep 21 '22 01:09

Pekka


Keyword float:

<h1 style="text-align:left;float:left;">Title</h1>  <h2 style="text-align:right;float:right;">Context</h2>  <hr style="clear:both;"/> 
like image 28
Floern Avatar answered Sep 20 '22 01:09

Floern