Learn one of the most powerful programming languages in the world and become a rockstar developer.
An HTML element is an individual component of an HTML document. It represents semantics, or meaning. For example, the
title element represents the title of the document.
Most HTML elements are written with a start tag (or opening tag) and an end tag (or closing tag), with content in between. Elements can also contain attributes that defines its additional properties. For example, a paragraph, which is represented by the
p element, would be written as:
HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements.
This example contains four HTML elements:
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
<html> element defines the whole document.
It has a start tag <html> and an end tag </html>.
Inside the <html> element is the
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
<body> element defines the document body.
It has a start tag <body> and an end tag </body>.
Inside the <body> element is two other HTML elements:
<body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body>
<h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>.
The element content is: My First Heading.
<h1>My First Heading</h1>
<p> element defines a paragraph.
It has a start tag <p> and an end tag </p>.
The element content is: My First paragraph.
<p>My First paragraph</p>
Some HTML elements will display correctly, even if you forget the end tag:
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body>
Empty elements (also called self-closing or void elements) are not container tags — that means, you can not write
<hr>some content</hr> or
A typical example of an empty element, is the
<br> element, which represents a line break. Some other common empty elements are
<p>This paragraph contains <br> a line break.</p> <img src="images/sky.jpg" alt="Cloudy Sky"> <input type="text" name="username">
Comments are usually added with the purpose of making the source code easier to understand. It may help other developer (or you in the future when you edit the source code) to understand what you were trying to do with the HTML. Comments are not displayed in the browser.
An HTML comment begins with
<!--, and ends with
-->, as shown in the example below:
<!--This is an HTML comment-->
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demandslowercase for stricter document types like XHTML.