• Toll-free: 1-800-514-5796
  • In Montreal: 514-400-0852

Glossary Definition: HTML Element

An ever-growing glossary of SEO Jargon

Get a Quote Call today :1-800-514-5796

What is an HTML Element?

HTML elements are the basic units of HTML, the predominant markup language of the Web.

HTML elements are the basic units of HTML, and consist of tags that surround different types of content. Web browsers do not display HTML tags, but use them to interpret the content of the page. Most HTML elements have an opening and closing tag, with content in between. For example:

<h1>This is a Primary Heading</h1>

Not all HTML elements require a closing tag, such as the image (<img>) element, which uses attributes to specify content.

HTML elements primarily represent the semantics, (meaning) of content, opposed to presentation (visual appearance), which is defined by CSS. Nevertheless, most browsers assign default formatting to various elements, rendering plain HTML visually similar to a Word document.

Most HTML elements can be defined as either block-level, or as inline:

Block-level Elements

A block-level element will normally take up the full width of its containing element, ending and beginning with a new line. Block-level elements may contain data (content), other block-level elements, and other inline elements. Examples of block-level elements include:

  • Paragraph Element (<p>)
  • Heading elements (<h1>) - (<h6>)
  • Bockquote Element (<blockquote>)
  • Lists, such as the ordered list (<ol>) and its individual list items (<li>)
  • Document Division Element (<div>)

Block-level Example:

A heading

A relatively short paragraph, with a list below it.

  • A list item
  • Another list item
Fig. 1: A stack of block-level elements, with dashed borders

If no width is set on a block-level element, it will expand to fill its parent element. If no height is set, it will expand to fit its child elements.

Inline Elements

In contrast with block elements, which flow vertically, inline elements flow horizontally until they reach the end of their containing block; only then will they wrap to the next line. Inline elements may contain only data and other inline elements. Examples of inline elements include:

  • Abbreviation Element (<abbr>)
  • Emphasis Element (<em>)
  • Citation Element (<cite>)
  • Quote Element (<q>)
  • Span Element (<span>)

Inline Example:

The W3C page About W3C says the W3C's mission is To lead the World Wide Web to its full potential.

Fig. 2: Example paragraph containing 3 inline elements: <abbr>, <cite>, <q>

The Box Model

The CSS box model is rectangular structure that is automatically applied to all HTML elements considered to be block-level. Understanding how the box model affects HTML elements is necessary in order to use CSS for layout effectively.

The box model specifies 4 areas:

  1. Content: Either text, images, objects, or other elements
  2. Margins: The space between elements (optional, always transparent)
  3. Padding: The space between the element border and the element content (optional, always transparent)
  4. Borders: Can be set to display between the padding and margin (optional)

Margins, padding, and borders can be broken down into top, right, bottom, and left segments, and each editable with CSS.

The CSS box model
Fig. 1: The CSS Box Model

The total width of a block-level element = left margin + left border + left padding + width + right padding + right border + right margin.

Total height of a block-level element = top margin + top border + top padding + height + bottom padding + bottom border + bottom margin

When calculating the dimensions of a block-level element, remember to include any margins, padding, or borders in its total width or height.

If no width is defined, a block-level element will expand to fill the length of its parent container. If no height is defined, it will expand to fit any child elements.

The Inline layout model

A companion concept to the box model is the inline layout model, which applies to all inline elements. The inline layout model is similar to the box model, with two main differences:

  • Dimensions (width and height properties) can't be set for inline elements
  • Top and bottom margins can't be set for inline elements

Formatting and Presentation

HTML Attributes

The language used for the look and formatting of HTML documents is CSS (Cascading Style Sheets). CSS is usually applied to HTML with element attributes that reference styles from an external style sheet. The three HTML attributes used to match elements to CSS rules are the ID, Class, and Style attributes, used in the form:

<tag attribute="value">[content]</tag>

Example

<article class="movie-review">
					
...

</article>
See also: Complete list of HTML elements, CSS
Share this:
Like this:
Back to Springboard SEO's glossary
Get a QuoteOr call us: 1-800-514-5796