HTML · Lesson 4

Attributes

Adding details to your tags

You've already used a few attributes, like href on links and src on images. In this lesson, let's look at them properly and meet the rest of the family.

What you'll learn

  • What an attribute is, and how to write one as a name and a value.
  • The attributes you will use most: src, alt, href, title, id, class and style.
  • The attributes that control input boxes and forms.

Let's add some details

A tag says what something is. An attribute adds details about it: which picture to show, where a link goes, what a box should say before someone types. Attributes are always written inside the opening tag, never in the closing tag.

Think of an ID card. The card is the tag. Each detail on it has a label and a value: ID No.: FPB-0153, Section: Tech, Photo: ana.jpg. Attributes work the same way. Each one has a name and a value, written as name="value".

Only one reporter has ID number FPB-0153, but many reporters share the Tech section. That's the difference between id (one of a kind) and class (a group).

How an attribute is written

A closer look

The rules

Attributes go inside the opening tag, after the tag name, with a space between each one. Write the value inside quotes, like alt="WebCore logo". The order of the attributes doesn't matter.

Some attributes have no value

A few attributes work like a switch: just writing the name turns them on. required means "this box must be filled in", disabled means "this box can't be used", and checked means "this checkbox starts ticked".

id, class and style

id gives one element a unique name, so use each id only once per page. class puts elements into a group, and many elements can share a class. You'll use both a lot in the CSS and JavaScript lessons. style changes how one element looks right away. CSS has a much better way to style many elements at once, which you'll learn soon.

Attributes for forms

A <form> collects what people type. action says where to send it, and method says how: get or post. On each box, type sets the kind of box, name labels the answer, value fills in a starting value, and placeholder shows a grey hint. A form that uploads files also needs enctype="multipart/form-data".

Let's build it

Let's add details to parts of the Front Page Bytes page. Each step shows the whole page, and the new lines are highlighted.

An image with src, alt and title

Your code
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <img src="/storage/assets/WebcoreIcon.png" alt="WebCore logo" title="Front Page Bytes logo" width="100">  </body></html>
What you see

src says which picture to show and alt describes it. title shows a small tooltip: hover your mouse over the logo in the mini browser to see it. width sets the size in pixels.

A link with href and title

Your code
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <img src="/storage/assets/WebcoreIcon.png" alt="WebCore logo" title="Front Page Bytes logo" width="100">    <p><a href="/news/phones" title="Opens the full story">Read the full story</a></p>  </body></html>
What you see

href is where the link goes. title works on links too: hover over the link to see "Opens the full story".

A heading with id, class and style

Your code
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <img src="/storage/assets/WebcoreIcon.png" alt="WebCore logo" title="Front Page Bytes logo" width="100">    <h2 id="top-story" class="headline" style="color: #1E6FA0;">Phones Go on Sale</h2>    <p><a href="/news/phones" title="Opens the full story">Read the full story</a></p>  </body></html>
What you see

style turns this heading blue right away. id="top-story" and class="headline" don't change anything you can see yet. They are names that CSS and JavaScript will use later.

A form with input attributes

Your code
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h2 id="newsletter">Get the Newsletter</h2>    <form action="/subscribe" method="post">      <label>Email:</label>      <input type="email" name="email" placeholder="you@example.com" required>      <input type="submit" value="Subscribe">    </form>  </body></html>
What you see

action and method say where and how the form sends its answers. On the email box, type, name, placeholder and required each add one detail. The second input's value sets the button's text. Forms can't send anything from these mini browsers, so clicking Subscribe does nothing here.

Checked and disabled

Your code
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h2 id="newsletter">Get the Newsletter</h2>    <form action="/subscribe" method="post">      <label>Email:</label>      <input type="email" name="email" placeholder="you@example.com" required>      <br>      <label><input type="checkbox" name="alerts" checked> Send me breaking news</label>      <br>      <label>Plan:</label>      <input type="text" name="plan" value="Free plan" disabled>      <br>      <input type="submit" value="Subscribe">    </form>  </body></html>
What you see

checked makes the checkbox start ticked. disabled greys out the Plan box so it can't be changed. Try clicking both in the mini browser. <br> simply starts a new line, and like <img> it has no closing tag.

Extra: language and direction

Your code
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <p lang="fil">Maligayang pagdating sa Front Page Bytes!</p>    <p lang="ar" dir="rtl">مرحبا بكم</p>  </body></html>
What you see

lang says which language a piece of text is in, so screen readers pronounce it correctly. dir="rtl" makes text run right to left, which languages like Arabic need. Notice the Arabic line sits on the right.

Quick notes

src Which file to show 
<img src="photo.jpg">

How to use

  • <img> The picture file to show.
  • <iframe> The page to show inside the window.
  • photo.jpg A file in the same folder.
  • images/photo.jpg A file inside a folder named images.

Examples

  1. A picture in the same folder as the page.

    <img src="photo.jpg" alt="Photo">

  2. A picture inside a folder named images.

    <img src="images/photo.jpg" alt="Photo">

  3. A page shown in a small window.

    <iframe src="/weather"></iframe>
alt Words that describe an image 
<img src="photo.jpg" alt="A red phone">

How to use

  • <img> Describe what the picture shows in a few words.
  • alt="" Leave it empty for pictures that are only decoration.

Examples

  1. Describe what the picture shows.

    <img src="ana.jpg" alt="Ana Reyes smiling at her desk">

  2. A picture used only for looks.

    <img src="divider.png" alt="">
href Where a link goes 
<a href="/news">News</a>

How to use

  • /news A page on the same website.
  • https://… A page on another website.
  • #top A spot on the same page, the element with id="top".

Examples

  1. Another page on your site.

    <a href="/news">News</a>

  2. Another website.

    <a href="https://www.wikipedia.org">Wikipedia</a>

  3. Jump to a part of the same page.

    <h1 id="top">Front Page Bytes</h1>...<a href="#top">Back to top</a>
title Tooltip on hover 
<a href="/news" title="Latest stories">News</a>

How to use

  • Works on almost any tag.
  • Shows a small note when the mouse rests on the element.

Examples

  1. Extra information about a link.

    <a href="/news" title="Latest stories">News</a>

  2. A note on a picture.

    <img src="logo.png" alt="Logo" title="Front Page Bytes, since 2024">
id One unique name 
<h2 id="top-story">...</h2>

How to use

  • Use each id value once per page.
  • No spaces in the value. Use dashes instead.
  • #top-story How CSS and JavaScript pick it.

Examples

  1. A heading you can jump to.

    <h2 id="sports">Sports</h2><a href="#sports">Go to Sports</a>

  2. One box you style with CSS.

    <div id="top-banner">Front Page Bytes</div>
class A group name 
<p class="headline">...</p>

How to use

  • Many elements can share the same class.
  • class="headline big" One element can have several classes, split by spaces.
  • .headline How CSS picks it.

Examples

  1. Give several elements the same look.

    <p class="headline">Phones</p><p class="headline">Laptops</p>

  2. Two classes on one element.

    <p class="headline big">Breaking news</p>
style Quick look for one element 
<h2 style="color: blue;">...</h2>

How to use

  • property: value; The same CSS you learn in the CSS lessons, written inside the quotes.
  • color: blue; font-size: 20px; Split several styles with semicolons.

Examples

  1. Color one heading.

    <h2 style="color: blue;">Tech News</h2>

  2. Two styles at once.

    <p style="color: red; font-size: 20px;">Sale!</p>
lang / dir Language and text direction 
<p lang="ar" dir="rtl">...</p>

How to use

  • lang A language code: en, fil, ar.
  • dir="rtl" Text runs right to left, for languages like Arabic.
  • dir="ltr" Text runs left to right (the usual way).

Examples

  1. One Filipino sentence on an English page.

    <p lang="fil">Magandang umaga!</p>

  2. Arabic text, read from right to left.

    <p lang="ar" dir="rtl">مرحبا</p>
type / name / value Kind of box, its label, its starting value 
<input type="text" name="plan" value="Free">

How to use

  • type text, email, password, checkbox, radio or submit.
  • name A label for the answer when the form is sent.
  • value The starting text, or the answer a checkbox sends.

Examples

  1. A text box that starts with a value.

    <input type="text" name="city" value="Manila">

  2. A checkbox that sends "yes" when ticked.

    <input type="checkbox" name="news" value="yes">

  3. A button that sends the form.

    <input type="submit" value="Sign up">
placeholder Grey hint inside a box 
<input placeholder="you@example.com">

How to use

  • <input> A grey hint inside the box. It goes away when typing starts.
  • Keep it short, like an example answer.

Examples

  1. Show what an email address looks like.

    <input type="email" placeholder="you@example.com">

  2. A search box.

    <input type="text" placeholder="Search news">
required / disabled / checked On-off switches 
<input type="checkbox" checked>

How to use

  • required The form waits until this box is filled in.
  • disabled The box is greyed out and can't be used.
  • checked A checkbox or radio button starts ticked.
  • Write only the name. No value is needed.

Examples

  1. A box that has to be filled in.

    <input type="email" required>

  2. A box people can see but not change.

    <input type="text" value="Free plan" disabled>

  3. A checkbox that starts ticked.

    <input type="checkbox" checked>
action / method / enctype Where and how a form sends 
<form action="/subscribe" method="post">

How to use

  • action The address that receives the form.
  • method="get" Sends the answers in the address bar.
  • method="post" Sends the answers out of sight.
  • enctype Use multipart/form-data when the form uploads files.

Examples

  1. A sign-up form that sends the answers out of sight.

    <form action="/subscribe" method="post">  <input type="email" name="email">  <input type="submit" value="Join"></form>

  2. A search form. The words show in the address bar.

    <form action="/search" method="get">  <input type="text" name="q"></form>

  3. A form that uploads a photo.

    <form action="/upload" method="post" enctype="multipart/form-data">  <input type="file" name="photo"></form>

Common mistakes

These are mistakes many beginners make. Each mini browser shows what really happens.

Forgetting a closing quote

The mistake
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <p>Big news today.</p>    <a href="/news/phones>Read more</a>    <p>More stories below.</p>  </body></html>
What you see

The value of href never ends, so the browser swallows everything after it as part of the attribute. The link and the paragraph below it disappear.

Tip: Every value needs two quotes: href="/news/phones"

Misspelling an attribute name

The mistake
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <img scr="/storage/assets/WebcoreIcon.png" alt="WebCore logo" width="100">  </body></html>
What you see

The browser doesn't know an attribute called scr, so it ignores it. The image has no src, so no picture appears.

Tip: Spell it s-r-c, short for source. When an attribute seems to do nothing, check its spelling first.

Using the same id twice

The mistake
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h2 id="story">Phones Go on Sale</h2>    <h2 id="story">Laptops Get Cheaper</h2>  </body></html>
What you see

This one looks fine, so it's easy to miss. An id should be one of a kind, and when two elements share it, CSS and JavaScript in later lessons won't know which one you mean.

Tip: Give each id a different name, like id="phones" and id="laptops". Use class when several elements belong together.

Test your knowledge

Edit the code on the left. The mini browser updates as you type, and each goal gets a check mark when it's done.

No clicking needed. Each goal gets a check mark by itself once your code does it.

  1. Add an alt text to the image.
  2. Give the link an href so it goes somewhere.
  3. Add a placeholder to the input box.
  4. Give the heading an id.
Your code
What you see
Try an exercise

Recap

  • Attributes add details to a tag. They go inside the opening tag as name="value".
  • src, alt, href and title describe images and links. id is one of a kind, and class is a group.
  • type, name, value and placeholder set up input boxes. required, disabled and checked are on-off switches.

References

Lesson content prepared by the WebCore F.E. team for beginner learners. The following references were used in preparing this lesson.

  • WHATWG. HTML Living Standard (official specification). Open reference
  • LibreTexts. Web Site Design: HTML (2022, open textbook). Open reference