Skip to main content

Tags and Attributes

Content construction in HTML is based on the use of tags and attributes.

Tags​

Tags are the keywords, surrounded by angle brackets (< and >), that wrap the content to tell the browser how to interpret it.

Most HTML elements consist of two tags:

  • Opening tag: <name> (e.g. <p>)
  • Closing tag: </name> (e.g. </p>)

The content is placed between the two.

Example:

<p>This is a text paragraph.</p>

Some tags are "empty" or "self-closing", which means they do not contain text and do not require a closing tag. Their attributes are sufficient to define their behavior and information.

Examples of empty tags:

  • <br> (Line break)
  • <hr> (Horizontal line)
  • <img> (Image)

Attributes​

Attributes provide additional information about HTML elements. They are always defined inside the opening tag.

Attributes usually come in name="value" pairs.

Example: The image element requires two main attributes to function correctly:

<img src="logo.png" alt="Company logo">
  • src (source): Tells the browser where to find the image file.
  • alt (alternative text): Displays text if the image fails to load, and is crucial for accessibility and SEO.

Global Attributes: Some attributes can be applied to almost any tag:

  • id: A unique identifier throughout the page for that specific element.
  • class: Assigns the element to one or more "classes" to apply CSS styles or select it with JavaScript.
  • style: Allows adding CSS styles directly to the tag (not recommended in most cases).