HTML Elements

HTML elements contains starting tag content and closing tag, where the element name is preceded by a forward slash as shown below with few tags −

i) Opening tag: It is used to tell the browser where the content material starts.

ii) Closing tag: It is used to tell the browser where the content material ends.

iii) Content: It is the actual content material inside the opening and closing tag.

Start TagContentEnd Tag
<p>This is paragraph content.</p>
<h1>This is heading content.</h1>
<div>This is division content.</div>

EXAMPLE: In the below example <p> is a starting tag, </p> is an ending tag and it contains some content between the tags, which form an element.

<!DOCTYPE html>
<html>
    <head>
      <title>HTML Elements</title>
    </head>
<body>
    <h2>Welcome To Fullstackadda</h2> 
    <p>Hello</p>
</body>
</html>

Output:

There are two types of HTML elements:

Block-level elements: HTML Elements

  • These elements take up the full width of their parent container and create a new line after them.
  • <div>: This element is used to create a container for other elements, and it can be used to group related elements together. For example, <div id="header"> can be used to create a container for the header section of a web page.
  • <h1> to <h6>: These elements are used to create headings, with <h1> being the highest level heading and <h6> being the lowest. For example, <h1>Welcome to My Website</h1> can be used to create a main heading for a web page.
  • <p>: This element is used to create a paragraph of text. For example, <p>This is my first paragraph of text.</p>
  • <ul> and <ol>: These elements are used to create unordered and ordered lists, respectively. For example, <ul><li>item 1</li><li>item 2</li></ul> can be used to create an unordered list.
  • <blockquote>: This element is used to create a section that is quoted from another source. For example, <blockquote>Life is too short to waste time on things that don't matter</blockquote>

Here is an example of HTML code for a block element:

<div>
    <h1>Welcome to My Website</h1>
    <p>This is a sample paragraph.</p>
</div>

Inline elements:

  • These elements take up only as much width as necessary and do not create a new line after them. Examples include <span>, <a>, <img> and <em>.
  • <a>: This element is used to create hyperlinks that allow users to navigate between web pages. For example, <a href="https://www.example.com">Visit my website</a>
  • <img>: This element is used to embed images in a web page. For example, <img src="image.jpg" alt="image description">
  • <span>: This element is used to group a small part of the text to apply the css styles or javascript. For example, <p>This is my <span class="highlight">first</span> paragraph of text.</p>
  • <em> and <strong>: These elements are used to emphasize or give importance to some text. For example, <p>This is my <em>important</em> message</p>
  • <br>: This element is used to insert a line break in the text. For example, <p>This is the first line<br> This is the second line.</p>

Here is an example of HTML code for an inline element:

<p>This is a <span>sample</span> sentence.</p>

CLICK HERE to learn more about Block/Inline elements

HTML Elements
  1. HTML elements contains starting tag content and closing tag.
  2. Block level elements take up the full width of their parent container and create a new line after them
  3. Inline elements take up only as much width as necessary and do not create a new line after them.