Python JavaScript HTML CSS C Java C# / .NET C++ TypeScript Dart

HTML Elements

Elements in an HTML file play a crucial role in the creation of web pages and the presentation of content within them. Typically, an HTML element comprises an opening tag <tag name>, a closing tag </tag name>, and the actual content placed within them. In essence, an element encompasses start tags, attributes, end tags, and the content enclosed between them.

Note: Some elements do not have end tags and content; these elements are termed empty elements, self-closing elements, or void elements.

Syntax

Example

<p> Hello world!!! </p>

Example

Example

<!DOCTYPE html>

<html>

<head>

    <title>WebPage</title>

</head>

<body>

   <h1>This is my first web page</h1>

    <h2> How it looks?</h2>

     <p>It looks Nice!!!!!</p>

</body>

</html>

Explanation

The content enclosed within the body tags is rendered and displayed on the webpage for users to see.

Void element

Void elements are HTML elements that do not require a closing tag or content, such as <br> or <img>. Such elements are known as Void elements or empty elements. These elements are also referred to as unpaired tags. Some void elements include:

  • ✅ <br> - Inserts a line break
  • ✅ <hr> - Adds a horizontal rule
  • ✅ <input>, <link>, and <img> - Provide specific functionalities without the need for content

Example

Example

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

Note: Even though browsers can close missing tags, this can cause various problems with page layouts. Always finish off every non-void element with an end tag.

Nested HTML Elements

HTML allows for nesting, enabling an element to be enclosed within another element. This feature allows elements to be positioned inside other elements, establishing a hierarchical structure that facilitates organization.

Example

Example

<!DOCTYPE html>

<html>

<head>

    <title>HTML Elements</title>

</head>

<body>

    <h1>GeeksforGeeks</h1>

    <p>Computer science portal</p>

</body>

</html>

Explanation

The <html> element is the root of an HTML document and contains all other elements, including <head> and <body>. The document's elements include an enclosure of <head> and <body> inside the <html>. Both the <h1> and <p> elements are inside <body>. Thanks to structured nesting, browsers will correctly display the page.

Block-level and Inline HTML elements

In HTML, elements are categorized into two groups for default display and styling purposes:

  • ✅ Block-level Element
  • ✅ Inline Element

    • Block-level Element

Web pages in HTML are constructed using fundamental components known as block-level elements. These elements structure the primary content on a webpage by dividing it into meaningful and structured segments. Typically, each block element occupies its own line and spans the full width of the page, regardless of the content's width. This leads to well-organized and aesthetically pleasing sections on your website.

They are flexible, as they are able to include different types of elements inside them. As a result, developers can place related content together inside small containers, for example, <div>, <section>, or <article>, and format them with inline elements.

Following are the block-level elements in HTML:

Element Description
<address> Gives information on how to contact the closest article or document body.
<article> Makes up a standalone piece of work, such as a blog post or article about news.
<aside> Shows information that is indirectly connected to the central content (like in sidebars).
<blockquote> States the text that you have taken from a different source.
<canvas> Makes it possible to create graphics on the go using scripting technologies, for example,JavaScript.
<dd> Details or explains what a term means in a description list.
<div> The <div> tag is a block-level container element used to group and style content using CSS. It is not inherently empty.
<dl> Details how the description list works, which is accompanied by <dt> and <dd>.
<dt> Puts a term or name into a description list.
<fieldset> It groups elements into a group and encloses them with a box.
<figcaption> Gives information about the contents of a <figure> in the form of a caption.
<figure> Creates a space for pictures, diagrams, or other items, which can have a caption when necessary.
<footer> Adds a footer to a section or page that usually has the author's information or copyright details.
<form> Outlines an HTML form that is used to get user input.
<h1>-<h6> Headings should be set from level 1 for the most significant points up to level 6 for the least significant ones.
<header> Shows short initial information, usually in the form of navigational tools.
<hr> Includes a horizontal rule or thematic break in what you're writing.
<li> Gives the markup for a list item when the list is being used with <ul>, <ol>, or <menu>.
<main> Explains the main subject of the document and what makes it special and central to the website.
<nav> Marks the section of links that can be used to navigate the website.
<noscript> Provides alternative content for people who aren't using JavaScript.
<ol> Categories data in a way that lists things in order.
<output> Refers to the end-product of a computation or action taken by the user.
<p> Describes how to set up a single paragraph of text.
<pre> It includes information about preformatted text, which is always displayed in a fixed-width font.
<section> Makes up a single group of similar content (for example, chapters or tabs).
<table> Creates a table for showing information in rows and columns.
<tfoot> All the groups are organized together in a table with footer content.
<ul> Creates a group of items that are not in any order (bulleted list).
<video> Insert video segments in the document.

Note: All these elements are described in later chapters.

Example

Example

<!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>

Output:

Explanation

In the previously shown demonstration, we employed the <div> element, which establishes a division within a webpage spanning the entire width of the page. Furthermore, we utilized the style property to format the HTML content, with the background color indicating its classification as a block-level component.

Inline elements

Inline elements are beneficial for emphasizing and adjusting specific portions of text without disrupting the overall layout. Unlike block-level elements, which start on a new line, inline elements seamlessly integrate with surrounding content and occupy only the necessary space. This feature enables the inclusion of styles, links, or interactive elements within paragraphs or other block-level elements.

They are applied along with block-level elements to make some parts of a web page stand out. For instance, elements such as <a>, <strong>, <em>, and <span> can be applied inside a paragraph to generate links, emphasize parts, or add styling without changing the rest of the text's structure. Because you have so much control, you can make your HTML documents more informative.

Following are the inline elements in HTML:

Element Description
<a> Allows you to give a hyperlink to another page, file, or location.
<abbr> It is an example of either an abbreviation or acronym, and it may come with a full explanation.
<acronym> (Outdated)Meant for acronyms but is now replaced with <abbr>.
<b> Bold text is simply used to help the text stand out and become noticeable.
<bdo> Changes the current direction of text writing.
<big> (Deprecated)Makes the font bigger on all text in the document.
<br> Puts a single-line break into the text.
<button> Represents a button that users can click on.
<cite> It describes the title of each reading, e.g., book, article, or play, which should be described in the citation.
<code> Shows the source code in a block using a monospaced font.
<dfn> Shows the main meaning of a term.
<em> Stresses the highlighted words by making them appear in italics.
<i> Marks the text with italics to emphasize a special voice or piece of vocabulary.
<img> Adds an image within the document.
<input> Makes an element where users can interact (for example, a textbox, radio, or checkbox).
<kbd> Here, user input is presented like this, in monospaced text.
<label> Gives an <input> element a certain label.
<map> Describes an image map employed with <area> tags to form hotspots on a picture.
<object> Includes elements like images, sound, videos, or various applications.
<q> Meant for short quotations that are included in the text.
<samp> Sample text shows the output from a running computer software.
<script> It has code written in JavaScript or includes a reference to an external JavaScript code file.
<select> Shows how to set up a drop-down list inside a form.
<small> Reduces the size of the text that appears on the screen.
<span> An element to store inline content and generally used along with CSS.
<strong> Reflects high significance and is displayed in bold style.
<sub> It appears as text below the usual line.
<sup> It shows text in a position above the normal line.
<textarea> Gives users the ability to fill a form across multiple text fields.
<time> Holds a specialized time or a date and time value.
<tt> (Deprecated)An alternative way to write text in a monospaced style.
<var> In a mathematical or programming expression, it determines the meaning of a variable.

Note: All these elements are described in later chapters.

Example

Example

<!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>

Output:

Explanation

In the above example, we have used the <div> tag, which defines a section in a web page and takes the full width of the page. Also, we have used the style attribute, which is used to style the HTML content, and the background color shows that it's a block-level element.

Example

Example

<!DOCTYPE html>

<html>

    <head>

	</head>

<body>

    <a href="https://logic-practice.com/html-tutorial">Click on link</a>

    <span style="background-color: lightblue">this is inline element</span>

    <p>This will take the width of the text only</p>  

 </body>

</html>

Output:

Below are some of the primary components frequently utilized in HTML:

Start tag Content End tag Description
<h1> ...... <h6> These are headings of HTML </h1> ..... </h6> These elements are used to provide the headings of page.
<p> This is the paragraph </p> This element is used to display a content in form of paragraph.
<div> This is div section </div> This element is used to provide a section in web page.
<br> N/A This element is used to provide a line break. (void element)
<hr> N/A This element is used to provide a horizontal line. (void element)

Best Practices

  • ✅ Be sure to close all the tags that have data inside them. Close tags on your own rather than leaving it to any automatic correction from the browser.
  • ✅ Tags should always be in lowercase. The lowercase letters in HTML make the code look better and are compatible with XHTML .
  • ✅ Pay attention to nesting. An incorrectly built layout can ruin your web pages and make them unrenderable.

    • Conclusion

HTML offers numerous elements that help organize and show content online. Parts of the page such as <div>, <section>, <article>, and headings <h1> to <h6> set its structure and levels, and <p>, <ul>, <table>, and <form> help group text and interactive stuff. Without disturbing the text's overall rhythm, these elements such as <a>, <span>, <img>, <strong>, and <em> are inserted inside these blocks.

Tags such as <br>, <hr>, and <input> take care of specific tasks on their own, so they do not require a closing tag. When combined, these features are the essential parts that help developers make ordered, useful, and accessible web pages using HTML. It is important to know how to work with block-level and inline elements to design responsive and well-formed websites.

Input Required

This code uses input(). Please provide values below: