Elements, Tags and Attributes

What you'll learn

• The parts of an HTML element: tags, content and attributes.
• Which elements have no closing tag.
• How to put elements inside other elements (nesting).
• How to leave notes in your code with comments.

The idea

The parts of an element

<a href="https://www.readycamel.com">Learn to code</a>

• <a ...> is the opening tag. It starts the element; a is the element's name (a link, or anchor).
• </a> is the closing tag. It has a slash and ends the element.
• Learn to code is the content, what the reader sees.
• href="https://www.readycamel.com" is an attribute: extra information written inside the opening tag as name="value". Here it says where the link goes.

The whole thing, from opening tag to closing tag, is one element.

Elements without a closing tag

Some elements have nothing inside them, so they have no closing tag. They're called void (empty) elements:

<br>                                  <!-- a line break -->
<hr>                                  <!-- a dividing line -->
<img src="cat.jpg" alt="A sleeping cat">
<input type="text">

You may see them written as <br /> in older code. Both forms work; modern HTML doesn't need the slash.

Attributes

An element can have several attributes, separated by spaces. Always put the value in double quotes:

<img src="logo.png" alt="ReadyCamel logo" width="200" height="80">

Two attributes work on every element:

• id gives one element a unique name, for example id="contact".
• class puts elements into a group for styling, for example class="warning". Several elements can share a class.

Nesting: elements inside elements

Elements can contain other elements, like boxes inside boxes. The rule: close them in the reverse order you opened them.

<p>This is <strong>very</strong> important.</p>        <!-- correct -->
<p>This is <strong>very important.</p></strong>        <!-- wrong: closed in the wrong order -->

An element inside another is its child; the outer one is its parent. A page is one big family tree: <html> is the parent of <head> and <body>, and <body> is the parent of everything you see.

Comments

Text between <!-- and --> is a comment. The browser ignores it, so you can leave notes for yourself and other developers:

<!-- TODO: add a photo here -->

Spaces and new lines

The browser treats any run of spaces, tabs and new lines as one space. So you can indent your code to make it readable without changing the page. To start a new paragraph, use a new <p>, not extra blank lines.

Lowercase, please

Tag names aren't case-sensitive (<P> works), but everyone writes them in lowercase, and so should you.

Try it

Run the preview, then read the code next to what you see:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Elements</title>
</head>
<body>
  <!-- This comment is not shown on the page -->
  <h1 id="top">Elements, tags and attributes</h1>

  <p>This paragraph has a <strong>bold, important</strong> word and an
     <em>emphasised</em> one.</p>

  <p>These     extra     spaces
     and this new line become single spaces.</p>

  <p>A line<br>break and a dividing line:</p>
  <hr>

  <p class="note">Visit <a href="https://www.readycamel.com">ReadyCamel</a>
     or jump back to the <a href="#top">top heading</a>.</p>
</body>
</html>

Your turn

1. Add a comment above the first paragraph saying what the page is for, and check that it doesn't appear.
2. Make the word "important" both bold and emphasised: <strong><em>important</em></strong>. Check that you closed them in the right order.
3. Add title="Opens ReadyCamel" to the link and hover over it in the preview. The title attribute shows a tooltip.

Common mistakes

• Forgetting a closing tag. A missing </strong> can make the rest of the page bold. When something looks strange, look for an unclosed tag.
• Missing quotes or =. Write class="note", not class=note" or class "note".
• Using the same id twice. An id must be unique on the page; use a class for groups.
• Using <br> for spacing. Use separate paragraphs, and later CSS margins, instead of several <br> tags.

Key points

• An element = opening tag + content + closing tag; void elements such as <img> and <br> have no closing tag.
• Attributes add information inside the opening tag: name="value".
• id is unique; class groups elements.
• Nest elements properly: close them in reverse order.
• <!-- comments --> are ignored; extra spaces collapse into one.