HTML language is the starting phase in the web development domain yet the most crucial phase. To begin your career as a front-end developer, you must have a thorough grasp of it. HTML is mild to comprehend, and the principles of HTML can be grasped in a small outlay of time.
Today, we’ll discuss the most important and basic topic, i.e., Elements in HTML, which is undoubtedly the backbone of HTML language.
Now, let’s get started with Elements in HTML:
Elements in HTML
Elements make up an HTML file. Isn’t it cool? These elements are in charge of producing web pages and defining the content on those pages. A start tag <tag name>, a closing tag </tag name>, and the content added between them make up an element in HTML.
Technically, an element is a collection of start tags, attributes, end tags, and content between them.
Note: Some elements don’t have a closing tag and the content; they are considered empty, self-closing, or void elements.
For example:
<!--> Empty or void elements with neither closing tag nor no content. </!--> <input type="text"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br> <hr>
As previously said, elements construct an HTML page. Let us take one example to grasp this statement further:
<!DOCTYPE html> <html> <head> <title>HTML Elements testing</title> </head> <body> <h1>This is the Heading element</h1> <h2>This is also an Heading element</h2> <p>This is a paragraph element</p> </body> </html>
Output:
All the content written between body elements is viewable on the web page.
Now that you understand what elements in HTML are, let's dig a little deeper:
Nested HTML Elements
As the name implies, HTML elements can be nested, meaning an element can include additional elements within it. Every HTML document is made up of nested HTML elements. In the previous examples, we only utilized the Nested elements.
Let’s take one more example:
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph</p> </body> </html>
The root element is the <html> element, which defines the whole HTML document.
It has an <html> start tag and an </html> end tag.
Then there is a <body> element inside the <html> element.
<body> <h1>My First Heading</h1> <p>My first paragraph</p> </body>
The <body> element defines the body of the document. It also has a start tag <body> and end tag </body>.
Inside the body element there are two other elements: <h1> element and the <p> element.
<h1>My First Heading</h1> <p>My first paragraph.</p>
The document will look like:
Some more examples of nested elements:
<p>I love <b>India</b><hr> I am <em> proud </em> of its rich and varied heritage!</p>
<div> <p> Hi I am in <b>div</b></p> </div>
Output:
Types of Elements in HTML
There are two types of Elements in HTML: Block-level Elements and Inline Elements.
Depending on the type of element, every HTML element has a default display value.
There are two types of choices: block and inline.
Let us go over them one by one:
Block-level elements
A Block-level element takes up the whole horizontal space of its parent element (container) as well as the vertical space equal to the height of its contents, resulting in the formation of a "block."
Browsers often display the block-level element with a newline before and after it.
A block-level element always begins on a new line and occupies the entire available width (stretches out to the left and right as far as it can).
For example:
<!DOCTYPE html> <html> <body> <div style="border: 3px solid black">Hello Ninjas</div> <p>The DIV element is a block element, and will always start on a new line and take up the full width available (stretches out to the left and right as far as it can).</p> </body> </html>
Output:
Below is the list of all Block-level elements in HTML:
<address> -> Contact information. <article> -> Article content. <aside> -> Aside content. <blockquote> -> Long ("block") quotation. <details> -> Disclosure widget. <dialog> -> Dialog box. <dd> -> Describes a term in a description list. <div> -> Document division. <dl> -> Description list. <dt> -> Description list term. <fieldset> -> Fieldset label. <figcaption> -> Figure caption. <figure> -> Groups media content with a caption. <footer> -> Section orpage footer. <form> -> Input form. <h1>, <h2>, <h3>, <h4>, <h5>, <h6> -> Heading levels 1-6. <header> -> Section orpage header. <hgroup> -> Groups header information. <hr> -> Horizontal rule (dividing line). <li> -> List item. <main> -> Contains the central content unique to this document. <nav> -> Contains navigation links. <ol> -> Ordered list. <p> -> Paragraph. <pre> -> Preformatted text. <section> -> Section of a web page. <table> -> Table. <ul> -> Unordered list.
Inline elements
Inline elements simply take up the space defined by the tags that define the element rather than interrupting the flow of the content.
An inline element does not begin on a new line and only takes up as much space as is required.
An example of an inline element is an anchor (or link) tag <a></a>. You can put several links in a row, and they will display in a line.
Consider the following example, which shows how to use an inline element:
<!DOCTYPE html> <html> <body> <p>If we want to use just a single word as an anchor, we wrap just that one <a href ="https://www.codingninjas.com/">word</a> in anchor tags.</p> </body> </html>
Output:
Now let’s compare Block-level elements and Inline elements with the help of an example:
Example 1: Using the Inline elements
<!DOCTYPE html> <html> <body> <p> This is an example of <span style="background-color:yellow;">Inline element</span> using span tag.</p> </body> </html>
Output:
Example 2: Using the block-level elements
<!DOCTYPE html> <html> <body> <p> This is an example of <div style="background-color:yellow;">Block-level element</div> using div tag.</p> </body> </html>
Output:
Do you see the distinction? The <div> element completely transforms the arrangement of the text, dividing it into three sections: the text before the <div>, the text inside the <div>, and the text outside the </div>.
This is pretty much clear with the above example of how block-level and inline elements work in HTML.
Following are the possible inline elements:
<a> -> Anchor tag used to link the URL <abbr> -> abbreviation tag <acronym> -> acronym tag <audio> (if it has visible controls) -> embed sound files into a web page <b> -> Bring Attention To element <bdi> -> The Bidirectional Isolate element <bdo> -> The Bi-Directional Override <big> -> makes the one size bigger font in the HTML document <br> -> The break tag <button> -> represents a clickable button <canvas> -> used to draw graphics <cite> -> defines the title of a creative work <code> -> used to define a piece of computer code <em> -> marks text that has stress emphasis <embed> -> defines a container for an external resource <i> -> The content inside is typically displayed in italic <iframe> -> specifies an inline frame <img> -> Image tag <input> -> Used to take the input from the user <label> -> defines a label for several elements <map> -> used to define an image map <mark> -> used to highlight the part of the textin a paragraph <meter> -> defines a scalar measurement within a known range, or a fractional value <noscript> -> used to display the alternative content for non-supporting script browsers. <q> -> defines a short quotation <ruby> -> specifies a ruby annotation. <s> -> specifies text that is no longer correct, accurate or relevant <samp> -> used to define sample output from a computer program <script> -> used to embed a client-side script (JavaScript). <select> -> used to create a drop-down list <slot> -> defines a slot, typically in a shadow tree <small> -> defines smaller text (like copyright and other side-comments). <span> -> used to mark up a part of a textor a part of a document. <strong> -> used to bold the text <sub> -> used to add a subscript text to the HTML document <sup> -> defines superscript textin an HTML document <svg> -> ontainer for SVG graphics <textarea> -> defines a multi-line text input control <time> -> defines a specific time (or datetime) <var> -> used to define a variable in programming orin a mathematical expression. <video> -> used to embed video content in a document
Frequently asked questions
Q1. What are HTML elements?
Ans. A start tag, some content, and an end tag define an HTML element.
Q2. What is the purpose of elements in HTML?
Ans. HTML, or HyperText Markup Language, generates Web pages and instructs browsers on how to display them. HTML is made up of elements, tags, and attributes that work together to identify document portions and instruct browsers on how to display them.
Q3. What are inline elements in HTML?
Ans. Inline elements are displayed in a line. They do not push the text after them to a new line. An example of an inline element is an anchor (or link). You can arrange many links in a row, and they will be displayed in a line.
Q4. Why do we need to close the tag in HTML?
Ans. An opening tag begins a section of page content, and a closing tag ends it. For example, to markup a section of a chunk as a paragraph, you would open the paragraph with an opening paragraph tag <p> and close it with a closing paragraph tag </p> (closing tags always precede the element with a /).
Key takeaways
To summarise the session, we’ve discussed what elements in HTML are along with their respective types. Regardless of their sufficiency, Block Elements take up the whole width as much as possible, whereas the inline elements are restricted with the provided dimensions. The first line of an inline element does not begin on a new line. The first element in a block is always a line. Other inline elements can lie behind inline elements.
Don't stop there, Ninja; we have many great articles that can help you take down the big firms.
117+ registered 