What are HTML Elements and how many types of elements are there?

An HTML document is made up of many HTML elements. An HTML elements looks like this

html elements format

The element consists of a start tag, end tag and the content, which goes between the start tag and the end tag.

HTML Tags

A tag contains a tag-name enclosed in angle brackets (<). HTML has a set of predefined tag names. Each predefined tag-name has its own function. for example the ‘<h1>’ tag is to display headings while the ‘<p>’ tag is to display paragraphs. A HTML element  contains a start tag that marks the beginning of the content and a end tag that marks the end of the content.

Lets consider this example <h1>This is the Heading</h1>

Start tag-‘<h1>’ marks the beginning of the the content i.e the heading ‘This is the Heading’ and the

End tag-‘</h1>’ marks that the content/heading has finished.

So the following points are the key to writing HTML Elements.

  • The start tag is written with opening and closing angle brackets <tag-name>.
  • The end tag for the same elements is written with a slash(/) just before the tag name, </tag-name>
  • Content goes inside the start and the end tag.
  • All these tags are case insensitive. But the content inside is case sensitive. So the content inside <p>/<P> tag will be displayed as capital if you write the content in capital.

HTML Tag inside another Tag.

In HTML you can also write a tag inside the content of another tag, for instance if we want to display some bold text inside a paragraph, we will use the <b> tag (This tag is used to display bold text) inside the content of <p> tag. As follows

HTML Code:

Output:
This is a paragraph this will be shown as bold text, normal text starts again.

Void Elements

Not all elements need to have a start and end tag, some elements which are known as Void elements or the empty elements do not have a content , and hence they don’t need an end Tag.

Example of a void element is <br> which is used to break a line (generate a new line). <br> is usually used as a nested element inside another tag, mostly the <p> tag.

Void Elements can be written in two ways.

Simply as a start tag : <tag-name>

Self closing tag : <tag-name/>

Both of them are valid and will produce the same result but the first one is preferred.

HTML Code:

Output:

The br element creates a
new line and so does the
self closing version of it.

White space and new lines have no effect on HTML.

No matter how much white space you have between the content of a tag, it will be counted as 1 white space. The same goes with lines , if you create a new line in your HTML document that would not be shown in the output on a browser, the <br> tag can be  used to create a new line in the output.

HTML Code:

Output

Notice the no of spaces here and in the output.

 

HTML Code:

Output

No matter how many new lines You add in the HTML document the output will have no new line until you use the br tag.

CommentsLoad Comments