HTML First Steps - Lesson 2 - p, div tags and their differences. br tag

16/04/2025, by Ivan

In the previous lesson, we created our first HTML document, which means you now know how to write HTML code in a text editor and view changes in the browser by refreshing the page (usually by pressing F5).

In this lesson, we’ll continue working with text and use tags like span, p, and div. We’ll also look at the br tag.

<html>
  <head>
    <title>My First HTML Document</title>
  </head>
  <body>   
    <h1>My First HTML Document</h1>
  </body>
</html>

This is our base code that we’ll continue using.

Now, let’s add the following lines:

<p>First line in the P tag</p>
<p>Second line in the P tag</p>
<div>First line in the DIV tag</div>
<div>Second line in the DIV tag</div>

When viewed in the browser, the p tags will display each paragraph on a new line with default top and bottom margins. The div tags will also create block elements, but without default margins between them. The p tag is intended for paragraphs of text, while div is for grouping elements as a block (e.g., for styling with color or borders).

If a site has text, it should be inside a p or h1-h6 tag unless it's decorative or structural. Proper nesting looks like this:

<body>
  <div>
    <p>Text</p>
  </div>
</body>

Important: Do not place a div inside a p tag. This is incorrect:

<body>
  <p>
    <div>Invalid</div>
  </p>
</body>

To break lines within a paragraph, use the <br /> tag. Even if you split the text across lines in the editor, HTML will treat it as one line. Use <br /> to explicitly break lines within a paragraph.

Example using <br /> and multiple paragraphs:

<div>
  <p>
    HTML was created by British scientist Tim Berners-Lee around 1989–1991 at CERN in Geneva, Switzerland.<br />
    It was designed as a language for sharing scientific and technical documentation, suitable for non-experts.<br />
    HTML tackled the complexity of SGML by defining a small set of structural and semantic elements—descriptors.<br />
    Descriptors are often referred to as “tags.”<br />
    HTML also introduced hypertext capabilities. Multimedia support was added later.<br />
  </p>
  <p>
    Originally, HTML was intended for structure and formatting, independent of display devices.<br />
    Ideally, HTML documents should render correctly across various devices (e.g., color monitors, mobile phones, screen readers).<br />
    However, today HTML is used far beyond its original intent. For example, the <table> tag, meant for tables, is often misused for layout.<br />
    Over time, HTML’s platform-independence goal was somewhat sacrificed for modern multimedia and graphic needs.</p>
</div>

This structure provides proper paragraph spacing and line breaks, improving readability and semantic structure.

Extra Block Types (EBT) - New Layout Builder experience❗

❗Extra Paragraph Types (EPT) - New Paragraphs experience

HTML First Steps - Lesson 2 - p, div tags and their differences. br tag