Are line breaks the standard way of manipulating the position of HTML elements?

Question

Are line breaks the standard way of manipulating the position of HTML elements?

Answer

The answer to this is dependent on the elements you are trying to position and can become quite involved. For now, just know that in web development there is a design principle called separation of concerns. This principle guides us to keep our HTML structure distinct from its presentation.

As layout is presentational, we will generally want to use CSS to position our elements.

26 Likes

Line brake elements are unique in the fact that you have to use only an opening tag. Why do you have to insert a double opening tag in the exercise?

2 Likes

this statement is not true for html5, see this post

which exercise? Please link to exercise

inserting two break elements will create two breaks, thus more space between elements. Although the proper way would be to use <p> or <div> and use margins

3 Likes

to make it a paragrapgh

2 Likes

A paragraph has it’s own leading line-break and margin so a <br> is not essential to paragraph composition.

Line breaks need only be employed in rare instances, for convenience no less. CSS does provide for those instances as well but what’s to stop us from being stubborn or singleminded?

I use them any time text needs to appear on the next line, but then decisively so, by design. How it might be used or misused is par for the course in a declarative language environment

The point is we are the publishers and all the tools are right there. Yes, linebreaks are necessary to get us out of tight situations. but they should not be considered a part of normal page markup. The section and paragraph elements cover that.

31 Likes

Funny thing is the first thing I did in this exercise was substitute in the < p >< /p > tags to see if they would function the same as the double < br > since those double tags were effectively functioning as a new paragraph designation anyways. I feel like the < br > tags in the “Learn” text section about the Nile River do a better job of presenting a functional example of where and why to use that tag. It seems to me like more natural and structurally appropriate choice for the index.html exercise would be the < p > tag if only because it is an explicit representation of that structural element rather than the implicit representation of the < br > tag.

7 Likes

Wipe this delusion from your mind. As far as any user agent reading this page is concerned, only P tags denote paragraphs. BR tags are inconsequential and have ZERO meaning. They don’t even belong in proper markup, by most accounts.

9 Likes

So, is there is no intention for the text within the About Brown Bear heading to be separated into two paragraphs? That formatting result is just a quirk of the functional output of the tags being demonstrated in the lesson?

I can accept that, but you have to admit it makes things a bit confusing…

4 Likes

But it is good that you raise this point, so feel rewarded. We will get to the bottom of this.

3 Likes

<br> has a way of influencing inline content to behave like block level by inducing a linebreak, which is a block level activity. It pretends the line above has run out of space and wrapping is forced. We all know this to not be the case, so we were duped.

As CSS gained traction we (the community) devised ways to utilize the <span> element to fill in this role by making it a block level object within a P and not interrupt the flow. The question has come up in the forums, “What use the SPAN element?” Well, here’s one.

10 Likes

Margins?.. Could you please explain how margins can be used.

Margins are taught in the css course, can highly recommend the css course

here is a simple example:

https://jsbin.com/recivajede/edit?html,css,output

where i use margins to push world down.

4 Likes

Line breaks are from along time ago before CSS was around. When you wanted to put some white space in-between any 2 blocks of text you inserted line breaks. It functions just like using the return/enter key/lever on a keyboard/typewriter is my best understanding of the reason and use of the <br> tag.

3 Likes

Does this mean that there really is no difference between using <br> and <p></p>?

Thank you.

breaks and paragraphs are very different. Break elements are a quick and dirty hack while paragraph are proper block elements with margin

8 Likes

why do we use line break elements if we can just use <p> or <div> tags

using block level elements (like div and paragraph) is the preferable way in most cases. along with margin, padding and more

still, can be useful to learn about the break element.

3 Likes

As far as I’ve seen, you insert the openig tag two times so you have two breaks. So instead of:

“This is a sentence
with a break.”

wich has only one break opening tag, you have this:

“This is a sentence

with two breaks.”

Which has two opening tags. You can think of it as if you hit enter two times in word for example. So basically the break is like an enter. That’s how I understand it. Hope that helps, I’m still a beginner too.

4 Likes

Yup! That is what I got too, I find not complicating this too much in my head so much easier… I know the complex stuff is gonna come real soon :sweat_smile:

1 Like