An HTML document’s elements serve as its building blocks. The browser interprets HTML documents based on the element types that are added to them. As a result, an HTML document that includes all of the properties indicated by the elements embedded within it is displayed. In other words, an aspect tells the web browser how to display the HTML content on the user’s screen. Here’s an Better Understanding of Elements in HTML5:
The structure of an HTML element consists of three basic components: an opening/starting tag, a closing/ending tag, and the element’s content encapsulated between the opening and closing tags, as seen in the following code snippet:
<p>
Paragraph one
</p>
In this preceding code:
- <p> – The opening tag of the paragraph element.
- </p> – The closing tag of the paragraph element.
- Paragraph one – The content is enclosed between the opening and closing tags.
The opening tags are enclosed by opening angle bracket (<) and closing angle bracket (>) marks. Examples of opening tags are <p>, <head>, <body>, and <html>. The closing tags are written within the < and > signs, with the forward slash (/) attached to the name of the tag. For instance, the closing tags are </p>, </head>, </body>, and </html>. The tags’ names are not case-sensitive. Lower case tags, like <head>, are the same as upper case tags like <HEAD>. The HTML components are predetermined, which means you cannot build your own tags and must only use these established ones. HTML elements are divided into the following types:
HTML elements in depth:
Root Elements:
The root element in HTML is <html>, which acts as the outermost container for the whole HTML content. The root element is the main or starting element that should appear on all HTML pages. The HTML element is the first element after <!DOCTYPE> the element and contains other HTML elements. This element enables the browser to recognize the document type. The following table describes the attributes of the HTML element.
Attribute | Value | Description | New in HTML5 |
class | class-name | specifies the class for an element in an HTML document | no |
dir | ltr-left to right, rtl-right to left | specifies the direction of text for the content in an element | no |
id | unique-id | specifies a unique alphanumeric identifier for an element | no |
lang | language-code | specifies the base language used for an element | no |
xml:lang | language-code | specifies the base language used for an element in the eXtensible HyperText Markup Language (XHTML) documents | no |
manifest | Universal Resource Locator (URL) | defines a URL containing the document’s cache information | yes |
xmlns | http://www.w3.org/1999/xhtml | declares a namespace for tags used in an HTML document | no |
contenteditable | true, false | specifies whether or not you can edit the content in the document | yes |
contextmenu | menu-id | specifies the context menu for an element | yes |
draggable | true, false, auto | specifies whether or not you can drag an element | yes |
accesskey | character | specifies a keyboard shortcut to access an element | no |
hidden | hidden | declares an element as a hidden element. Hidden elements are not displayed in the document | no |
spellcheck | true, false | specifies whether an element should be checked for spelling and grammar or not | yes |
tabindex | number | specifies the tab order index of an element | no |
style | style-definition | specifies an inline style in the HTML document by using the | no |
title | text | specifies the title of an HTML document | no |
Metadata Elements:
Metadata elements in HTML are used to convey information about the document itself, rather than to specify the page’s content. Metadata elements are often put in the <head> section of HTML documents. Let us examine some important metadata components:
Now, let’s discuss these elements one by one.
The TITLE Element: The <title> element in HTML defines the title of the document. The title is often shown in the browser’s title bar or tab and serves as a quick and descriptive label for the page. Remember to keep the title text short, as some browsers may struggle to handle titles longer than 256 characters.
<DOCUMENT html>
<html lang="en">
<head>
<metadata charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title> Page title </title>
</head>
<body>
<!...Content Here...>
</body>
</html>
In the preceding code sample, the TITLE element utilized the HEAD element, which specifies the title of the HTML content.
Attribute | Description |
class | specifies the class of an element in an HTML document |
id | specifies a unique alphanumeric identifier for an element in the document |
lang | specifies the language used by an element |
style | specifies an inline style to render an element in the document |
To summarize, the <title> element in HTML is vital in creating a clear and meaningful descriptor for a web page. It changes how the page appears in the browser, improves SEO, and leads to a better overall user experience.
The BASE Element:
The <base> element in HTML specifies a base URL for all relative URLs within a document. It is located in the <head> section of an HTML document. The <base> element sets a default URL for all relative links and resources in the document, including stylesheets, pictures, and other pages. Basic Syntax as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="https://example.com/">
<!-- Other head elements go here -->
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Attribute | Description |
href | specifies a URL in an HTML document |
target | specifies the locations where the links of an HTML document open. The following are the four possible values of the target attribute: _blank – Opens the link in a new window _parent – Opens the link in the same frame the link is clicked _self – Opens the link in the present frameset _top – Opens the link in the same window <framename> – Opens the link in the respective frame. |
The <base> element is an effective tool for handling URLs in an HTML document. It establishes a consistent reference point for all relative links. Understanding its application and possible impact is critical to successful web development.
The LINK Element:
In HTML, the <link> element defines links between the current document and external resources. It is frequently used to link stylesheets, icon files, and other resources. The <link> element is normally put within the <head> section of an HTML document. Here’s a detailed look at the <link> element. Basic Syntax as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<!-- Other head elements go here -->
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Attribute | Value | Description | New in HTML5 |
href | URL | specifies the target URL you navigate to after clicking a link | no |
hreflang | language_code | defines the base language of the target URL | no |
media | screen, tty, tv, projection, handheld, print, braille, aural, all | specifies the device on which the HTML document is displayed | no |
rel | alternate, archives, author, feed, first, help, icon, index, last, license, next, pingback, prefetch, prev, search, stylesheet, sidebar, tag, up | specifies the relationship between the HTML document and the target URL or another HTML document | no |
sizes | any number | defines the size of the linked HTML document | yes |
type | the mine_type, for example: text/javascript/css | specifies the Multipurpose Internet Mail Extensions (MIME) type of the target URL. The MIME type decides which type of language rules are to be followed in an HTML page, such as JavaScript or CSS | no |
The <link> element helps build relationships between HTML documents and external resources, improving styling, performance, and user experience. Understanding its characteristics and application cases is critical for web developers.
The META Element:
The <meta> element in HTML is a versatile and vital tool for providing metadata about HTML content. Metadata describes the document itself, such as character encoding, viewport settings, authorship, and so on. The <meta> element is normally found in the <head> portion of an HTML document. Let’s explore the <meta> element’s characteristics and use cases:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Other meta elements go here -->
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Attribute | Value | Description | New in HTML5 |
charset | character encoding | defines character encoding for the document | yes |
contents | some_text | defines the content of the metadata | no |
http-equiv | content-type expires, refresh, set-cookie | provides information of the contents attributed to an HTTP header | no |
name | author, description, keywords, generator, revised, others | provides the content of the contents attribute | no |
Understanding the <meta> element and its characteristics is crucial for producing well-optimized and explained HTML texts. Proper metadata usage improves SEO, user experience, and proper representation of material across several platforms.
The COMMAND Element:
The <command> element was formerly included in the HTML specification, as part of the Web Components standard. However, it is currently regarded as obsolete and has been deleted from the HTML Living Standard. The HTML Living Standard is the changing specification browsers follow and no longer supports the <command> element in the current versions.
Historically, the <command> element was used in conjunction with the <menu> element to define commands for a context menu or toolbar. It was created to create user interface controls within a browser.
<menu type="context" id="contextMenu">
<command label="Copy" onclick="copyFunction()"></command>
<command label="Paste" onclick="pasteFunction()"></command>
</menu>
In this case, a context menu is provided with two commands: “Copy” and “Paste.” Each command included a label attribute for the displayed text and an onclick attribute that specified the JavaScript code to be executed when the command was activated.
As previously stated, this technique is currently deemed obsolete. Instead of the <command> element, modern web development methods involve employing more adaptable components, such as <button>, <a> (anchor), or other interactive elements, combined with JavaScript event handling.
Attribute | Value | Description |
type | command (default), checkbox, radio | specifies the type of command |
label | some_text | specifies the name of the command that is to be displayed as the icon of an HTML page |
icon | URI | specifies the location of the image that is to be displayed as the icon of an HTML page |
disabled | [Empty string], disabled | specifies a value that indicates whether a command is disabled or not |
checked | [Empty string], checked | specifies a value to indicate whether a command is selected or not |
radiogroup | some_text | specifies a string value that represents the name of the group of commands whose type attribute has radio as its value |
title | some_text | specifies the title of the command |
It’s critical to stay current with the latest web standards because the HTML specification evolves over time, and certain components become deprecated or obsolete in favor of more modern and flexible alternatives.
The NOSCRIPT Element:
HTML’s <noscript> element is used to give alternative content to users who have deactivated JavaScript or for browsers that do not support JavaScript. If JavaScript is disabled or not supported, the <noscript> tag’s content is presented. Basic Syntax as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<!-- Other head elements go here -->
</head>
<body>
<!-- Content that requires JavaScript goes here -->
<noscript>
<!-- Alternative content for users with disabled JavaScript -->
<p>JavaScript is disabled in your browser. Please enable it to view this page.</p>
</noscript>
</body>
</html>
Use in Modern Web Development:
While <noscript> is still relevant for certain cases, modern web development approaches generally involve designing responsive and accessible online apps that gracefully degrade when JavaScript is turned off. Progressive enhancement and feature detection are frequently used to give an improved experience for users with JavaScript-enabled browsers while guaranteeing a functional experience for those without JavaScript.
Many frameworks and libraries have built-in techniques to handle instances when JavaScript is disabled or not enabled. This makes direct use of <noscript> less popular in modern single-page applications (SPAs) and dynamic web pages.
The SCRIPT Element:
The <script> element in HTML is used to embed or reference executable code, typically JavaScript, within an HTML document. The <script> element, which can be included in both the <head> and <body> parts of an HTML document, allows for the inclusion of scripts that improve web page functionality and interactivity. Basic Syntax for Inline Script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<script>
// Inline JavaScript code goes here
function myFunction() {
alert('Hello, World!');
}
</script>
</head>
<body>
<!-- Content goes here -->
<button onclick="myFunction()">Click me</button>
</body>
</html>
Attribute | Value | Description | New in HTML5 |
async | true, false | specifies whether the script should be executed asynchronously or not | yes |
type | text/ecmascript text/javascript application/ecmascript application/javascript text/vbscript | specifies the MIME type of the script | no |
charset | charset | specifies the character encoding used in the script | no |
defer | true, false | specifies whether or not the browser can continue parsing the HTML document | no |
src | URL | specifies the URL of a file that contains the script | no |
The <script> element is an essential feature of web development, allowing developers to embed and run JavaScript code within HTML files. Understanding its varied characteristics and best practices is critical for developing effective and safe online apps.
The STYLE Element:
The <style> element in HTML defines internal stylesheets within an HTML document. It lets you include CSS (Cascading Style Sheets) directly in your HTML code. The <style> element is normally found in an HTML document’s <head> portion. Basic syntax as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<style>
/* CSS rules go here */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<!-- Content goes here -->
<h1>Hello, World!</h1>
</body>
</html>
Attribute | Value | Description | New in HTML5 |
type | text/css | specifies the type of content, such as simple text or style sheet in an HTML document | no |
media | screen, tty, tv, projection, handheld, print, braille, aural, all | specifies the destination medium where the style is applied | no |
scoped | scoped | specifies the style elements, that is the parent element and its child elements | yes |
In summary, the <style> element allows you to incorporate internal styles directly in an HTML document. It is appropriate for smaller projects, short-styling needs, and scenarios in which external stylesheets may not be practicable. External stylesheets, on the other hand, are commonly used for larger projects and improved maintainability. Understanding CSS best practices and current techniques improves the effectiveness of styling in web development.
Section Elements
HTML’s <section> element provides a thematic grouping of content within a document. It is used to define thematically linked sections or elements of a webpage that can function independently. HTML5’s element improves the content structure and readability.
HTML5 Outliner: The <section> element can help visualize the document’s outline. Various technologies, including browser extensions and online services, can produce an outline based on the HTML layout, assisting you in maintaining a logical document structure.
The <section> element is useful for arranging HTML pages in a semantic and meaningful way. It improves accessibility, simplifies design and scripting, and enables developers to establish a clear hierarchy inside their content. Using <section> correctly can improve the organization and readability of HTML documents. The following is a list of section elements:
The BODY Element: In HTML, the <body> element represents the document’s content. It includes all of the visible content that users see when they visit a web page. The <body> element in HTML documents contains text, photos, links, forms, and other elements that enhance the web page’s visual appeal.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>Section 1</h2>
<p>This is the content of section 1.</p>
</section>
<section>
<h2>Section 2</h2>
<p>This is the content of section 2.</p>
</section>
</main>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
The preceding code uses the BODY Element within an HTML element.
Understanding the role and structure of the <body> element is essential for building well-designed and accessible web pages. It acts as a canvas for showing a webpage’s content to users.
The SECTION Element: HTML’s <section> element groups and defines thematic content divisions within a document. It improves the document’s structure by suggesting that the enclosed content is thematically connected and can be considered an independent unit. The <section> element helps organize content hierarchically, increasing document semantics and accessibility. It frequently includes heading elements (<h1>,<h2>, etc.) to provide titles for sections. The primary goal is to improve the readability and structure of HTML documents.
<SECTION>
<H1>HTML5</H1>
<P>Example of the SECTION Element</P>
</SECTION>
The NAV Element: The <nav> element in HTML is a semantic container that defines a segment of navigation links within a document. It is meant for links that take readers to different pages or areas of the same page, allowing them to traverse the website. The <nav> element improves content semantics by highlighting the presence of navigation links. Typically, it contains lists of links, menus, or other navigational elements. Using <nav> aids to better accessibility and helps search engines understand the structure of the text.
The <nav> element in HTML has a straightforward syntax. The navigation structure consists of an opening element, the navigation content, and a closing </nav> tag. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Rest of the document content goes here -->
</body>
</html>
Generally, the NAV element is used in the footer area of an HTML page. This area contains a list of links related to various pages of a website, such as terms of service and contact information.
The ARTICLE Element: In HTML, the <article> element defines self-contained information that may be disseminated and reused. It is intended for content such as news stories, blog posts, forum postings, and any other item that can exist independently. The <article> element aids document organization by indicating that the enclosing material is a separate piece. Headings (e.g., <h1>) are commonly used to provide a title for articles. Using <article> improves accessibility and helps search engines comprehend the value of the contained material. Basic syntax as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<article>
<h1>Article Title</h1>
<p>This is the content of the article.</p>
<!-- Other content related to the article goes here -->
</article>
<!-- Rest of the document content goes here -->
</body>
</html>
The ASIDE Element: In HTML, the <aside> element serves as a semantic container for text that is distantly connected to the surrounding content. It usually refers to content like sidebars, pull quotes, or information that is not the main emphasis of the page but adds context. The <aside> tag enhances document semantics by indicating stuff that is supplemental to the main text. It can be placed within or outside a based on its relationship to the surrounding content. Basic syntax as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<article>
<h1>Main Article Title</h1>
<p>Main article content goes here.</p>
</article>
<aside>
<h2>Related Information</h2>
<p>This is additional information related to the main article.</p>
<!-- Other supplementary content goes here -->
</aside>
<!-- Rest of the document content goes here -->
</body>
</html>
The HEADER Element: The <header> element in HTML defines introductory material at the beginning of a section or page. It usually comprises headings, logos, navigation, and other features that add context and identify the main content. The <header> tag improves accessibility and helps search engines understand content structure. It is typically used in the section of an HTML text. Basic syntax as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Rest of the document content goes here -->
</body>
</html>
The <header> element defines introductory content and improves document semantics by explicitly identifying context or the major content of a section.
The FOOTER Element: The <footer> element in HTML specifies footer content at the end of a section or page. It often includes copyright notices, links to relevant resources, and other metadata. The <footer> tag improves document semantics, and accessibility, and helps search engines grasp content structure. It is typically used in the <body> section of an HTML text. Basic syntax as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<!-- Main content of the page goes here -->
<footer>
<p>© 2024 Your Website. All rights reserved.</p>
<nav>
<ul>
<li><a href="#privacy">Privacy Policy</a></li>
<li><a href="#terms">Terms of Service</a></li>
</ul>
</nav>
</footer>
</body>
</html>
The <footer> element improves document semantics by clearly defining material at the end of a section or page.
The ADDRESS Element: In HTML, the <address> element is a semantic container that defines contact information for its nearest <article> or <body> It is frequently used to provide information such as the author’s name, physical or email address, or other contact information relevant to the material. The <address> tag improves document semantics by providing a separate element for contact information, particularly in the context of articles or the entire page. It is not restricted to postal addresses and can contain a variety of contact information. Basic syntax as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<article>
<h1>Article Title</h1>
<address>
<p>Author: John Doe</p>
<p>Email: john.doe@example.com</p>
<!-- Other contact information goes here -->
</address>
<p>This is the content of the article.</p>
</article>
<!-- Rest of the document content goes here -->
</body>
</html>
The <address> element specifies contact information and is usually linked to the <article> or <body> element that comes before it. It improves document semantics by designating text that systematically contains contact information.
Heading Elements: HTML’s heading elements (<h1 to <h6>) define headings or titles within a document. They form a hierarchy, with <h1> as the primary heading and <h6> as the least prominent. Headings improve document structure, increase accessibility, and assist search engines in understanding content hierarchy. To organize and structure material, use <h1> for the main title of the page or section.
Flow Elements: Flow content consists of items that can be utilized within the body of an HTML document. These components contribute to the document’s general structure and layout. The HTML document’s body comprises practically all of the HTML components used to show various forms of content, such as plain text, links, and graphics.
Elements | Description | New in HTML5 |
A | represents a link in an HTML document | no |
ABBR | represents an abbreviation | no |
ADDRESS | represents additional information of an HTML document | no |
AREA (if it is a descendant of a MAP element) | represents an area of an image map | no |
ARTICLE | represents a self-contained composition of an HTML document | yes |
ASIDE | represents a note, tip, or a sidebar related to an article | yes |
AUDIO | represents audio and video streams | yes |
B | represents bold text | no |
BDO | represents the text direction | no |
BLOCKQUOTE | represents long quotations | no |
BR | represents a link break | no |
BUTTON | represents a push button | no |
CANVAS | allows you to draw graphics using JavaScript | no |
CITE | represents a citation | no |
CODE | represents code text | yes |
COMMAND | defines a command | no |
DATALIST | defines options for controls by using various elements, such as OPTION and INPUT | no |
DEL | represents deleted text | no |
DETAILS | provides additional information or control for users | no |
DFN | represents the definition term | no |
DIV | represents a section in an HTML document | no |
DL | represents definition list | no |
EM | represents an emphasized text | no |
EMBED | represents the plugin content in an HTML document | no |
FIELDSET | represents a border of elements on a form | no |
FIGURE | represents some flow content of an HTML document | yes |
FOOTER | defines a footer for a section in an HTML document | yes |
FORM | represents an HTML form for user input | no |
H1 | represents first level of HTML headings | no |
H2 | represents second level of HTML headings | no |
H3 | represents third level of HTML headings | no |
H4 | represents fourth level of HTML headings | no |
H5 | represents fifth level of HTML headings | no |
H6 | represents sixth level of HTML headings | no |
HEADER | defines a header of a section in an HTML document | yes |
HGROUP | represents heading of a section by grouping the heading elements (H1, H2) | yes |
HR | represents horizontal rule | no |
I | represents italic text | no |
IFRAME | represents an inline frame | no |
IMG | represents an image | no |
INPUT | represents an input control | no |
INS | represents inserted text | no |
KBD | represents keyboard text | no |
KEYGEN | represents a control to generate key pair | no |
LABEL | represents label for an input element | no |
MAP | represents an image map | no |
MARK | represents a text in an HTML document that is highlighted for reference | no |
MATH | defines math expressions | no |
MENU | represents a menu list | no |
METER | defines a measurement, such as disk usage | no |
NAV | represents a navigation section of an HTML document | yes |
NOSCRIPT | represents alternate text to be displayed on the web browser that does not support javascript | no |
OBJECT | represents an embedded object | no |
OL | represents an ordered list | no |
OUTPUT | represents some output | no |
P | represents a paragraph | no |
PRE | represents a preformatted text | no |
PROGRESS | defines the progress of tasks and operation | yes |
Q | represents short quotations | no |
RUBY | allows you to mark up ruby annotations in an HTML document | no |
SAMP | represents simple computer code | no |
SCRIPT | represents a client-side script | no |
SECTION | represents a section in an HTML document | yes |
SELECT | represents a select list (drop-down list) | no |
SMALL | represents a small text | no |
SPAN | represents a section in an HTML document | no |
STRONG | represents a strong text | no |
STYLE (if the scoped attribute is present ) | represents style information of an HTML document | no |
SUB | represents subscript text | no |
SUP | represents superscript text | no |
SVG | defines graphics in XHTML document | no |
TABLE | represents a table | no |
TEXTAREA | represents a multi-line text input control | no |
TIME | defines date and/ or time | yes |
UL | represents unordered list | no |
VAR | represents a variable part of a text | no |
VIDEO | represents videos or movie streams | yes |
WBR | defines a line break opportunity | no |
TEXT | represents text in an HTML document | no |
Phrasing Elements: In HTML, “phrasing content” refers to components that identify text or content within a document. Phrasing content refers to the text and inline elements that can be found within block-level elements. These elements help to shape the document’s structure and semantics by defining the text’s meaning and behavior. Understanding phrasing content is critical for producing semantically meaningful and well-structured HTML texts.
Always employ the proper elements to convey your content’s semantic meaning. These elements help to create rich, meaningful, and accessible HTML content.
Elements | Description | New in HTML5 |
A (if it contains only phrasing content) | represents a link in an HTML document | no |
ABBR | represents an abbreviation | no |
AREA (if it is a descendant of a map element) | represents an area of an image map | no |
AUDIO | represents audio and sound streams | yes |
B | represents bold text | no |
BDO | represents the text direction | no |
BR | represents a line break | no |
BUTTON | represents a push button | no |
CANVAS | allows you to draw graphics using JavaScript | yes |
CITE | represents a citation | no |
CODE | represents code text | no |
COMMAND | defines a command | yes |
DATALIST | defines options for controls by using various elements, such as OPTION and INPUT | yes |
DEL (if it contains only phrasing content) | represents deleted text | no |
DFN | represents the definition term | no |
EM | represents an emphasized text | no |
EMBED | represents a plugin content in an HTML document | yes |
I | represents italic text | no |
IFRAME | represents an inline frame | no |
IMG | represents an image | no |
INPUT | represents an input control | no |
INS (if it contains only phrasing content) | represents inserted text | no |
KBD | represents keyboard text | no |
KEYGEN | represents a control to generate key pair | yes |
LABEL | represents a label for an input element | no |
MAP (if it contains only phrasing content) | represents an image map | no |
MARK | represents a text in an HTML document that is highlighted for reference | yes |
MATH | defines math expressions in XHTML | no |
METER | defines a measurement, such as disk usage | yes |
NOSCRIPT | represents alternate text to be displayed on the web browser that does not support JavaScript | no |
OBJECT | represents an embedded object | no |
OUTPUT | represents some output | yes |
PROGRESS | defines the progress of tasks and operations | yes |
Q | represents short quotations | no |
RUBY | allows you to mark up ruby annotations in an HTML document | yes |
SAMP | represents sample computer code | no |
SCRIPT | represents a client-side script | no |
SELECT | represents a select list (drop-down list) | no |
SMALL | represents a small text | no |
SPAN | represents a section in an HTML document | no |
STRONG | represents a strong text | no |
SUB | represents subscript text | no |
SUP | represents superscript text | no |
SVG | defines graphics in XHTML document | no |
TEXTAREA | represents a multi-line text input control | no |
TIME | defines date or/and time | yes |
VAR | represents a variable part of a text | no |
VIDEO | represents videos or movies streams | yes |
WBR | defines a line break opportunity | yes |
TEXT | represents text in an HTML document | no |
Embedded Elements: In HTML, embedded elements are used to incorporate external resources or media into a document. These elements enable web developers to include content like photos, audio, video, scripts, and more on web pages.
- When embedding content, consider accessibility by including alternate text (alt attribute) for pictures and fallback content for non-supported content.
- Ensure that the use of embedded elements is consistent with web standards and best practices.
- To improve loading times, consider the file formats and compression methods used for multimedia content.
- These embedded features are critical for improving the multimedia and interactive parts of HTML texts, resulting in a more immersive and engaging user experience.
Elements | Description | New in HTML5 |
AUDIO | represents audio and sound streams | yes |
CANVAS | allows you to draw graphics using JavaScript | yes |
EMBED | represents the plugin content in an HTML document | yes |
IFRAME | represents an inline frame | no |
IMG | represents an image | no |
MATH | defines math expressions in XHTML | no |
OBJECT | represents an embedded object | no |
SVG | defines graphics in an XHTML document | no |
VIDEO | represents videos or movies streams | yes |
Interactive Elements: HTML’s interactive features enable visitors to interact with and alter webpage information. These components encourage user participation, such as clicking buttons, submitting forms, surfing links, and so on. Interactive features are essential for building dynamic and user-friendly web experiences, as they allow users to engage with content in a variety of ways.
Elements | Description | New in HTML5 |
A | represents a link in an HTML document | no |
AUDIO (if the controls attribute is present) | represents audio and sound streams | yes |
BUTTON | represents a push button | no |
DETAILS | provides additional information or control for users | yes |
EMBED | represents the plugin content in an HTML document | yes |
IFRAME | represents an inline frame | no |
IMG (if the usemap attribute is present) | represents an image | no |
INPUT (if the type attribute is not in the hidden state) | represents an input control | no |
KEYGEN | represents a control to generate key pair | yes |
LABEL | represents label for an input element | no |
MENU (if the type attribute is in the toolbar state) | represents a menu list | no |
OBJECT (if the usemap attribute is present) | represents an embedded object | no |
SELECT | represents a select list (drop-down list) | no |
TEXTAREA | represents a multi-line text input control | no |
VIDEO (if the controls attribute is present) | represents videos or movies streams | yes |