HTML Elements

An HTML element usually consists of a start tag and an end tag where the content is placed in between those two. Everything starting from the start tag to the end of the end tag is considered as HTML Element.

<tagname>Content goes here...</tagname>

HTML elements with no content are called empty elements. These elements do not have an end tag, such as the <br> element which indicates a line break.

Nested HTML Elements

HTML elements can hold other HTML elements which is termed as nested HTML elements. All HTML documents consist of nested HTML elements.

<html>
<body>

<h1>Hello World</h1>
<p>This is my first HTML webpage.</p>

</body>
</html>

The <html> element defines the whole document. It has a start tag <html> and an end tag </html>. The content of this element is another HTML element ie. the <body></body>.

The <body> element defines the document body. It also has a start tag <body> and an end tag </body>. The element content is two other HTML elements (<h1> and <p>).

The <h1> element defines a heading. It has a start tag <h1> and an end tag </h1>. The element content is: Hello World.

The <p> element defines a paragraph. It has a start tag <p> and an end tag </p>. The element content is: This is my first HTML webpage.

Some HTML elements will display correctly in the browsers even if you forget the end tag but most of the times, it'll render unexpected results. So, it's always safe to place the end tags.

Empty HTML Elements

HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag which defines a line break

<p>This is a paragraph <br> with a line break.</p>

Empty elements can be closed in the opening tag itself like <br />. Alhough, HTML5 does not require empty elements to be closed, you must close all HTML elements properly, if you want stricter HTML validation or want to make your document readable by XML parsers.

Lowercase

HTML tags are not case sensitive which means <HTML> means the same as <html>. The HTML5 standard does not require lowercase tags but HTML validator recommends use of lowercase in HTML whereas XHTML documents must strictly follow the lowercase rules.

The HTML <head> Element

The <head> element is placed between the <html> tag and the <body> tag. It is a container for metadata. It defines the document title, character set, styles, links, scripts as well as other meta information. These information are not displayed in webpages.

<!DOCTYPE html>
<html>

<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>

.....

</body>
</html>

How to view HTML source code of a webpage?

As a beginner, you would always like to look at the HTML codes of other websites and try to understand how they are written. Though you might not have reached the level where you could understand all those codes, still, did you know that you can view HTML source code of any webpage you want to?

Here' how you can do that.

1. Right click anywhere inside an HTML page and select View Page Source or View Source. It will open a new window containing the HTML source code of that web page.
2. Alternatively, you can type view-source: in front of the webpage URL and make it load. This will be helpful on webpages on which right click is disabled. Copy and paste the entire url path given below in your browser and see what happens.
view-source:https://www.webtrickshome.com/

Inspect an HTML Element

You can also check the HTML and CSS content of any section in a web page. Simply, right click on any content within the page and select Inspect or Inspect Element to view the HTML elements and their CSS properties. You can also edit the HTML and CSS content from the panel that appears which will be reset once the page is reloaded.

0 Like 0 Dislike 0 Comment Share Tweet