Summary
Pseudocode:
<!-- General form -->
<element attribute-name="attribute-value"> </element>Details
When reading or writing HTML code, you will sometimes see tags that contain attributes. Attributes allow you to attach extra information to an element that isn’t necessarily visible to the user viewing your web page.
As you can see in the example above, attributes consist of a name and a value, separated by an equal sign. The attribute value is wrapped in quotes.
For an element with opening and closing tags, attributes are placed in the opening tag after the element symbol, as in the example below:
<!-- Anchor element with href attribute -->
<a href="https://example.com/">Sample link</a>For elements with a self-closing tag, attributes are placed within the single self-closing tag after the element symbol, as in the example below:
<!-- Image element with src attribute -->
<img src="img/my-picture.jpg">Types of attributes
There are many types of attributes besides the ones shown here. Here’s a brief overview of the attributes we’ve shown so far. The href attribute is used with the anchor element to specify URLs to other web pages. The src attribute is used with the image element to specify the file path to the image you want to display.
Some elements require the use of certain attributes. The image element, for example, requires the src attribute.
Multiple attributes
<!-- Image element with src attribute -->
<img src="img/my-picture.jpg" alt="Text description of picture...">An element can have one or more attributes at a time. If your element needs multiple attributes, as in the example above, you can simply separate them with a space.
Exercises
Recreate the first code snippet in the Details section by typing out the code in your index.html file.
References
HTML basics on MDN