HTML Element
Important Points
- HTML elements are the basic parts that organize and display content on a browser.
- Each element consists of tags enclosed within angle brackets ("<" and ">").
- HTML elements are split into two categories: block-level and inline.
- Block-level elements begin on a new line and expand to occupy the entire available width within their containing element.
- Inline elements do not create new lines and It only take up the space defined by their tags.
What is HTML Element?
HTML elements are like the bricks of web pages, forming the basic parts that organize and display content on a browser. Eeach element consists of tags enclosed within angle brackets ("<" and ">") and includes an opening tag, content and sometimes a closing tag. These elements perform various functions such as styling text, embedding media, creating hyperlinks and managing webpage layout.
Explanation for Given Example
|
|
<p> is the opening tag, indicating the start of a paragraph element |
| is an attribute specifying the alignment of the paragraph content to the center. | |
| is the content of the paragraph. | |
| is the closing tag, marking the end of the paragraph element. |
Overview of HTML Elements
HTML elements are divided into two categories: block-level and inline. Each category serves distinct functions that are necessary for effective web design. Below are the different categories of HTML elements and their significance in web development.
Block Level Elements
Block-level elements in HTML typically begin on a new line and expand to occupy the entire available width within their containing element. These elements play an important role in organizing and structuring content on web pages, enabling the delineation of separate content sections. Block-level elements can contain other block-level elements, inline elements, or a combination of both.
Identifying Block-Level Elements:
Block-level elements can be identified based on their behavior and default rendering in a web browser. Here are some key characteristics to look for:
- New Line Start : Block-Level elements usually start on a new line, reating visual separation from preceding content.
- Full Width : They typically extend horizontally to fill the entire width of their containing element, unless otherwise specified with CSS styling.
- Vertical Stacking : Block-level elements stack vertically, creating a hierarchical structure.
<div>
<h1>Welcome to Code Junction</h1>
<p>Learn to code with us</p>
</div>
<div>
<h2>Why Choose Code Junction?</h2>
<ul>
<li>Expert Tutorials</li>
<li>Interactive Learning</li>
</ul>
</div>
<div>
<h2>Contact Us</h2>
<p>Email: info@codejn.com</p>
</div>
This HTML code creates a simple webpage structure for "Code Junction" with three distinct sections: welcome message, reasons to choose the platform, and contact information. Each section is enclosed within a <div> element for structure. The use of heading tags (<h1>, <h2>) and list elements (<ul>, <li>) improves readability and clarity of content.
Block-Level Elements List
| <div> | Used as a generic container for grouping content. |
| <p> | Represents a paragraph of text |
| <h1> to <h6> | Headings of varying levels (from highest to lowest importance) |
| <header> | Denotes the header area of a webpage |
| <footer> | Denotes the footer area of a webpage |
| <nav> | Marks a section containing navigation links. |
| <section> | To group together related elements |
| <article> | Represents a self-contained piece of content. |
| <aside> | Contains content related to the surrounding content, such as sidebars |
| <ul> | Creates an unorder list. |
| <ol> | Create an ordered list |
| <li> | Represents an item in a list (<ul> or <ol>). |
| <blockquote> | Indicates a block quotation from another source. |
| <pre> | Preserves whitespace formatting, such as code snippets. |
| <hr> | Creates a horizontal rule (line) to separate content. |
Inline Elements
Inline elements in HTML do not initiate new lines and only take up the space defined by their tags.
Identifying Inline Elements:
Inline elements can be identified based on their behavior and default rendering in a web browser. Here are some key characteristics to look for:
- No Line Breaks : Inline elements do not start on a new line but rather continue within the same line as the surrounding text or other inline elements.
- Partial Width : They occupy only the space necessary to contain their content, rather than stretching to fill the entire width of their containing element.
- Horizontal Arrangement : Inline elements flow horizontally within text or inline content, allowing multiple elements to appear side by side.
Welcome to <strong>Code Junction</strong>,Visit Code Junction for learning <a href="https://codejn.com/">web development</a> In above code it has multiple tags still output will be in single line because of inline tags.
Inline Elements List
| <a> | Creates hyperlinks to other web pagse or resources. |
| <abbr> | Defines an abbreviation or acronym, often with a title attribute of expanded text |
| <b> | Represents text in bold font weight |
| <cite> | Specifies the title of a creative work, such as book or movie. |
| <code> | Displays computer code snippets, typically in a monospace font for readability. |
| <em> | Emphasizes text by rendering it in italic font style. |
| <i> | Represents text in italic font style. |
| <img> | Insert images into the webpage |
| <input> | Create form controls, such as text fields. |
| <span> | A generic inline container used for styling or scripting purposes, without semantic meaning. |
| <strong> | Renders text in a strong font weight, providing strong importance or emphasis. |
| <sub> | Specifies subscripted text. |
| <sup> | Specifies superscripted text. |
| <time> | Represents a specific time or date |
| <u> | Render text with an underline |
Semantic Elements
In HTML, semantic elements provide meaning to the content they contain, making it easier for both browsers and developers to understand the structure and purpose of a webpage. Here's an overview of semantic HTML elements.
<header><header> defines introductory content at the top of a webpage, often containing logos, navigation menus or headings.
<header>
<h1>Code Junction</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<footer> contains footer information at the bottom of a webpage, such as copyright notices, contact information, or navigation links
<footer>
<p>© 2024 Code Junction. All rights reserved.</p>
</footer> Form Elements
In HTML, form elements provide meaning and structure to forms. In forms user can input data, make selections, and submit information to the server. We use form elements to data collection, User Interation, User Feedback, Authentication and Authoriztion , Data Submission, E-Commerce transaction, Search and filter, Contact forms.
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Submit</button>
</form> Multimedia Elements
In HTML, multimedia elements are used to embed various types of media content, such as images, videos, and audio files, into webpages. We use multimedia elements to: Visual content, Rich media experience, Interactive features, Enhanced Communication, Accessibility, Marketing and Promotion, Entertainment and Engagement
<img src="nature.jpg" alt="Example Image" width="300" height="200">
<!-- Video -->
<video width="400" controls>
<source src="example.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Audio -->
<audio controls>
<source src="example.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio> Deprecated Elements
Deprecated HTML elements are those that were once part of the HTML specification but are no longer recommended for user due to various reasons such as lack of support, accessibility concerns, or better alternatives available. Here are some deprecated HTML elements.
| <font> | <font> tag was used to specify the font face, size and color of text within a webpage. |
| <center> | <center> tag was used to horizontally center-align content within its parent element. |
| <strike> | <strike> tag was used to strike through text, indicating that it is no longer relevant or valid. |
| <frame>, <frameset>, <noframes> | These elements were used to create frames-based layout. |
| <acronym> | <acronym> element was used to define an acronym,, providing a tooltip with the full expansion of acronym on hover. |
| <applet> | <applet> was used to embed java applets into webpages. |
Void Elements
Void elements in HTML are those that do not require a closing tag and do not have any content between the opening and closing tags. These elements are self-contained and typically used for inserting standalone content or providing metadata within a document. It also called Empty Elements or Self-Closing Elements. Here are some tags of void elements in HTML:
| <img> | Embedes images into a webpage. |
| <br> | Insert a line break |
| <input> | Creates a form control |
| <hr> | Insert a horizontal rule (line) to seprate content. |
| <meta> | To provide metadata about the HTML document. |
| <link> | Links an external resource to the HTML document. |