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:
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:
<h1>) - (
<ol>) and its individual list items (
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.
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:
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:
Margins, padding, and borders can be broken down into top, right, bottom, and left segments, and each editable with CSS.
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.
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:
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:
See also: Complete list of HTML elements, CSS Back to Springboard SEO's glossary
<article class="movie-review"> ... </article>