Html Elements
HTML Elements
All HTML Documents are made up of HTML elements. An HTML element is everything written between the start tag and an end tag:
<Start tag> Element content here </End tag>
In the below example, the body element includes the <h1> tags, <p> tags and the main content: “This is first heading” & “This is a paragraph”.
Example
<body> <h1> This is first heading </h1> <p> This is a paragraph </p> </body>
| Start tag | Element content | End tag |
| <body> | <h1> This is first heading </h1> <p>This is a paragraph</p> | </body> |
| <h1> | This is first heading | </h1> |
| <p> | This is a paragraph | </p> |
Nested HTML Elements
HTML documents consist of nested HTML elements, this means that elements can contain other elements. In an example below, there are five HTML elements ( <html>, <head>, <body>, <p> and <h1>)
Example
<html> <head> </head> <body> <h1> First heading </h1> <p> First paragraph </p> </body> <html>
Explanation
<html> element defines the whole HTML document. It has a start tag <html> and an end tag </html>.
Inside an <html> element there is a <head> element.
<head> element contains all the non-visual elements that helps to make the page work. You can read in depth article about <head> element here.
Then, inside an <head> element there is a <body> element.
<body> <h1> first heading </h1. <p> first paragraph </p> </body>
<body element has a start tag <body> and an end tag </body>. Between these two tags we can add the main content of our web page, and yes we can also say that <body> element defines the document’s body.
Here, inside the <body> element we have two other elements; <h1> and <p>.
<h1> First heading </h1> <p> First paragraph </p>
The element <h1> defines a heading. it has a start tag <h1> and an end tag </h1>.
The element <p> defines a paragraph. It has a start tag <p> and an end tag </p>.
Can we Skip the End Tag
Some HTML elements will display correctly, even if didn’t put an end tag(closing tag). However, sometimes unexpected results and errors may occur.
Some HTML elements like <br/> (which is used to break the line as shown in the below example) did not have end tags.
Example
<p> This is a paragraph </p> <p> This is also <br/> a paragraph </p>
Output
| This is a paragraph |
| This is also a paragraph |
As you can see here the <br/> tag breaks the line.
Related Posts
Text Formatting and Attributes
16 thoughts on “HTML Elements – crus4”