Elements are those building blocks, which define the structure of an HTML page. Whatever we see on a web page is defined by the different elements of HTML. Elements decide the layout of a web page, its contents, the properties of the content and the position and behavior of every character that may or may not be displayed on the web page. Elements contain everything such as Headings, Paragraphs, Embedded Media, Sound, Images, Hyperlinks, Lists, Fonts and a variety of other structures that are used to build a web page. Each element in HTML can be defined using the Tags. Tags define the properties of the elements. To construct an element in a particular style we generally require four things:
A start tag
Any attributes and associated values of the start tag
The actual content which has to be displayed on the web page
End Tag
Most of the elements require all the four things mentioned above, but some of the elements require only a part of them. The use of attributes and associated values of the start tag is completely optional and it is used only when we want to add some extra effects for the characters. Some of the elements do not even require an End Tag. As you gain experience and in depth knowledge and expertise in designing HTML pages, you will get to know a large number of Elements some of which require all the tags and some, which do not.
HTML Elements are classified into two broad categories:
Block level Elements
Text level Elements or Inline Elements
Block level Elements are responsible for the construction of an HTML page as a whole such as Headings, Paragraphs etc. These elements contain several Text Level/ Inline elements and other Block level elements. Inline elements are contained under the block level elements and are used to format small chunks of data. For e.g. Images and Hyperlinks.
Various Block level and Text level elements can be used together to format the data/text to be displayed on the web page. Although you can use more than one inline elements in any order but it is not recommended. As per the standards the elements must be closed in the reverse order. For eg.
<B><U><I> Introduction to Elements</I></U></B>
The above order is correct. The elements B, U and I are closed in the reverse order i.e. last In first Out. Below is an example of incorrect style of defining the elements.
<B><U><I> HTML is good. </U></B></I>
The elements can be used more complexly according to ones need. Several different elements can be nested within each other if required because there is no maximum limit for using the elements. Below is a comprehensive example of nested elements. Just note their starting and ending order. The first one has been closed in the last.
<Body bgcolor=red><P><B>Welcome to HTML.</B> <I> For more info</I><a href=”html.com”>click here </a></P></body>
In this way the elements can take a form of different hierarchies and sub-hierarchies depending upon the structure of your web page.