Html document element types

HTML Elements

Elements are the fundamentals of HyperText Markup Language (HTML). Each HTML document is made of elements that are specified using tags.

HTML elements and HTML tags are often confused. The tags are used to open and close the object, whereas the element includes both tags and its content. Let’s consider an example with the tag:

Title of the document

— is an element, and

,

— are tags.

Types of HTML Elements

HTML elements can come in pairs or be empty. The paired elements have an opening (<>) and () closing tags, and the content of the element is placed in between them.

Do not forget the closing tag! Though some HTML elements are displayed correctly, even without the closing tag, however, do not rely on this. It might lead to unexpected results or errors.

The empty elements have no closing tags. In XHTML the empty elements are «closed» in the opening tag like this:
.

The empty elements in HTML are: , , , , , , , , , , , , , and .

Example of the HTML empty elements:

html> html> head> title>Title of the document title> head> body> h1>Title of the document h1> p>The first paragraph p> p>The second paragraph, br/> where line break is inserted p> body> html>

Result

In the above-mentioned example we used 4 paired elements:

In the given example we also used an empty
tag to insert a line-break.

Block-level and Inline HTML Elements

For the purpose of styling, all HTML elements are divided into two categories: block-level elements and inline elements.

Block-level elements are those that structure the main part of your web page, by dividing your content into coherent blocks. They always start on a new line and take up the full width of a page, from left to right; they also can take up one line or multiple lines and have a line break before and after the element. Block-level elements can include both block-level & inline elements.

Block-level elements are , , , , , , , , , , , , , , — , , , , , , , , , , , , , , and .

All block-level elements have opening and closing tags.

Example of the HTML block-level elements:

html> html> head> title>Title of the document title> head> body> footer> p>Author: W3docs team p> p>a href="[email protected]">Send message to the author a>. p> footer> body> html>

Result

In the example we used block-level element to define the footer of the web page and its content.

Inline elements are used to distinguish part of a text, to give it a particular function or meaning. Inline elements usually include a single or a few words. They do not cause a line break and do not take up the full width of a page, only the space bounded by its opening and closing tag. The inline elements are usually used within other HTML elements.

Nested HTML elements

HTML elements can contain other elements, i.e. be nested. For example, if you want to give a text a strong emphasis and tell the browser to display it as bold, you can use the tag nested in the

tag.

Example of the HTML nested elements:

html> html> head> title>Title of the document title> head> body> h1>Title of the document h1> p>The first paragraph p> p>strong>This part of the sentence strong> has a strong emphasis and is displayed as bold. p> body> html>

HTML tags should be «nested» in proper order, meaning that the tag opened most recently is always the next tag to close.

In our example, we closed the tag first, and then the

tag.

The end tag

In the end you should put the end tag. However, even if you forget about it, some HTML elements will still show correctly. The closing tag is considered to be optional, so the example below will work in all the browsers. But don’t rely on this. If you want to avoid unexpected errors try not to forget about the end tag.

Example where the HTML end tag is absent:

html> html> head> title>Title of the document title> head> body> h1>HTML end tag h1> p>We forgot to put the end tag. body> html>

Empty HTML Elements

The HTML elements that don’t have any content are called empty elements. The
, which defines a line break, is an empty element that doesn’t have a closing tag.

Example of the HTML
tag:

html> html> head> title>Title of the document title> head> body> h1>HTML <br> tag h1> p>This tag br> defines a line break. p> body> html>

Источник

HTML Elements

An HTML element is defined by a start tag, some content, and an end tag.

HTML Elements

The HTML element is everything from the start tag to the end tag:

Examples of some HTML elements:

Note: Some HTML elements have no content (like the
element). These elements are called empty elements. Empty elements do not have an end tag!

Nested HTML Elements

HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements ( , , and

):

Example

My First Heading

My first paragraph.

Example Explained

The element is the root element and it defines the whole HTML document.

It has a start tag and an end tag .

Then, inside the element there is a element:

My First Heading

My first paragraph.

The element defines the document’s body.

It has a start tag and an end tag .

Then, inside the element there are two other elements: and

:

My First Heading

My first paragraph.

The element defines a heading.

It has a start tag

and an end tag

:

My First Heading

The

element defines a paragraph.

It has a start tag

and an end tag

:

Never Skip the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

Example

This is a paragraph

This is a paragraph

However, never rely on this! Unexpected results and errors may occur if you forget the end tag!

Empty HTML Elements

HTML elements with no content are called empty elements.

The
tag defines a line break, and is an empty element without a closing tag:

Example

This is a
paragraph with a line break.

HTML is Not Case Sensitive

HTML tags are not case sensitive: means the same as

.

The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.

At W3Schools we always use lowercase tag names.

HTML Tag Reference

W3Schools’ tag reference contains additional information about these tags and their attributes.

Tag	Description
	Defines the root of an HTML document
	Defines the document’s body
to	Defines HTML headings

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник