Menu
← All posts

HTML Elements

· HTML

First appeared on mobifreaks.com · Updated

The second part of my 2011 HTML series on Mobifreaks, lightly refreshed.

HTML uses tags to mark up content. Tags are written with the characters <, > and /, and they tell the browser what each piece of content is: a heading, a paragraph, a link, an image.

<p>Start tag
This is a paragraph.Content
</p>End tag
Element

Most elements come as a pair: a start tag, the content, and an end tag. Together they make an element.

Start tag

  • Opens with <
  • Followed by the tag name, with no space before it
  • Closes with >

End tag

  • Opens with </
  • Followed by the same tag name
  • Closes with >
<p>This is a paragraph.</p>

Elements without an end tag

Some elements can't have content, so they have no end tag. These are called void elements:

<br>
<img src="photo.jpg" alt="A short description of the photo">
<input type="email" name="email">
<meta charset="utf-8">

The full list is small: area, base, br, col, embed, hr, img, input, link, meta, source, track and wbr.

You may see them written as <br />. That slash comes from XHTML. In HTML it is allowed but does nothing.

Attributes

Start tags can carry extra information as attributes, written as name="value":

<a href="/posts" title="All posts">Read more</a>

Some attributes are needed for the element to make sense: href on a link, src and alt on an image.

Pick the element that means what you mean

The browser, search engines and screen readers all use the element to understand your content. A <button> works with the keyboard out of the box; a <div> styled to look like one does not. Use <nav>, <main>, <article>, <h1> to <h6> and friends for what they describe, and reach for <div> and <span> only when nothing else fits.