I tried
<div>
<tr><h1><ins><font face ="bold" color = "white">Home</h1></ins></tr>
<tr><h1><ins><font face ="bold" color = "white">Contact</h1></ins></tr>
</div>
resulting in
Home
Contact
How can I align these tags side by side?
I tried
<div>
<tr><h1><ins><font face ="bold" color = "white">Home</h1></ins></tr>
<tr><h1><ins><font face ="bold" color = "white">Contact</h1></ins></tr>
</div>
resulting in
How can I align these tags side by side?
either display:inline or float:left which gives more control (but needs <div style="clear:both"></div> afterwards)
h1 {
float: left;
margin-right: 10px;
}
before
<nav>
<h1>hello</h1>
<h1>world</h1>
<div style="clear:both"></div>
</nav>
after
nav {
display: flex;
}
before
<nav>
<h1>hello</h1>
<h1>world</h1>
<div style="clear:both"></div>
</nav>
after
Ideally, you might benefit from a review of your markup.
Certainly you shouldn't be using multiple <h1> elements within a single document.
The <h1> is the principal heading of the entire document. By definition that means there will only ever be one.
Whenever you want to change the visual presentation of an element, you will use CSS.
If you are building a navbar, then you can use:
<ul> - an unordered listand nest this inside a:
<nav> - a navigation elementOnce you have a structure like the outline above, there are multiple ways to align elements side-by-side:
nav ul { display: flex; }nav ul { display: table; }nav ul li { float: left; }nav ul li { display: inline-block; }When starting out, one of the simplest ways is to use the last option immediately above:
nav ul li {
display: inline-block;
}
Working Example:
nav {
background-color: rgb(191, 0, 0);
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
width: 96px;
height: 48px;
line-height: 48px;
text-align: center;
}
nav ul li a {
font-family: sans-serif;
color: rgb(255, 255, 255);
font-weight: 900;
}
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>