The basic elements of an HTML page are:
- A text header, denoted using the
- A paragraph denoted using the
- A horizontal ruler denoted using the
- A link denoted using the
- A list, denoted using the
<ol>(ordered list) and
<li>(list element) tags.
- An image denoted using the
- A divider denoted using the
- A text span denoted using the
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:
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-xattributes – 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 −
<!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:
This is italic heading
This is underlined paragraph