HTML Elements - Continued

HTML Cheatsheet

• Download HTML Cheatsheet (PDF)
• Star HTML Cheatsheet on Github
• Share HTML/CSS Cheatsheet Link: https://ilovecoding.org/blog/htmlcss-cheatsheet

CSS Cheatsheet

• Download CSS Cheatsheet (PDF)
• Star CSS Cheatsheet on Github
• Share HTML/CSS Cheatsheet Link: https://ilovecoding.org/blog/htmlcss-cheatsheet

Lesson Transcript

There is just one more thing you need to know about HTML elements syntax, and that is in the cheat sheet. So if you simply scroll down, that is the last rule, and that is that some elements do not have a closing tag but they are self-closing.

The general rule for HTML elements is that they have a closing tag. But some exceptions like <img>, <br>, <hr>, <meta>, and <input>, do not have closing tags and hence, do not have children elements.
They usually follow this format:

<name attribute="value"/>

the / denotes that it is a self-closing tag.

The <br /> tag

The <br> tag basically is a line-break (br stands for break row). If you want to have a space between 2 paragraphs for example, you need to use a <br> tag. Just manually trying to do this by pressing enter won't have any results in your web page, the same works for multiple spaces. See this example:

<p id="first-para">
  this is the text       for the paragraph.
  <span>
    this is some more text
  </span>
  <span>
    sadjalsdkjsa
  </span>
</p>

The code above will result in this:

We can clearly see that all the extra spacing and the new lines do not have any effect. For jumping to a new line we use the <br />. For this example, we want to start the span text in a new line, and have a blank line between them. So we add two br tags and the code looks like this:

<p id="first-para">
  this is the text       for the paragraph.
  <br />
  <br />




  <span>
    this is some more text
  </span>
  <span>
    sadjalsdkjsa
  </span>
</p>

As you can see in the example above, after we use the <br /> the vertical spacing was applied.

The <hr /> tag

If we want to define a line to separate content or to define a thematic break, we can use the <hr /> tag, which stands for horizontal rule. It makes a horizontal line across the screen which is very useful to separate the content visually. Let's use it in our example:

<p id="first-para">
  this is the text       for the paragraph.
  <br />
  <br />
  <hr />



  <span>
    this is some more text
  </span>
  <span>
    sadjalsdkjsa
  </span>
</p>

Here we can see the result:

One last thing to know about HTML elements, is that one single element can have multiple attributes. like <img id="first-img" class="myclass" alt="my first image" />, but it won't have any effects visually since they are not meant for it. We will learn more about this in future lessons.