HTML Basic Elements

The language of the web is Hypertext Markup Language (HTML), in which elements dictate the formatting and style of your content. HTML elements make up the downloaded coding that you see when you visit a web page in your browser (such as Internet Explorer, Firefox, or Safari). Here are some fundamental elements to get you started on creating a web page in HTML.

The basic elements of an HTML page are:

A text header denoted using the tags.<h1><h2><h3><h4><h5><h6>
A paragraph denoted using the tag.<p>
A horizontal ruler denoted using the tag.<hr>
A link denoted using the (anchor)tag.<a>
A list denoted using the unordered list, ordered list, and list element tags.<ul> <ol> <li>
An image denoted using the tag.<img>
A divider denoted using the tag.<div>
A text span denoted using the tag.<span>

The next few pages will give an overview of these basic HTML elements.

Each element can also have attributes – each element has a different set of attributes relevant to the element. There are a few global elements, the most common of them are:

id – Denotes the unique ID of an element on a page. Used for locating elements by using links, JavaScript, and more.
class – Denotes the CSS class of an element. Explained in the CSS Basics tutorial.
style – Denotes the CSS styles to apply to an element. Explained in the CSS Basics tutorial.
data-x attributes– A general prefix for attributes that store raw information for programmatic purposes. Explained in detail in the Data Attributes section.

Text headers and paragraphs

There are 6 different types of text header you can choose from, h1 being the most heading with the largest text, and h6 being the most inner heading with the smallest text. In general, you should have only one h1 tag with a page, since it should be the primary description of the HTML page.

Start Tag	Content	End Tag
<p>	This is paragraph content.	</p>
<h1>	This is heading content.	</h1>
<div>	This is division content.	</div>

So here <p>….</p> is an HTML element, <h1>…</h1> is another HTML element. There are some HTML elements which don’t need to be closed, such as <img…/>, <hr /> and <br /> elements. These are known as void elements.

HTML documents consist of a tree of these elements and they specify how HTML documents should be built, and what kind of content should be placed in what part of an HTML document.

HTML Tag vs. Element

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag.

For example, <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element.

Nested HTML Elements

It is very much allowed to keep one HTML element inside another HTML element −

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Nested Elements Example</title>
   </head>
	
   <body>
      <h1>This is <i>italic</i> heading</h1>
      <p>This is <u>underlined</u> paragraph</p>
   </body>
	
</html>


This will display the following result: