Course: Welcome

Single HTML tags [5/14]

We have already seen some of the paired tags. And what are the single tags?

Paired tags are required to wrap some portion of the text. You can exactly define the start and the end of this portion by paired tags. But there are tags which don't decorate text on the page.

For example, an image inserting tag or a line break tag. Such tags add a single object to your page, and they do not have to wrap any text. That’s why they are called single.

Examples of such tags: <br>, <hr>, <img>.

By the way, you will see these pieces of code in the HTML editor: <!-- text -->. They are called «comments». The browser does not render them on the web page.

Single tags used to have a closing slash symbol (/) after them before the closing angle bracket. For example: <br/>. The new HTML5 standard does not require using a closing slash in the single tags.

Do it
<!DOCTYPE html> <html> <head> <title>Single (unpaired) HTML tags</title> </head> <body> <h1>Coach Muffin</h1> <p>Coach Muffin will be helping you with HTML and CSS intricacies in further courses. Let him introduce himself:</p> <!-- Image --> <!-- Divider --> <blockquote> <p>Hey y’all! My name is Muffin and I am you future coach. I am a web developer. I live in Saint Petersburg. My most famous projects are:<!-- Break --> Cat Energy blog,<!-- Break --> Links and images course at HTML Academy,<!-- Break --> HTML5 course at HML Academy as well.</p> <p>See you soon!</p> </blockquote> </body> </html>
body { font-family: Georgia, serif; } /* A quotation formatting example */ blockquote { margin: 1.5em 0; padding: 0.5em 15px; line-height: 1.5; background: #f9f9f9; border-left: 2px solid #ccc; }
HTML Academy

Practice using single tags to format the coach’s card.

  1. Instead of <!-- Image --> insert <img> tag (the image itself will appear in the next task).
  2. Instead of <!-- Divider --> insert <hr> tag.
  3. Instead of <!-- Break --> signs insert <br> tags.
Theory Check Next