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.

28 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

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.

12 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.

4 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.

3 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…

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

1 Like

<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.

5 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.

3 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.

1 Like

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