Ved's Blog

HTML Elements

Ved Dadhich's photo
Ved Dadhich
ยท

2 min read

Table of contents

We know that HTML file is made of elements. These elements helps to creating webpages and define content on these web pages. A HTML element is created through a start tag and close tag. For example <tagname>Content</tagname> .Here are some tags which don't have close tag,this type of tags are known as self closing tags. So we can say that an element is a collection of start tag, attributes, end tag, content between them.

Example-

<h1>Hello World</h1>

<html>
<head>
<title>HTML Elements</title>
</head>
<body>
     <h1>Hello World</h1>
     <p>How are you?</p>    
</body>
</html>

๐•๐จ๐ข๐ ๐„๐ฅ๐ž๐ฆ๐ž๐ง๐ญ๐ฌ

Some elements don't contain close tag and content in itself, this type of element are known as void elements.

Some void elements are <br>(for line break) and <hr>(for horizontal line)

๐๐ž๐ฌ๐ญ๐ž๐ ๐‡๐“๐Œ๐‹ ๐„๐ฅ๐ž๐ฆ๐ž๐ง๐ญ๐ฌ

Some elements contain another element in itself. These elements are nested elements.

Block level and Inline HTML elements

Here are two types of HTML elements which are following.

  1. Block Level Element

  2. Inline Element

Block Level Element

Main part of web page is strucutre through these elements.A block level element always start with a new line and take full width of the web page from left to right.

Here are some example of block level elements.

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.

 <html>  
    <head> 
        <title>HTML Block Elements</title> 
    </head>  
<body>  
    <div>This is division</div>   
    <p>This is a block level element</p>  
</body>  
</html>

Inline Elements

These elements does not start with a new line and also take required space only.These elements are used with another elements mostly.

Following are the example of inline elements.

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.

<!DOCTYPE html>  
<html>  
    <head>  
    </head>  
<body>  
    <a href="#">link</a>  
    <span>this is inline element</span>  
    <p>This will take width of text only</p>  
 </body>  
</html>
iwritecode
ย