HTML

<embed> : Embed External Content element

by

Introduction

The <embed> HTML element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.

Here is 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>
</head>
<body>
    <embed src="cars.mp4" type="video/mp4" height="300px" width="700px">
</body>
</html>

Output :

When we run the program we get a video on output screen. And when we click on the play button video will play.

However, it’s important to note that ‘<embed>‘ is considered somewhat outdated, and for modern web development, the ‘<iframe>‘ element is often preferred, especially for embedding external content like videos.

Use of <embed> tag :

Here is an example :

1. Embedding Multimedia: Use <embed> to embed videos or audio files directly into a webpage. Specify the source (src) and the MIME type (type) of the multimedia content.

<embed src="example.mp4" type="video/mp4" width="640" height="360">

2. Embedding Interactive Content: Flash content or other interactive plugins can be embedded using the <embed> element. Specify the source and type accordingly.

<embed src="interactive_content.swf" type="application/x-shockwave-flash" width="400" height="300">

3. Embedding PDF Documents: You can use <embed> to embed PDF documents directly into a webpage, allowing users to view the content without leaving the site.

<embed src="document.pdf" type="application/pdf" width="800" height="600">

4. Embedding Google Maps: You can embed Google Maps directly into a webpage using the <embed> element. Provide the appropriate URL with latitude and longitude values.

<embed src="https://maps.google.com/maps?q=latitude,longitude&output=embed" width="600" height="450">

5. Embedding Social Media Posts: For some social media platforms, you can use <embed> to embed posts directly into your webpage.

<embed src="https://www.instagram.com/p/example/" type="text/html" width="500" height="600">

6. Embedding External Widgets or Components: You can embed external widgets, components, or interactive elements that are provided by third-party services.

<embed src="widget.html" type="text/html" width="300" height="200">

It’s worth noting that while <embed> is a valid way to embed content, other elements like <iframe> are often preferred for certain types of content embedding due to better support and security features. When choosing the embedding method, consider the type of content, compatibility with browsers, and security implications. Additionally, some platforms may have specific embedding guidelines that developers should follow.

<em> : Emphasis element

by

Introduction

The <em> element in HTML is used to indicate emphasis for the enclosed text, typically by rendering the text in italics. It is a part of the semantic HTML elements and is meant to convey that the enclosed content should be emphasized, stressed, or given importance within the context.

Here is 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>
</head>
<body>
    <p>This is a <em>very important</em> point in the discussion.</p> 
</body>
</html>

Output :

In this example, the text “very important” is enclosed within the <em> element, indicating that it should be emphasized. Browsers typically render the content in italics by default, but the styling can be modified through CSS if needed.

Uses of <em> tag :

Here are some common use cases for the <em> element:

1. Emphasizing Text:

<p>This is an <em>important</em> announcement!</p>

The <em> element is used to emphasize the word “important” in this example.

2. Quotations and Citations:

<p>The author stated, "<em>Knowledge is power</em>."</p>

It can be used to emphasize a quote or citation within a paragraph.

3. Highlighting Key Points:

<ul>
  <li><em>Remember:</em> Save your work frequently.</li>
  <li><em>Caution:</em> Do not share your password.</li>
</ul>

<em> can be used to highlight key points or warnings in a list.

4. Names of Ships, Books, etc.:

<p>The novel "<em>The Catcher in the Rye</em>" explores the theme of adolescence.</p>

It can be used to emphasize the titles of books, movies, ships, etc.

5. User Instructions:

<p><em>Click</em> the "Submit" button to complete the form.</p>

It’s often used to emphasize action words or instructions for users.

6. Styling Choices:

<p>The dress comes in <em>red</em>, <em>blue</em>, and <em>green</em>.</p>

<em> can be used to emphasize color choices or options.

Remember, while <em> traditionally renders text in italics, the primary purpose is to add semantic meaning to the content. It signals to browsers and assistive technologies that the enclosed text is meant to be emphasized, allowing them to interpret the content more accurately. If you want to convey strong importance or stress, you might consider using the <strong> element in addition to or instead of <em>.

<dt> : Description Term element

by

Introduction

The <dt> element in HTML stands for “Description Term,” and it is used within a <dl> (Description List) element to define terms in a term-description pair. The <dt> element is typically followed by a <dd> (Description Definition) element that provides the description or definition of the term.

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>
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>Hypertext Markup Language</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets</dd>  
        <dt>JavaScript</dt>
        <dd>A programming language that enables interactive web pages</dd>
      </dl>  
</body>
</html>

Output :

In this example, each <dt> element represents a term (e.g., HTML, CSS, JavaScript), and the corresponding <dd> element provides the description or definition of that term.

Key points about the <dt> element:

  1. It is used inside a <dl> element to mark up the terms in a description list.
  2. It is a block-level element.
  3. It is often followed by one or more <dd> elements that provide the description or definition associated with the term.
  4. The order of <dt> and <dd> elements within a <dl> defines the order of term-description pairs.

When creating a description list using <dl>, it’s important to maintain the semantic relationship between <dt> and <dd> elements. This allows browsers, screen readers, and other user agents to understand the structured content and present it in a meaningful way to users.

<dl> : Description List element

by

Introduction

The <dl> element in HTML stands for “Description List” and is used to define a list of terms and their corresponding descriptions. It typically consists of a series of term-<dt> (definition term) and description-<dd> (definition description) pairs.

This element is useful for representing glossaries, dictionaries, metadata, or any situation where a term needs to be associated with a description.

Here is 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>
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>Hypertext Markup Language</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets</dd>  
        <dt>JavaScript</dt>
        <dd>A programming language that enables interactive web pages</dd>
      </dl>  
</body>
</html>

Output :

In this example, the <dl> element is used to create a description list with three term-description pairs. Each term is marked with a <dt> (definition term) element, and its corresponding description is marked with a <dd> (definition description) element.

It’s important to note that while the <dl> element is often used for term-description pairs, developers should ensure that the use of definition lists aligns with the intended meaning of the content. In some cases other semantic elements like <ul> (unordered list) or <ol> (ordered list) might be more appropriate depending on the context.

Uses of <dl> tag :

The <dl> (Description List) tag in HTML is primarily used for creating lists of term-description pairs. Here are some common uses and scenarios where the <dl> tag is beneficial:

1. Glossaries and Dictionaries:Use the <dl> tag to represent glossaries or dictionaries where terms and their definitions are provided.

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JavaScript</dt>
  <dd>A programming language that enables interactive web pages</dd>
</dl>

2. Metadata Information: It can be used to structure and present metadata information, such as author names, publication dates, or categories.

<dl>
  <dt>Author</dt>
  <dd>John Doe</dd>
  <dt>Published</dt>
  <dd>January 1, 2024</dd>
  <dt>Category</dt>
  <dd>Technology</dd>
</dl>

3. FAQs (Frequently Asked Questions): The <dl> tag is useful for organizing FAQs with questions and corresponding answers.

<dl>
  <dt>Question 1</dt>
  <dd>Answer to question 1.</dd>
  <dt>Question 2</dt>
  <dd>Answer to question 2.</dd>
  <dt>Question 3</dt>
  <dd>Answer to question 3.</dd>
</dl>

4. Product Specifications: When presenting specifications for products, the <dl> tag can be used to structure the information.

<dl>
  <dt>Model</dt>
  <dd>ABC123</dd>
  <dt>Size</dt>
  <dd>10 inches</dd>
  <dt>Weight</dt>
  <dd>2.5 pounds</dd>
</dl>

5. Coding Examples and Documentation: Developers may use the <dl> tag to document code examples or provide information about functions and methods.

<dl>
  <dt>Function Name</dt>
  <dd>calculateTotal</dd>
  <dt>Parameters</dt>
  <dd>price, quantity</dd>
  <dt>Returns</dt>
  <dd>Total cost of the items</dd>
</dl>

<div> : Content Division element

by

Introduction

The <div> element in HTML stands for “division” and is commonly used as a generic container to group and structure content on a webpage. It is a block-level container that doesn’t have any specific semantic meaning on its own. Instead, it is used to group together and apply styles to other HTML elements.

Here’s a simple 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>
    <style>
        .shadowbox {
            width: 15em;
            border: 1px solid #333;
            box-shadow: 8px 8px 5px #444;
            padding: 8px 12px;
            background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
        }
    </style>
</head>
<body>
    <div class="shadowbox">
        <p>Here's a very interesting note displayed in a lovely shadowed box.</p>
    </div>
</body>
</html>

Output :

Developers often use ‘<div>‘ elements to create sections of a webpage or to group elements for styling purposes.

Uses of <div> tag :

Some common use cases for the ‘<div>‘ element include :

  1. Styling and Layout: Developers use ‘<div>‘ elements to group together sections of a webpage and apply styles, such as margins, padding, and background colors.
  2. Scripting and Event Handling: JavaScript code may target and manipulate content within ‘<div>‘ elements. Event handlers can also be attached to <div> elements to respond to user interactions.
  3. Responsive Design: ‘<div>‘ elements are often employed in creating responsive web designs, allowing developers to structure content for different screen sizes and devices.
  4. CSS Frameworks: Many CSS frameworks, like Bootstrap, use ‘<div>‘ elements extensively for layout and structuring components.

While the ‘<div>‘ element is versatile and widely used, it’s important to use semantic HTML elements when possible to provide meaning to the content. If there’s a more specific HTML element available (such as <article>, <section>, <header>, etc.) that accurately describes the purpose of the content, it’s often better to use those for improved accessibility and SEO. The ‘<div>‘ element remains a valuable tool for layout and styling purposes.

<dfn> : Definition element

by

Introduction

The ‘<dfn>‘ element is part of the HTML (Hypertext Markup Language) specification and is used to represent the defining instance of a term within a document. It is typically employed to mark up terms or phrases that require a definition or explanation.

Here’s an example of how the ‘<dfn>‘ element can be used:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p><dfn>HTML</dfn> stands for Hypertext Markup Language. It is the standard markup language for creating web pages.</p>
</body>
</html>

Output :

In this example, the term “HTML” is marked up with the ‘<dfn>‘ element to indicate that it is being defined. This can be beneficial for accessibility, search engines, and other user agents to recognize and provide appropriate treatment for defined terms.

Uses of <dfn> tag :

Here is an example of ‘<dfn>’ tag :

  1. Accessibility: It helps improve accessibility by providing a clear indication of terms that have definitions. Screen readers and other assistive technologies can use this information to convey the meaning of terms to users with disabilities.
  2. Search Engine Optimization (SEO): Search engines may use structured data to understand the content and relationships within a page. Properly marking up terms with ‘<dfn>‘ can contribute to a better understanding of the document’s structure and context.
  3. Consistency in Styling: Web developers can use the ‘<dfn>‘ element to apply consistent styling to defined terms across a website. This can enhance the visual presentation of the document and provide a more cohesive user experience.
  4. Linking to Definitions: The ‘<dfn>‘ element can be used in conjunction with other elements, such as ‘<a>‘ (anchor), to create links directly to the definition of a term. This allows users to easily navigate to the explanation of a specific term within a document.

<details> : Details disclosure element

by

Introduction

The ‘<details>‘ element in HTML is used to create a disclosure widget from which the user can obtain additional information or controls. It is often used to create collapsible content sections, commonly known as “accordion” or “collapsible” sections.

Here is 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>
</head>
<body>
    <details>
        <summary>Click to reveal more information</summary>
        <p>This is the additional information that can be collapsed or expanded.</p>
    </details>
  </body>
</html>

Output :

And when we click on the button it will give the more information. Like this

<del> : Delete Text element

by

Introduction

The ‘<del>‘ element in HTML is used to represent deleted or removed text within a document. It is often used to show that a part of the text has been removed or deleted compared to a previous version.

Here is 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>
</head>
<body>
    <p>Now the price of MSI Cyborg 15 is 59.999 instead of <del>89.999.</del> .</p>
</body>
</html>

Output :

The text which is written under the ‘<del>‘ tag it will visible look like visible in upper example.

<dd> : Description Details element

by

Introduction

The ‘<dd>‘ element in HTML is used as part of a definition list ‘<dl>‘, representing the description or definition of a term in the list. It is typically used in conjunction with the ‘<dt>‘ definition term element. The combination of ‘<dt>‘ and ‘<dd>‘provides a way to structure and present term/definition pairs on a webpage.

Here’s an example of how ‘<dt>‘ and ‘<dd>‘ are used together :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>HyperText Markup Language is the standard markup language for creating web pages.</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets is a style sheet language used for describing the look and formatting of a document written in HTML.</dd>
        <!-- Additional term/definition pairs can be added as needed -->
    </dl>    
</body>
</html>

Output :

In this example, ‘<dt>‘ is used to define terms (e.g., HTML, CSS), and ‘<dd>‘ is used to provide the corresponding descriptions or definitions. When rendered by a browser, this creates a structured list where each term is followed by its associated description.

Uses of <dd> tag :

Here is some uses of <dd> tag :

1. Glossaries and Dictionaries: The <dd> element is often used to structure glossaries or dictionaries on websites. Each <dt> represents a term, and the corresponding <dd> provides the definition or description of that term.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  
</head>
<body>
    <dl>
        <dt>JavaScript</dt>
        <dd>A high-level, interpreted programming language that...</dd>
        <dt>API</dt>
        <dd>Application Programming Interface, a set of rules and tools for building software...</dd>
        <!-- Additional term/definition pairs -->
    </dl>    
</body>
</html>

2. FAQs (Frequently Asked Questions): In an FAQ section, <dt> elements can represent questions, while <dd> elements can contain the corresponding answers or explanations.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  
</head>
<body>
    <dl>
        <dt>How do I reset my password?</dt>
        <dd>You can reset your password by visiting the...</dd> 
        <dt>What payment methods do you accept?</dt>
        <dd>We accept credit cards, PayPal, and...</dd>
        <!-- Additional Q&A pairs -->
    </dl>    
</body>
</html>

3. Educational Content: When creating educational content or tutorials, you can use <dt> and <dd> to present terms and their explanations in a structured manner.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  
</head>
<body>
    <dl>
        <dt>Photosynthesis</dt>
        <dd>The process by which green plants and some other organisms use sunlight to synthesize foods with the help of chlorophyll.</dd>
        <dt>Newton's Laws of Motion</dt>
        <dd>Three laws that describe the relationship between the motion of an object and the forces acting on it.</dd>
        <!-- Additional term/definition pairs -->
    </dl>     
</body>
</html>

4. Product Descriptions: In an e-commerce setting, you might use <dt> and <dd> to present features and descriptions of products.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  
</head>
<body>
    <dl>
        <dt>Smartphone Model XYZ</dt>
        <dd>A high-performance smartphone with a 6-inch display, dual cameras, and advanced security features.</dd>
        <dt>Laptop Model ABC</dt>
        <dd>An ultrabook with a lightweight design, powerful processor, and long battery life.</dd>
        <!-- Additional product details -->
    </dl>      
</body>
</html>

5. Coding Documentation: When documenting code or APIs, you can use <dt> to represent method or function names and <dd> to provide detailed explanations or usage instructions.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  
</head>
<body>
    <dl>
        <dt>functionName()</dt>
        <dd>A JavaScript function that performs a specific task...</dd>  
        <dt>API Endpoint /users</dt>
        <dd>Returns information about users in the system...</dd>
        <!-- Additional code documentation pairs -->
      </dl>       
</body>
</html>

In summary, the <dd> element is versatile and can be applied wherever a term needs an associated description or definition in a structured manner on a webpage.

<datalist> : Data List element

by

Introduction

The ‘<datalist>‘ element in HTML is used to provide a predefined list of options for other controls, typically used in conjunction with the ‘<input>‘ element. It allows users to choose from a set of predefined options while still allowing them to enter custom values.

Here’s a simple 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>  
</head>
<body>
    <label for="browser">Choose a browser:</label>
    <input list="browsers" id="browser" name="browser" />
    <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Safari">
        <option value="Edge">
        <option value="Opera">
    </datalist>
</body>
</html>

Output :

When we move curser to the input box a predefined list is show. Like this

Uses of <datalist> tag :

The ‘<datalist>‘ element in HTML is commonly used to enhance user input by providing a pre-defined list of options that can be associated with an ‘<input>‘ element. Here are some common use cases for the ‘<datalist>‘ element :

1. Autocomplete: One of the primary use cases for <datalist> is to provide autocomplete suggestions for user input. This is useful when you have a predefined set of options, such as a list of countries, cities, programming languages, etc. Users can start typing, and the browser will suggest options from the ‘<datalist>‘.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  
</head>
<body>
    <label for="countries">Choose a country:</label>
    <input list="country-list" id="countries" name="country" />
        <datalist id="country-list">
        <option value="USA">
        <option value="Canada">
        <option value="UK">
        <!-- More country options -->
    </datalist>
</body>
</html>

2. Improved User Experience: ‘<datalist>‘ enhances the user experience by reducing the likelihood of input errors. Users can choose from a list of valid options, preventing typos or mistakes.

3. Data Validation: When used in combination with JavaScript, the ‘<datalist>‘ element can be part of a validation mechanism to ensure that the user’s input matches one of the predefined options.

4. Search Suggestions: In search boxes or form fields where users enter search queries, ‘<datalist>‘ can be employed to suggest popular or relevant search terms as the user types.

5. Product or Service Selection: For e-commerce websites, the ‘<datalist>‘ element can be used to provide a list of available products or services, facilitating easy selection by users.

6. Multi-Step Forms: When building multi-step forms, ‘<datalist>‘ can be employed to offer options for certain fields, making it more user-friendly and reducing the likelihood of form abandonment.

Remember that the ‘<datalist> ‘element doesn’t handle the data processing or server-side validation; it is a client-side feature that aids in presenting predefined options to users. Developers often use it in conjunction with JavaScript or server-side logic to handle user input and perform necessary actions based on the selected values.