Previous task
Introduction to HTML and CSS5/13
Back to the list of tasks
  1. 1. Let's Go!
  2. 2. CSS in action
  3. 3. Consolidation
  4. 4. HTML basics
  5. 5. Single HTML tags
  6. 6. Attributes of HTML tags
  7. 7. Looking for errors in HTML
  8. 8. Basics of CSS
  9. 9. Other ways to connect CSS
  10. 10. CSS selectors
  11. 11. CSS classes
  12. 12. CSS properties and values
  13. 13. Looking for errors in CSS
Nest task
  • Courses
  • Sign up
  • Log in

Loading...
It will be ready in a few seconds.

  • Theory
  • Theory

Single HTML tags

Some of the paired tags we've already met. But what are some of the single tags?

Pair tags are usually needed to mark up a fragment of text. With a pair of tags, you can specify the beginning and end of that fragment. But there are some tags that are not intended to be used to mark up fragment of text.

For example, a tag to insert an image or a tag to insert a separator bar. Such tags add a single object to the page, and they do not need to enclose any text to do so. That's why they are called single tags.

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

By the way, you will see such code fragments in the HTML editor: <!-- text -->. They are called "comments", and the browser does not display them on the page.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html> <head> <title>Single HTML tags</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Instructor Cupcake</h1> <p>In future courses, you'll often get help from Instructor Cupcake. Let's give him a chance to introduce himself:</p> <!-- Image --> <!-- Separator --> <blockquote> <p>Hi, my name is Cupcake and I am your future instructor. I am a web developer. My most famous projects are:<!-- Line break --> Cat Energy blog,<!-- Line break --> HTML and CSS course,<!-- Line break --> JavaScript course.</p> <p>We'll see you in future courses!</p> </blockquote> </body> </html>
CSS
body { font-family: "Georgia", serif; } /* Quotation design example */ blockquote { margin: 1.5em 0; padding: 0.5em 15px; line-height: 1.5; background-color: #f9f9f9; border-left: 2px solid #cccccc; }

The code has changed, click "Update" or enable autorun.

You have moved to another page

Click inside the mini-browser to highlight this window.

100%
GoalsCompleted
0

    Practice using single tags to design your instructor card.

    1. Instead of the text <!-- Image --> insert the tag <img> (the image itself will appear in the next task).
    2. Instead of <!-- Separator --> insert the tag <hr>.
    3. Instead of <!-- Line break --> insert the tags <br>.

    © 2023-2024, codehero.pro