Lenio Web Bootcamp

# Anatomy of an HTML element

Estructura de etiqueta

The anatomy of our element is:

  • The opening tag: This consists of the name of the element (in this example, a for anchor), wrapped in opening and closing angle brackets <a>. This opening tag marks where the element begins or starts to take effect.
  • The attribute: Provides functionality to certain element types. They define additional characteristics or properties of the element. In this example, href (Hipertext REFerence) is the attribute that allows linking to another page or section in a document.
  • The value: This will provide the specific value of the attribute. In this example, the value specifies the URL of the page the link goes to.
  • The content: This is the content of the element. In this example, it is the anchor text.
  • The closing tag: This is the same as the opening tag, except that it includes a forward slash / before the element name. This marks where the element ends. Failing to include a closing tag is a common beginner error that can produce peculiar results.

TIP

Not all tags have a closure. They’re called “self closing tags” and have no content inside. For example. (opens new window)

# Tag Examples

This list (opens new window) includes most common HTML5 tags that are available at the moment. Not all of them are used nowadays, it is important to remember that like everything involving technology, these lists are in constant change.

Some tags work as big section dividers that nest other tags with more content inside. Others tags are more specific and determine an specific change. Let’s see an example:

<p>My cat is <strong>very</strong> grumpy.</p>

What we see in the browser is:

My cat is very grumpy.

In this case <p> is nesting the <strong> in order to make a specific word bold. The order in which tags are opened and closed is important to avoid undesired results in the document we are working on.

# Titles

There are six levels of titles, that go from 1 (the biggest and most important) to 6. It is important to use them in order (start with 1 and then the following).

This is how they're written:

<h1>I'm title number one</h1>
<h2>I'm title number two</h2>
<h3>I'm title number three</h3>
<h4>I'm title number four</h4>
<h5>I'm title number five</h5>
<h6>I'm title number six</h6>

What you see in the browser is:

I'm title number one

I'm title number two

I'm title number three

I'm title number four

I'm title number five
I'm title number six

# Lists <ol> <ul> <dl>

There are three kinds of lists: the ordered, unordered and description. By nature, lists nest elements inside them.

Ordered List

To create the ordered list we use the <ol></ol> (ordered list) tag. The items from the list are marked as <li></li> (list item). By default the items are marked with a number.

<ol>
  <li>Coffee</li>
	<li>Tea</li>
	<li>Cookies</li>
</ol>
  1. Coffee
  2. Tea
  3. Cookies

Unordered List

For the unordered lists we use the <ul></ul> (unordered list) tag, and also nests <li></li> (list item) inside. This kind of list is determined by bullets instead of numbers.

<ul>
	<li>Coffee</li>
	<li>Tea</li>
	<li>Cookies</li>
</ul>
  • Coffee
  • Tea
  • Cookies

Description List

In the description lists, the <dl></dl> (description list) tag is used to determine the list, the <dt></dt> (description term) tag for the title and <dd></dd> (description definition) for the definition of the title.

<dl>
	<dt>Term 1</dt>
	<dd>Definition of Term 1</dd>
	<dt>Term 2</dt>
	<dd>Definition of Term 2</dd>
	<dt>Term 3</dt>
	<dd>Definition of Term 3</dd>
</dl>
Term 1
Definition of Term 1
Term 2
Definition of Term 2
Term 3
Definition of Term 3

# Other specific tags:

  • Bold: <b>…</b> or <strong>…</strong>
  • Cursive: <i>…</i>, <em>…</em>, <cite>…</cite> or <dfn>…</dfn>
  • Underlined: <u>…</u>
  • Strikethrough: <s>…</s>
  • Subscript subscript: <sub>…</sub>
  • Superscript superscript: <sup>…</sup>
  • Small font: <small>…</small>
  • Big Font: <big>…</big>

Tags with multiple uses:

There are two types of tags that are mainly used to provide order or style.

<div>: is a divider. Inside a <div></div> any HTML element can be written, even more div's.
<span>: it is only used inside a text in case you need to change the CSS.
For example: a two line header would be an <h1> with one color for the first line and inside, a <span> with the rest of the text in another color.

← HTML Structure →