I will have 3 icons side by side that will float left when the window shrinks. Under each icon, I'd like to add some text. I can pretty much get it as you can see below.
.icons {
BORDER-TOP: black 1px solid;
HEIGHT: 100px;
BORDER-RIGHT: black 1px solid;
WIDTH: 100px;
BORDER-BOTTOM: black 1px solid;
FLOAT: left;
BORDER-LEFT: black 1px solid
}
div 1some text
div 2
div 3
In jsfiddle, this tag seems to come up as invalid. Is there a valid and / or
better way to accomplish this?
//jsfiddle.net/kp950/mum68pwv/
Mr Lister
44.5k15 gold badges107 silver badges146 bronze badges
asked Dec 8, 2015 at 20:23
3
Just apply display: block
to your text elements.
a { display: block; }
The will force each element to consume the full available width of the container, and subsequent elements to the next line.
//jsfiddle.net/mum68pwv/4/
answered Dec 8, 2015 at 20:27
Michael BenjaminMichael Benjamin
318k93 gold badges535 silver badges655 bronze badges
0
You're getting an error thrown in jsfiddle due to your linebreak syntax being wrong.
You're
using when you should be using
2020/HTML5 EDIT
You no longer need to use self-closing tags in HTML5 [though browsers can still handle them], instead you can simply use
.
answered Dec 8, 2015 at 20:28
JD DavisJD Davis
3,3274 gold badges23 silver badges58 bronze badges
Instead of use
or
is a valid tag whereas is not so.
Use :
div 1
some text
div 2
some
some text
div 3
some text
P.S.
is anchor tag and it is not a good option for adding little elements to your webpage. Instead use
tag which will be more efficient.
answered Dec 8, 2015 at 20:32
It AssistorsIt Assistors
8851 gold badge11 silver badges27 bronze badges
You have a syntax error in your
tag
So this
should become
some text
answered Dec 8, 2015 at 20:28
Sidney GijzenSidney Gijzen
1,8513 gold badges24 silver badges27 bronze badges
When you're writing HTML, you often need to insert line breaks. A line break is essential in addresses, poems, or when text exceeds the available browser width. If you don't insert your own line breaks, then the text gets formatted in an odd way.
In this tutorial, I'm going to show you how to insert line breaks in your HTML code with some "with and without" examples, so you can start using it correctly and format your text better.
Basic HTML Line Break Syntax
You can insert line breaks in HTML with the
tag, which is equivalent to a carriage return on a keyboard.
Be aware that HTML will ignore any line break from a keyboard’s return key.
If you are wondering why there’s a forward slash in the
tag above, the slash was important when HTML4 was still widely used. With HTML5, you don’t need to put a slash in it anymore. But both will do the same thing.
If you are using a code formatter like prettier, it'll always insert the slash when you save or paste even if you don’t put it in there.
How to Insert Line Breaks in Addresses
A line break is important when you're writing an address on a letter, for example, in order to format it properly.
Here's an example of an address without line breaks
An address without line breaks [
tags] looks like this:
The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
I have added some CSS code to center everything with Flexbox and make the text a bit bigger:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-size: 3rem;
max-width: 1000px;
margin: 0 auto;
}
This is how it looks in the browser:
Here's an address with line breaks
And this is how we can add line breaks to properly format our address:
The White House
1600 Pennsylvania Avenue
NW Washington, DC
20500
USA
It looks like this in the browser:
How to Add Line Breaks to Poems
Poems are conventionally written in short breaking sentences in order to create visual hierarchies and format them nicely.
So, if you want to write a poem in your HTML code, the
tag makes the formatting process
easier for you.
A poem without line breaks
I dabbled around a lot when I decided to learn to code
I went from A to Z with resources
When I decided to make my own things
I discovered I've been in the old all while
So I remained a novice in coding
But then I found freeCodeCamp
I got my hands on the platform
I went from novice to ninja in coding
And now I'm a camper for life
It looks like this in the browser:
You can see the poem has no visual hierarchy, it is not formatted the right way, and so it is unreadable as a poem.
A poem with line breaks
I dabbled around a lot when I decided to learn to code
I went from A to Z with resources
When I decided to make my own things
I discovered I've been in the old all while
So I remained a novice in coding
But then I found freeCodeCamp
I got my hands on the platform
I went from novice to ninja in coding
And now I'm a camper for life
I also changed the font size a bit in the CSS:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-size: 2.5rem;
max-width: 1000px;
margin: 0 auto;
}
It now looks like this in the browser:
You can see that the poem is now more readable and formatted the right way.
Some valuable advice: Do not use the
tag to force a space between block-level elements [p
, h2
, h2
,
h3
, div
, etc]. Instead, use the CSS margin property.
You might be wondering – since the
tag is an element, is it possible to style it?
Well, it is possible. But there’s no real practical need to style it since all it does is create a couple of white spaces.
Conclusion
I hope this tutorial has given you the background knowledge you need to use the
tag so you can make your HTML text look better.
Thank you for reading, and keep coding.
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started
How do I add a line break in a div?
tag, which is equivalent to a carriage return on a keyboard.
How do I get a line break between two div tags?
tag. There are many ways to break the line without using
tag. The used properties are listed below: white-space: pre; It is used to make elements acts like
tag.