Lesson 3 of 12

HTML Elements and Attributes

HTML elements and attributes are the grammar of every web page. Once you understand how they are put together, every new tag you meet will feel familiar, because they all follow the same few rules. This lesson builds on the page you created in HTML Editors and Your First Page.

The anatomy of HTML elements and attributes

Take this line: <p class="intro">Hello, Kochi!</p>. It has four parts:

  • The opening tag <p class="intro"> – the element name in angle brackets, plus any attributes.
  • The content Hello, Kochi! – text or other elements.
  • The closing tag </p> – the same name with a forward slash in front.
  • An attribute class="intro" – extra information about the element, written inside the opening tag.

The whole thing, from opening to closing tag, is the element. People often say “tag” and “element” as if they were the same, but strictly speaking tags are the markers and the element is everything they enclose.

Element names are not case-sensitive, so <P> works, but the universal convention is lowercase. Stick to it; your code will look like everyone else’s and be easier to read.

Void (empty) elements

Some elements never have content, so they have no closing tag. These are called void elements. Common ones include <br> (line break), <hr> (thematic break), <img> (image), <input> (form field), <meta> and <link>.

You may see them written with a trailing slash, like <br />. In HTML that slash is allowed but does nothing; it is a leftover habit from XHTML. Either style is valid – just be consistent within a project.

Nesting elements correctly

Elements can contain other elements. The rule is simple: the last element opened must be the first one closed. Think of it like stacking tiffin boxes: you cannot close the outer box while an inner one is still open.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nesting</title>
</head>
<body>
  <!-- Correct: em closes before p -->
  <p>Our <em>filter coffee</em> is freshly brewed.</p>

  <!-- Incorrect: tags overlap. The browser tries to repair this,
       but the result may not be what you expect. -->
  <p>Our <em>filter coffee</p> is freshly brewed.</em>
</body>
</html>

Run the example and the second line may look acceptable, because the browser repairs the overlap behind the scenes. Open DevTools and you will see the DOM it built is different from what you wrote. Overlapping tags are one of the most common errors the W3C validator reports.

What are attributes?

Attributes add information or change behaviour. They always go in the opening tag, are written as name="value", and are separated from each other by spaces. A link, for example, needs an href attribute to know where to go, and an image needs src and alt.

  • Always wrap values in quotes. Double quotes are most common; single quotes work too. Unquoted values work in simple cases but break as soon as the value contains a space.
  • Attribute names, like element names, should be written in lowercase.
  • Each attribute can appear only once per element.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Attributes</title>
</head>
<body>
  <h1 title="Hover over me to see this tooltip">Hill stations of Tamil Nadu</h1>

  <p lang="ta">ஊட்டி</p>
  <p>Ooty is in the Nilgiris district.</p>

  <a href="#more">Jump to more details</a>

  <p id="more">Kodaikanal and Yercaud are also popular.</p>
</body>
</html>

Boolean attributes

Some attributes are either on or off. These are boolean attributes. Their presence alone means “true”, so you just write the name: <input disabled>. Writing disabled="false" does not turn it off – the attribute is still present, so the field is still disabled. To switch it off, remove the attribute completely.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Boolean attributes</title>
</head>
<body>
  <p><label>Name <input type="text" value="Arun" disabled></label></p>

  <p><label><input type="checkbox" checked> Send me updates</label></p>

  <p hidden>You will not see this paragraph.</p>
  <p>The paragraph above has the hidden attribute.</p>
</body>
</html>

Global attributes you will use often

Most attributes belong to particular elements, but global attributes can be used on any element:

AttributePurpose
idA unique name for one element on the page. Used for link targets, form labels and JavaScript.
classOne or more space-separated names used to group elements, mostly for CSS styling.
langThe language of the element’s content, for example lang="hi" for Hindi.
titleAdvisory text, often shown as a tooltip. Do not rely on it for important information – touch and keyboard users rarely see it.
hiddenHides content that is not currently relevant.

An id must be unique on the page, while a class can be reused on as many elements as you like. Class names connect your HTML to your CSS; you will use them heavily in CSS Selectors, and ids are a common way to find elements in JavaScript DOM Manipulation.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>id and class</title>
  <style>
    .dish { font-family: sans-serif; }
    .veg  { color: green; font-weight: bold; }
    #menu { border-bottom: 2px solid orange; }
  </style>
</head>
<body>
  <h2 id="menu">Today's menu</h2>
  <p class="dish veg">Masala dosa</p>
  <p class="dish">Chicken chettinad</p>
  <p class="dish veg">Paneer butter masala</p>
</body>
</html>

Watch out: Do not give two elements the same id. Browsers will not complain, but links, labels and scripts that target that id may pick the wrong element.

With HTML elements and attributes understood, you are ready to structure real text in HTML Headings, Paragraphs and Formatting.

Further reading

Key takeaways

  • An element is an opening tag, content and a closing tag; attributes go inside the opening tag.
  • Void elements such as <br>, <img> and <input> have no closing tag.
  • Close nested elements in reverse order – tags must never overlap.
  • Write attributes as lowercase name="value" pairs; boolean attributes are true just by being present.
  • Global attributes such as id, class, lang and hidden work on any element; ids must be unique.

Quick quiz

Check what you learned – pick an answer.

1. Which of these is a void element?

2. How do you turn off a disabled input?

3. What is the main difference between id and class?

Practice exercise

Make a page listing three Indian cities as paragraphs. Give every paragraph the class "city", give the one for your favourite city the id "favourite", and add a title attribute to it saying why you like it.

Show a hint

An element can have several attributes: <p class="city" id="favourite" title="…">

Show the solution
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cities</title>
</head>
<body>
  <h1>Cities I like</h1>
  <p class="city">Hyderabad</p>
  <p class="city" id="favourite" title="Great food and a beautiful old town">Mysuru</p>
  <p class="city">Bhubaneswar</p>
</body>
</html>

Progress is saved in this browser only.