How to Add a Single Line Break in Dreamweaver Design View

Dreamweaver CC
Opening screen of Dreamweaver CC. Screen shot by J Kyrnin courtesy Adobe

If you are new to web design and front end development (HTML, CSS, Javascript), then you may choose to get started with a WYSIWYG editor. This acronym stands for "what you see is what you get" and it basically refers to software that allows you to create a webpage using visual tools while the software writes some code behind the scenes based on what you are creating. The most popular WYSIWYG tool available is arguably Adobe's Dreamweaver.

While many seasoned web professionals with more refined skills look down on Dreamweaver and its tendency to produce bloated HTML markup and CSS styles, the simple truth is that the platform remains a good option for those just getting started with website design. As you begin using Dreamweaver's "design view" option to build a webpage, one of the questions you are likely to have is how to create a single line break for content in that view.

When you're adding HTML text in a web page, the web browser will display that text as a long line until it reaches the edge of the browser window or it's container element. At that point, the text will wrap to the next line. This is similar to what happens in any word processing software, like Microsoft Word of Google Docs. When a line of text has no more room on a horizontal line, it will wrap to begin another line. So what happens if you want to dictate where a line breaks?

When you hit the [ENTER] key in Dreamweaver's design view, the current paragraph is closed and a new paragraph starts. Visually, this will mean that those two lines are separated with a bit of vertical spacing. This is because, by default, HTML paragraphs have padding or margins (which one depends on the browser itself) applied to the bottom of the paragraph which adds that spacing.

This can be adjusted with CSS, but the truth is that you want there to be spacing between paragraphs to allow for website readability.If you want a single line and no wide vertical spacing between lines, you do not want to use the [ENTER] key because you do not want those lines to be individual paragraphs.

For these times when you don't want a new paragraph to begin, you would add the <br> tag in HTML. This is also sometimes written as <br />. specifically for versions of XHTML which required all elements to be closed. The trailing / in that syntax self closes the element since the <br> tag does not have it's own closing tag.

This is all well and good, but you are working in Design View in Dreamweaver. You may not want to jump into the code and add these breaks. That is fine, because you can, indeed, add a line break in Dreamweaver without resorting to code view.

To add a line break in Dreamweaver's Design View:

  1. Place your cursor where you want the new line to start.
  2. Hold down the shift key and press [ENTER].

That's it!  The simple addition of the "shift" key along with the [ENTER] will add a <br> instead of a new paragraph. So now that you know how is this is, you should consider where to use it and where to avoid it.

Remember, HTML is meant to create the structure of a site, not the visual appearance. You should not use multiple <br> tags to create vertical spacing beneath elements in your design. That is what the CSS properties for padding and margins are for. Where you would use a <br> tag is when you do just need the single line break. For example, if you are coding a mailing address and you've decided to use a paragraph, you could add <br> tags like this:

<p>Company Name<br>
      Address Line<br>
      City, State, ZIP</p>

This code for the address is a single paragraph, but visually it would display the three lines on individual lines with a small space between them.