Till now, we have learned about the basic structure of a webpage and the bricks of an HTML page.,i.e., Tags, Elements, and Attributes. In this article, we are going to discuss the various HTML elements. Elements are responsible for adding meaning to the whole structure of an HTML document.
The fact that every HTML element has a different display and structure associated with it by default, we have the following diversions. So HTML Elements can be of three types:
- Block Elements
- Inline Block Elements
- Empty Elements
Block HTML Elements
Block Elements in HTML displays an element that takes up the whole of the width available. They always start on a new line. They also have a top and a bottom margin, which appears as if a line break is used before and after the element.
Following is the list of commonly used block-level elements:
- <details>
- Contains additional information that can be hidden.
- <div>
- Divides the document or a section of it.
- <footer>
- Contains the page footer.
- <form>
- To make a HTML form with user inputs.
- <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
- HTML has 6 headings with <h1> being the largest with 2em size, and <h6> being the smallest with 0.67 em.
- <header>
- Contains the additional meta information about the document.
- <hr>
- To add a horizontal line break in the document.
- <li>
- To add list items into a list.
- <p>
- To define a paragraph in the HTML document.
- <table>
- To create an HTML table in the document.
<!DOCTYPE html>
<html>
<body>
<h1>H1 Heading</h1>
<hr/>
<p>A paragraph.</p>
</body>
</html>
Other block-level elements:
- <address>
- <article>
- <aside>
- <blockquote>
- <dialog>
- <dd>
- <dl>
- <dt>
- <fieldset>
- <figcaption>
- <figure>
- <main>
- <nav>
- <ol>
- <pre>
- <section>
- <ul>
Inline HTML Elements
Inline elements are the ones that take the only width in which they are surrounded. They can be used within a block-level element and need not start on a new line.
One can not use block elements inside an inline tag whereas an inline element is primarily used inside a block element.
Following is the list of most commonly used inline html elements:
- <a>
- Anchor tag which along with its attribute “href” is used to create hyperlink.
- <br>
- To add a line break in text.
- <button>
- To add a clickable button in the document.
- <em> or <i>
- To make the text italic.
- <iframe>
- To embed another HTML page into the document.
- <img>
- To insert an image into the document. It is used with its “src” attribute.
- <input>
- Provides an input field where user can enter data in a form.
- <label>
- It represents a visible caption for an item in a user interface.
- <mark>
- Highlights the text.
- <span>
- It is like a div, which is used to add a small container for the text to style it differently.
- <del> or <s> or <strike>
- To add strikethrough on some text.
- <strong> or <b>
- Used to make text bold.
- <sub>
- To add subscript text to an HTML document.
- <sup>
- To add superscript text to an HTML document.
- <textarea>
- It adds rows and columns to provide the space for text from user input within a form.
- <u>
- Underlines the text.
<!DOCTYPE html>
<html>
<body>
<h1><a href="www.techbit.in">H1 Heading</a></h1>
<hr/>
<p><em>A paragraph.</em></p>
<p>A <span style="color:red;">paragraph.</span></p>
</body>
</html>
Other inline elements:
- <abbr>
- <audio>
- <bdi>
- <bdo>
- <canvas>
- <site>
- <code>
- <data>
- <datalist>
- <dfn>
- <embed>
- <ins>
- <kbd>
- <map>
- <meter>
- <noscript>
- <object>
- <output>
- <picture>
- <progress>
- <q>
- <ruby>
- <samp>
- <script>
- <select>
- <slot>
- <small>
- <svg>
- <template>
- <time>
- <var>
- <video>
- <wbr>
Empty Elements
Empty HTML elements are the ones that are not enclosed by a closing/end tag. They are also known as self-closing tags.
Hello!<br>
I am good.However, it is a good practice to use an ending tag with these too. I have already covered more on empty elements here.
Hello!<br/>
I am good.So that was all about HTML Elements and all its types. I’ll continue the series of articles to make you learn everything about HTML. Please do share your feedback on how these articles are helping you. Comment down your query if any.
Other articles worth your time:
4 Comments
Aradhya · July 30, 2021 at 11:01 am
Useful content
Vaishali_Rastogi · July 30, 2021 at 11:02 am
Thank you 🙂
Abhishek · July 30, 2021 at 1:05 pm
Very informative.
Vaishali_Rastogi · August 3, 2021 at 5:32 am
Thank you.