HTML tags and attributes

This tutorial has been planned to introduce the basics of HTML code, to users that have never written a web site manually. Writing HTML documents is pretty much writing tags, attributes and content. That's why we'll focus in explaining how a tag, its attributes and its contents should be used.

Throughout this document, you may find a lot of elements, attributes and JavaScript code, which aren't properly explained. This is because the objective of this tutorial is to focus on the general syntax and not on the characteristics of each element. To know the details of elements in HTML5 refer to this list of HTML elements.

Elements and tags

HTML is a markup language composed by a set of elements that are the basis of its structure. These elements conform a toolbox authors can use to shape their documents. For example, you can find elements that insert paragraphs, videos or other documents, or elements that mark quotations, important text or the titles of book, movies, papers and other works.

The task performed by browsers is vital in this scheme, as they are responsible for the processing and transformation of the elements into a rendered document. In this regard, authors should consider that some elements don't have a tangible represetation: their purpose is to provide semantic meaning to the piece of the document they affect. Sometimes, the information provided by these semantic elements, is used by different types of user-agents (browsers, search engines, documents processors, etc) to extract additional data about the document and its parts.

An HTML element is usually composed by two tags: the opening tag and the closing tag. An opening tag consists of the element's name encolsed by the lesser-than "<" and greater-than ">" signs. The closing tag is constructed like the opening tag but, in this case, the element's name is preceded by a slash ("/"). In the following example, you'll see the opening and closing tags for the b element.

Be aware that elements aren't tags. Elements are represented by tags in the code. Yet they are usually considered, erroneously, the same thing.

<b>Important text</b>
Important text

As you can see, there's the opening tag ("<b>") and the closing tag ("</b>"). Now, the text you see in the middle, "Important text", is known as the element's content. As you progress in your learning of this language, you'll see that some elements are not supposed (and not allowed) to have content. These are the empty elements.

Each one of the many elements in HTML5 has a specific and particular purpose. Some of them are exclusively semantic, others have an impact in the document rendering and some both.

In addition to tags and content, an element can have attributes and events. While attributes define values or properties to be used by browsers in the processing of the document, events can be employed to specify behaviors or actions to be performed when certain conditions are met, like for example, when the users clicks the element.

Attributes and events share a common syntax: they must be inserted as a list of space-separated items inside the star tag, after the element's name and preceded by a space. Each one of these items is composed by a name (for the attribute or event), the equal sign ("=") and the value or function (sometimes optionally) enclosed by quotes. The following example shows a b element with one attribute (style) and one event (onclick).

<b style="color: red" onclick="changeColor(this.parentNode)">Bold text</b>
Bold text


The content of an element is, generally speaking, whatever falls inbetween its opening and closing tags. Depending on the element, this can go from absolutely nothing to a piece of HTML document. This content is what will be affected by the element's functionality or meaning. For example, the em element grants its content emphasis, and browsers usually display its text with a particular font style to make it stand out from regular text.

Some elements, known as empty elements, aren't allowed to have content and their declaration consist only of the opening tag with any number of attributes and events.

In the following example are three elements each containing a different type of content: the paragraph (p element), cointaining other elements; a word with emphasis (em element), containing plain text; and a button (input (type=button) element), which is an empty element.

<p>Is this a <em>rainy</em> day? <input type="button" value="Yes"></p>

Is this a rainy day?