HTML elements are the building blocks of an HTML file, responsible for creating web pages and defining content within those pages. Each HTML element typically consists of a start tag <tag name>, an optional end tag </tag name>, and content inserted between them. Technically, an HTML element is a collection of:
Start Tag:Begins with <tag name> and denotes the start of the element.
Attributes: Optional additional information provided within the start tag, influencing the element's behavior or appearance.
End Tag: If required, concludes with </tag name> to mark the end of the element.
Content:The text, images, links, or other elements enclosed between the start and end tags.
<!DOCTYPE html>
<html>
<head>
<title>WebPage</title>
</head>
<body>
<h1>My first web page</h1>
<h2>How's it?</h2>
<p>Nice!!!!!</p>
</body>
</html>
Void elements, also known as empty elements or self-closing tags, do not require a closing tag because they do not contain any content. They are used to insert certain types of content into a webpage without additional markup. Examples of void elements in HTML include:
<br>: Represents a line break.
<hr>: Represents a horizontal rule (horizontal line).
These elements are considered void because they serve a specific purpose (like inserting a line break or horizontal line) and do not contain any nested content.
HTML allows elements to be nested within each other, meaning one element can contain another element. This capability allows for the creation of complex structures and layouts within web pages.
For the default display and styling purpose in HTML, all the elements are divided into two categories:
1.Block-level element
2.Inline element
Block-level elements in HTML structure the main content of a webpage by dividing it into coherent blocks. These elements typically start on a new line and span the full width of the webpage, from left to right. They can contain other block-level elements as well as inline elements.
Start on New Line: Always begins on a new line in the layout.
Full Width: Occupies the entire width available within its containing element.
Can Contain Other Elements: Can contain both block-level and inline elements.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>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color: red">First div</div>
<div style="background-color: pink">Second div</div>
<p style="background-color: green">block level element</p>
</body>
</html>
In contrast to block-level elements, inline elements do not start on a new line and typically occupy only the space bounded by the tags that define them. They are often used within block-level elements to format parts of the content without disrupting the flow of surrounding text.
Understanding the distinction between block-level and inline elements is crucial for effectively structuring and styling content within HTML documents, ensuring proper layout and presentation on web pages.
<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://waytocode.in/">Click me</a>
<span style="background-color:lightgreen">this is inline element</span>
</body>
</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. |
| <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> | This element is used to provide a line break. ( void element) | ||
| <hr> | This element is used to provide a horizontal line. (void element) |