HTML Elements
The HTML element is an individual component of an HTML document and it represents meaning.
Most HTML elements are written with a start tag(<tag name>) and an end tag(</tag name>), with content in between. Elements can also contain attributes that define additional information or properties.
Syntax:
Example:
<!DOCTYPE html> <html> <head> <title>WebPage</title> </head> <body> <h1>my first web page</h1> <h2>my second web page </h2> <p>enter content...</p> </body> </html>
OUTPUT:
NOTE: Some elements don’t require the end tag or closing tag to be present. These are referred to as void elements, self-closing elements, or void elements.
Empty HTML Elements:
Empty elements (self-closing or void elements) are not container tags, that means, you can not write <hr>some content</hr> or <br>some content</br>.
Example:
<!DOCTYPE html> <html> <body> <p>This is a <br> paragraph with a line break.</p> </body> </html>
OUTPUT:
Nested HTML Elements:
- HTML can be nested, which means an element can contain another element.
- All HTML documents consist of nested HTML elements.
Example:
<!DOCTYPE html> <html lang="en"> <head> <title>Nesting HTML Elements</title> </head> <body> <p>Here is some <b>bold</b> text.</p> <p>Here is some <em>emphasized</em> text.</p> <p>Here is some <mark>highlighted</mark> text.</p> </body> </html>
OUTPUT:
HTML Elements Types:
HTML elements are divided into two categories:
- Block-level element
- Inline element
Block-level element:
A block-level element always starts with a new line and takes the full width of the web page, from left to right.
block-level elements in HTML:
<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>.
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:
Inline elements:
These elements do not start with a new line and take width as per requirement.
Inline elements are:
<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>.
Example:
<!DOCTYPE html> <html> <head> </head> <body> <a href="https://www.i2tutorials.com/">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>
OUTPUT:
Some main elements used in HTML: