HTML ELEMENTS
In HTML, elements are written with a start tag and an end tag, with content in between. Paired tags in HTML are elements.
<p> this is an example of an element</p>
ROOT TAG
The first tag of the document i.e., <html> </html> is called root tag as all other html elements are contained inside it.
For example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>This is a paragraph explaining html elements</p>
<h5>lets get started</h5>
</body>
</html>
NESTED ELEMENTS
The above code is also an example of nested elements, i.e., an element within an element where <html> is the root tag.
<head> and <body> elements are nested inside it which are closed off by </head>, </body> and </html>.
These elements are document structure elements.
<p> and <h5> are contained within body, for content to be displayed and are some examples of block level elements i.e. they always starts on a new line and stretch out to the left and right as far as they can.
VOID ELEMENTS
However, not all elements require an end tag or a start tag to be present. A void element’s behavior is predefined and it cannot contain other elements or content inside it. A typical example of a void element is <br> tag which is used for a line break.
BLOCK ELEMENTS
Block-level elements are those, that have a rectangular structure. These elements will span the entire width of its parent element by default, and hence, will not allow any other element to occupy the same horizontal space.
It is made up of several parts like content, padding, border and margin.
PRESENTATION ELEMENTS
These come under block-level elements.
For presentation purposes, tags like <b> </b>, <i> </i>, <u> </u> and <p> </p> etc., are used to make the content easy to read and appealing to eyes as well.
<b> </b> is bold tag which makes the content within bold.
<i> </i> is italics tags which converts the font style of the content into italics.
<u> </u> is an underline tag that is used to underline the text contained inside it.
<p> </p> is the paragraph tag which is used to write paragraph text in a webpage.
For example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>This is a paragraph using<br>
and <b>bold tag</b>
in it.
<u> Here we use underline </u> and
<i>italics tag</i>
for better understanding.</p>
</body>
</html>
Output:
This is a paragraph using
and bold tag
in it.
Here we use underline and
italics tag
for better understanding.
INLINE ELEMENTS
An inline element is the opposite of the block-level element. It does not start on a new line and takes up only the necessary width.
ANCHOR TAG
<a> </a> anchor tag is an example of inline element which is used to create hyperlinks in a webpage. Anything written between <a> </a> becomes a hyperlink and by clicking on it, navigation to a different webpage or image takes place.
The document to be navigated needs to be specified by using the href attribute.
For example:
<a href="file_name.html">click here</a>
Output:
"click here" becomes the hyperlink that will take the user to file_name.html webpage when clicked.