Start and end html code

HTML Elements with Example

In this tutorial, we are going to learn about HTML elements for example. We will also look at other concepts that move around it like tags and attributes.

HTML Elements

HTML elements are the building blocks of HTML pages. HTML elements tell the browser how to display specific content on web pages. Like text, images, videos, and other content.

Almost all HTML element has a start tag and an end tag. The start tag looks like and the end tag looks like .

Some of the elements do not have an end tag. For example,
tag does not have an end tag. HTML elements without closing tags are called self closing elements.

Self closing elements do not have content. They are called void elements .

HTML elements example

Let’s see some examples of HTML elements with code and output.

The

tag is used to create a paragraph. the content inside the paragraph is displayed in a normal font on the page.

This is paragraph 1
 
This is paragraph 2
 
This is paragraph 3

The to tags are used to create headings. The content inside the heading is displayed in bold font on the page.

The tag is used to create a heading level 1, tag is used to create a heading level 2, and so on to .

This is heading 1
 
This is heading 2
 
This is heading 3
 
This is heading 4
 
This is heading 5
 
This is heading 6

tag is used to create an unordered list. The
tag is used to create an ordered list.

The tag is used to create an image. It does not have a closing tag.

To display an image, you need to specify the source of the image using the src attribute.

There is another attribute called alt which is used to specify the alternative text of the image. This text is displayed when the image is not loaded.

HTML elements can be nested

HTML element structure

An HTML element is made up of a start tag , attribute , content , and end tag . The start tag is used to open the element. The end tag is used to close the element.

Attributes are used to specify the element’s properties. If there are more than one attribute then they are separated by a space.

HTML elements types

There are 2 types of elements in HTML:

1. Elements that needs to be closed — Example

   , , etc

2. Elements that does not need to be closed (self cloasing) — Example ,
   , etc

HTML elements list

Here is the list of most commonly used HTML elements:

Here is a list of self closing elements:

Elements with self closing tags

Element Name	HTML Code	Description
Image		Used to create an image.
Break		Used to create a break.
Horizontal Rule		Used to create a horizontal rule.
Video		Used to create a video.
Audio		Used to create an audio.
Source		Used to create a source.
Embed		Used to create an embed.
Object		Used to create an object.
Param		Used to create a param.
Map		Used to create a map.
Area		Used to create an area.

HTML Elements vs Tags

In general terms, both «tag» and «element» are interchangeably used. But technically there is little difference between them.

Tag	Element
Tags are used to mark the start and end of an element.	Elements are the collection of a start tag, its attributes, an end tag and everything in between.
Tags are written in angle brackets ( ).	Elements include the start tag, end tag, attribute, and content.

Conclusion

Everything on the web is part of an HTML element. You can create everything from a simple paragraph to a complex form using HTML elements.

1. what are empty elements in HTML? Empty elements are elements that have no content. They are self closing elements like
   and
   

   ---

   .

2. what are block elements in HTML? Block elements are elements that are displayed in a single line. They are

   , , etc.

3. what are inline elements in HTML? Inline elements are elements that are displayed in a single line. They are , , etc.

Источник

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.

Источник

HTML Introduction

HTML is the standard markup language for creating Web pages.

What is HTML?

• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as «this is a heading», «this is a paragraph», «this is a link», etc.

A Simple HTML Document

Example

My First Heading

My first paragraph.

Example Explained

• The declaration defines that this document is an HTML5 document
• The element is the root element of an HTML page
• The element contains meta information about the HTML page
• The element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
• The element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• The element defines a large heading
• The

  element defines a paragraph

What is an HTML Element?

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

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

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

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

HTML Page Structure

Below is a visualization of an HTML page structure:

This is a heading

This is another paragraph.

Note: The content inside the section will be displayed in a browser. The content inside the element will be shown in the browser’s title bar or in the page’s tab.

HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

Year	Version
1989	Tim Berners-Lee invented www
1991	Tim Berners-Lee invented HTML
1993	Dave Raggett drafted HTML+
1995	HTML Working Group defined HTML 2.0
1997	W3C Recommendation: HTML 3.2
1999	W3C Recommendation: HTML 4.01
2000	W3C Recommendation: XHTML 1.0
2008	WHATWG HTML5 First Public Draft
2012	WHATWG HTML5 Living Standard
2014	W3C Recommendation: HTML5
2016	W3C Candidate Recommendation: HTML 5.1
2017	W3C Recommendation: HTML5.1 2nd Edition
2017	W3C Recommendation: HTML5.2

This tutorial follows the latest HTML5 standard.

Источник

Using an HTML Skeleton

A Skeleton is the supporting framework of an organism.

It is typically made out of something hard, to protect a more vulnerable body.

Every Web developer should have an HTML skeleton.

It should be kept in his pocket, and used for every job:

Example

Click on the «Try it Yourself» button to see how it works!

Try to change the text «This is a Heading» to «This is my Wedding».

Congratulations! Now you know how to edit HTML.

HTML Skeleton Explained

The DOCTYPE must be present. It informs the browser that this is an HTML document:

An html start tag and an html end tag define the start and end of an HTML document.

A meta charset tag defines the character set (UTF-8):

The HTML page is missing head tags. Head tags are not needed in HTML.

In HTML, everything before the body tag is considered a part of the head.

The HTML standard requires a proper page title:

A meta viewport tag makes the page look good on all screen sizes (Laptop, Mobile):

The link tag links to a stylesheet:

Start tag and end tag surround future CSS styling:

The script tag links to a script:

Start tag and end tag surround the visible body of the HTML document:

Image tags define HTML images:

Make it a habit to «pack» HTML sections in div elements.

Prepare yourself for giving each section a class name:

Heading tags define HTML headings:

This is a Heading

Paragraph tags define HTML paragraps:

This is a paragraph.

This is another paragraph.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник