Thanush's Blog

HTML Elements

HTML Elements

Thanush's photo
Thanush
·

2 min read

Table of contents

An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a start tag <tag name>, close tag </tag name> and content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content between them.

  • Block-level element

  • Inline element

Block-level elements

  • These are the elements, which structure main part of web page, by dividing a page into coherent blocks.

  • A block-level element always start with new line and takes the full width of web page, from left to right.

  • These elements can contain block-level as well as inline 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>.

<!DOCTYPE html>  
<html>  
             <head>  
    </head>  
<body>  
    <div style="background-color: lightblue">This is first div</div>  
    <div style="background-color: lightgreen">This is second div</div>  
    <p style="background-color: pink">This is a block level element</p>  
</body>  
</html>

Inline elements

  • Inline elements are those elements, which differentiate the part of a given text and provide it a particular function.

  • These elements does not start with new line and take width as per requirement.

  • The Inline elements are mostly used with other 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="https://www.javatpoint.com/html-tutorial">Click on link</a>  
    <span style="background-color: lightblue">this is inline element</span>  
    <p>This will take width of text only</p>  
 </body>  
</html>

The basic elements of an HTML page are:

  • A text header, denoted using the <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags.

  • A paragraph, denoted using the <p> tag.

  • A horizontal ruler, denoted using the <hr> tag.

  • A link, denoted using the <a> (anchor) tag.

  • A list, denoted using the <ul> (unordered list), <ol> (ordered list) and <li> (list element) tags.

  • An image, denoted using the <img> tag

  • A divider, denoted using the <div> tag

  • A text span, denoted using the <span> tag

HAPPY LEARNING :)

HTML5CSS