HTML

<nav> : Navigation Section element

by

Introduction

The <nav> element in HTML is used to define a section of a document that contains navigation links, typically used for navigating within the current document or to other documents. It’s intended to represent a major navigation block within the document’s structure.

Here’s a basic example of how the <nav> 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>
    <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>
</body>
</html>

Output :

In this example:

  • The <nav> element contains a list of navigation links (<a> elements) wrapped in an unordered list (<ul>).
  • Each <a> element represents a link to a different section of the webpage or to other pages.
  • The navigation links typically allow users to quickly navigate to different sections of the current page or to other pages within the website.

It’s important to note that the <nav> element should only be used for major navigation blocks, such as the main menu or primary navigation links. Smaller or more contextual navigation elements should use other appropriate elements, such as <footer> for footer navigation or <aside> for sidebar navigation.

Using semantic HTML elements like <nav> helps improve the accessibility and clarity of the document structure, making it easier for assistive technologies and search engines to understand the content and its organization.

<meter> : Meter element

by

Introduction

The <meter> element in HTML is used to represent a scalar measurement within a known range. It’s typically displayed as a horizontal bar, where the filled portion indicates the current value relative to the minimum and maximum values defined for the meter.

Here’s an example of how the <meter> 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>Storage Used: <meter value="60" min="0" max="100">60%</meter></p>
</body>
</html>

Output :

In this example:

  • The <meter> element is used to represent the amount of storage used.
  • The value attribute specifies the current value, which is set to 60 in this case.
  • The min and max attributes define the minimum and maximum values of the range. Here, the minimum is 0 and the maximum is 100, indicating a percentage range.
  • The text “60%” inside the <meter> element is the fallback content, which is displayed if the browser does not support the <meter> element or if the value is not within the specified range.

The appearance of the meter may vary depending on the browser and CSS styling. However, it generally consists of a horizontal bar with a shaded portion representing the current value relative to the range defined by the min and max attributes.

The <meter> element can also have optional attributes such as low, high, and optimum to define thresholds within the range, which can be used for styling or accessibility purposes. Additionally, it can be styled using CSS to customize its appearance further.

<meta> : Metadata element

by

Introduction

The <meta> element in HTML is used to provide metadata about the HTML document. Metadata is data about data, which gives information about the HTML document itself rather than the content it contains. Metadata elements are typically placed within the <head> section of an HTML document.

Here’s how the <meta> element can be used:

<!DOCTYPE html>
<html>
<head>
  <title>Example HTML Document</title>
  <meta charset="UTF-8">
  <meta name="description" content="This is a sample HTML document">
  <meta name="keywords" content="HTML, metadata, sample">
  <meta name="author" content="John Doe">
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a sample HTML document.</p>
</body>
</html>

In this example:

  • The <meta> element with the charset attribute specifies the character encoding used in the document. In this case, it’s set to UTF-8, which is a widely used encoding for handling text in different languages.
  • Other <meta> elements provide additional metadata:
    • description: Provides a brief description of the document.
    • keywords: Specifies a list of keywords relevant to the document.
    • author: Identifies the author of the document.

These <meta> elements are not displayed directly on the webpage but are instead used by browsers, search engines, and other web services for various purposes such as indexing, search engine optimization (SEO), and browser rendering. They help provide contextual information about the document, improve its accessibility, and enhance its discoverability on the web.

<menu> : Menu element

by

Introduction

The <menu> element in HTML is used to define a list of commands or options that can be accessed by the user. It’s primarily used in conjunction with JavaScript to create custom context menus, toolbars, or other interactive menus within a web application.

Here’s a basic example of how the <menu> 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>
    <style>
        menu{
            background-color: rgb(167, 164, 164);
        }
    </style>
</head>
<body>
    <menu type="toolbar" id="toolbar">
        <li><button onclick="alert('Save')">Save</button></li>
        <br>
        <li><button onclick="alert('Open')">Open</button></li>
        <br>
        <li><button onclick="alert('Print')">Print</button></li>
    </menu>
</body>
</html>

Output :

In this example:

  • The <menu> element contains a list of <li> (list item) elements, each of which contains a <button> element representing a command or option.
  • The type attribute of the <menu> element is set to “toolbar”, indicating that this menu represents a toolbar.
  • Each <button> element has an onclick attribute that triggers a JavaScript function when clicked. In this case, clicking a button will display an alert with the corresponding action (Save, Open, or Print).

It’s important to note that the <menu> element is not widely supported in modern browsers, and its usage is generally discouraged in favor of more flexible and accessible alternatives like using semantic HTML elements combined with CSS and JavaScript to create custom menus and controls.

<mark> : Mark Text element

by

Introduction


The <mark> element in HTML is used to highlight or mark portions of text within a document. It’s typically used to denote sections of text that are particularly relevant or important, similar to highlighting text with a marker on a printed document.

Here’s a simple example of how the <mark> 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>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum quisquam iure <mark>numquam porro aspernatur totam consectetur quae corporis quos sapiente debitis</mark>, molestiae vitae ipsam ipsa quo suscipit! Maxime, ipsa suscipit.</p>
</body>
</html>

Output :

In this example:

  • The <p> element contains a sentence of text.
  • When rendered in a browser, the text inside the <mark> element will typically be highlighted, making it stand out from the surrounding text.

The <mark> element is primarily used for styling purposes to visually distinguish specific portions of text. It doesn’t inherently imply any semantic meaning beyond indicating that the marked text is somehow noteworthy.

We can also change the written style and colour of highlighter by CSS.

<main> : Main element

by

Introduction

The <main> element is an HTML5 element that is used to represent the main content of an HTML document. It is typically used to enclose the primary content of the page, excluding headers, footers, sidebars, and other content that is not directly related to the main topic or purpose of the page.

Here’s a simple example of how the <main> element is used in an HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main Element Example</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
    </header>
    <nav>
        <!-- Navigation links go here -->
    </nav>
    <main>
        <article>
            <h2>Article Title</h2>
            <p>This is the main content of the article.</p>
            <!-- More article content goes here -->
        </article>
        <section>
            <h2>Another Section</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque, suscipit et ratione neque fugiat nihil, optio unde ullam pariatur sunt quibusdam saepe veritatis voluptates at, magni exercitationem dolores voluptatum quaerat..</p>
        </section>
    </main>
    <aside>
        <!-- Sidebar content goes here -->
    </aside>
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

Output :

In this example:

  • The <header>, <nav>, <aside>, and <footer> elements represent the header, navigation, sidebar, and footer of the page, respectively.
  • The <main> element contains the primary content of the page, such as articles and sections.

The use of <main> helps in making the HTML structure more semantically meaningful. It also has implications for accessibility, as screen readers and other assistive technologies can use the <main> element to identify and navigate to the main content of a page.

It’s important to note that there should be only one <main> element in a document, and it should not be nested within other <main> elements. The <main> element is designed to be a direct child of the <body>

<iframe> : Inline Frame element

by

Introduction

The <iframe> (Inline Frame) element is an HTML tag used to embed another document or web page within the current HTML document. It allows you to include content from external sources such as other web pages, videos, maps, or interactive applications seamlessly into your own webpage. The content within the <iframe> is independent of the surrounding document, and it can be from a different domain.

Here’s a basic example of how to use the <iframe> element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IFrame Example</title>
</head>
<body>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2486.5755359352615!2d76.61701204925981!3d28.190632948307677!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d51bc962d7525%3A0xcb4e993c6083c76c!2sZillionsoftech%20Pvt.%20Ltd.%20Computer%20Institute%20Rewari!5e0!3m2!1sen!2sin!4v1705666402893!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</body>
</html>

Output :

In the example above:

  • The src attribute specifies the source URL of the content you want to embed.
  • The width and height attributes define the dimensions of the

Uses of <iframe> tag :

The <iframe> element is commonly used for various purposes on the web to embed content from external sources into a webpage. Some common uses of <iframe> links include:

1. Embedding External Websites: You can use an <iframe> to embed content from another website directly into your webpage. For example, embedding a map from Google Maps or a Twitter timeline.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IFrame Example</title>
</head>
<body>
  <iframe src="https://zillionsoftech.com/" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</body>
</html>

2. Embedding Videos: Popular video-sharing platforms like YouTube provide embed codes for their videos, allowing you to include them in your webpage using an <iframe>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IFrame Example</title>
</head>
<body>
  <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Freel%2F3724511201166422&width=500&show_text=false&height=889&appId" width="500" height="889" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>
</body>
</html>

3. Including Interactive Content: Embedding interactive content, such as online games or interactive applications, using iframes can enhance the user experience.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IFrame Example</title>
</head>
<body>
  <iframe src="https://example.com/interactive-game" width="800" height="600" frameborder="0"></iframe>
</body>
</html>

4. Displaying Documents: You can use iframes to display documents, PDFs, or other file types within your webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IFrame Example</title>
</head>
<body>
  <iframe src="ap.pdf" width="800" height="600" frameborder="0"></iframe>
</body>
</html>

5. Ads and Widgets: Some services provide widgets or ads in the form of iframes that you can easily integrate into your website.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IFrame Example</title>
</head>
<body>
  <iframe src="https://ad-provider.com/ad-widget" width="300" height="250" frameborder="0"></iframe>
</body>
</html>

6. Embedding Forms: You can use iframes to embed forms from external services into your webpage, such as a survey or a signup form.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IFrame Example</title>
</head>
<body>
  <iframe src="https://form-provider.com/signup-form" width="400" height="600" frameborder="0"></iframe>
</body>
</html>

When using iframes, it’s crucial to consider security and ensure that you have the necessary permissions to embed and display content from external sources. Additionally, keep in mind that some websites may have restrictions on embedding their content, so it’s essential to check the terms of use for each specific case.

<u> : Underline element

by

Introduction

The <u> tag represents some text that is unarticulated and styled differently from normal text. Historically, it has been used to underline text on web pages.

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>
  <style>
    ul {
      list-style-type: square;
    }
  </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, impedit. <u>Incidunt reprehenderit maiores</u> neque quas asperiores adipisci quidem, labore nobis <u>saepe officiis optio</u> cupiditate quo ipsa provident vel sit minima?</p>
</body>
</html>

Output :

The text written under the <u> tag is display with underline.

<ul> : Unordered List element

by

Introduction

The <ul> (Unordered List) element in HTML is used to create a list of items where the order or sequence of items is not important. Each item in the list is represented by the <li> (List Item) element.

Here’s an example of how to use the <ul> element:

<!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>
  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>   
</body>
</html>

Output :

In this example, the default rendering is usually as a bulleted list.

You can also use the <ul> element with different list styles by changing the list-style-type CSS property.

For example, you can use list-style-type: square; to have square bullets.

<!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>
    ul {
      list-style-type: square;
    }
  </style>
</head>
<body>
  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>   
</body>
</html>

Output :

The <ul> element is often used in scenarios where the order of items is not significant, such as a list of features, characteristics, or items in a navigation menu. It is a versatile element for creating visually structured and organized content on web pages.

<ol> : Ordered List element

by

Introduction

The <ol> (Ordered List) element in HTML is used to create a list of items where the order or sequence of items is important. Each item in the list is represented by the <li> (List Item) element.

Here’s an example of how to use the <ol> element:

<!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>
  <ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ol>  
</body>
</html>

Output :

In this example, the numbers 1, 2, and 3 will be automatically generated by the browser, indicating the order of the items. The default rendering is usually as a numbered list.

You can also use attributes with the <ol> element to customize its appearance or behavior.

# Type Attribute:

<!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>
  <ol type="A">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ol>  
</body>
</html>

Output :

# Start Attribute:

<!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>
  <ol start="5">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ol>  
</body>
</html>

Output :

The <ol> element is often used in conjunction with the <li> element to create structured and ordered lists on web pages. It is commonly employed in instructional content, recipes, steps of a process, or any scenario where the order of items is significant.