×
Course: Welcome

Attributes of HTML tags [6/14]

As you may have noticed in the previous task, nothing happened after you inserted the <img> tag into the code. Why is that?

Tags can have attributes. Some tags should be used only with attributes. For example, the <img>, tag that defines an image. It has to be used with an attribute src, that defines the address of the image (otherwise the browser won’t be able to load it).

In common cases the tag is written in the following way:

<tag-name attribute1="value1" attribute2="value2" ...>

There can be several attributes, here are the examples:

<p class="important">...</p>
<a class="external" href="https://htmlacademy.org">...</a>
<img class="avatar" src="keks.png">

In this task you will practice using tag attributes.

Don’t forget about spaces between a tag name and an attribute, and between attributes.

Do it
HTML
<!DOCTYPE html> <html> <head> <title>Attributes of 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> <img> <hr> <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:<br> Cat Energy Blog,<br> Links and images course at HTML Academy,<br> HTML5 course at HML Academy as well.</p> <p> See you soon!</p> </blockquote> </body> </html>
CSS
body { font-family: Georgia, serif; } blockquote { margin: 1.5em 0; padding: 0.5em 15px; line-height: 1.5; background: #f9f9f9; border-left: 2px solid #ccc; } /* Example of styling a photo */ .photocard { display: block; width: 300px; margin: 20px auto; border-radius: 10px; box-shadow: 0 0 5px #666; }
HTML Academy
  1. Add src attribute with value /assets/course1/keks.jpg to img tag.
  2. After that – one more attribute class with value photocard.
Theory Check Next