HTML tag attributes

Earlier we describe how an HTML tag follows the basic structure of definition, attributes and content. On this page we will look at the attributes portion of a tag in greater depth with:

• universal HTML attributes
• tag-specific HTML attributes
• data-* attributes

Universal HTML attributes

Most, if not all, tags can have the following HTML attributes:

• id whose value can appear only once per page
  • of course, to identify the element uniquely
• class whose value can appear many times per page
  • to identify the element's membership in a group of related elements
  • this attribute will come handy later when we work with CSS styles (i.e. to format many different elements with a single line of code)

For example:

<section id="section-7g">

  <div class="container-sized">
    
      <h1>Row 1</h1>
      
  </div>
  
  <div class="full-width">
  
      <h1>Row 2</h1>
  
  </div>
  
  <div class="container-sized">
  
      <h1>Row 3</h1>
      
  </div>
    
</section>

Tag-specific HTML attributes

Other tags have very specific attributes:

For links

• href for "hypertext reference"
  • usually appears in an <a> tag and accepts a URL
  • the URL could be an
    • absolute HTTP/HTTPS link (e.g. https://google.com)
    • relative link (e.g. /code/textbook)
    • e-mail address (e.g. mailto:me@me.com)
    • telephone number (e.g. tel:18001234567)
• target complements the href attribute and specifies whether clicking the link will open a new window (or a tab)
  • _blank opens the link in a new window (or tab in modern browsers)
  • other values include _self, _parent and _top but deal with the outdated web development concept called frames

<a href="https://www.google.com">Google.com</a> 

<a href="https://www.canada.ca" target="_blank">Canada.ca</a> 

For images

• src for "source"
  • usually appears in an <img> tag and accepts a URL
  • the URL is an image file but can sometimes be an animated GIF
• alt for "alternative text"
  • usually appears in an <img> tag and accepts plain text
  • used to describe an image to a screen reader user

<img src="https://www.placehold.it/300x300.jpg" alt="300x300 placeholder" />