HTML

<samp> : Sample Output element

by

Introduction

The <samp> element in HTML is used to represent sample output from a computer program or script. It’s typically used to display text that is the result of a user’s interaction with a computer system, such as command-line output or the response from a program.

Here’s an example of how you might use it:

<!DOCTYPE html>
<html>
<head>
    <title>Sample Output Example</title>
</head>
<body>
    <p>The result of a simple calculation:</p>
    <samp>10 + 5 = 15</samp>
</body>
</html>

Output :

In this example, the <samp> element is used to display the result of a simple calculation, “10 + 5 = 15“. The content inside <samp> represents the sample output of the calculation.

<s> : Strikethrough element

by

Introduction

The <s> element in HTML is used to represent text that is no longer accurate or relevant, indicating a strikethrough effect. It’s often used to show deleted or deprecated information.

Here’s an example of how you might use it:

<!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>The price of laptop is <s>800000</s> 600000 .</p>
</body>
</html>

Output :

In this example, the text “800000” within the <s> element will be displayed with a strikethrough effect, indicating that it’s no longer accurate or relevant.

<q> : Inline Quotation element

by

Introduction

The <q> element in HTML is used to define a short inline quotation. Browsers usually render this element with quotation marks surrounding the quoted text.

Here’s an example of how you might use it:

<!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>The philosopher Socrates once said: <q>An unexamined life is not worth living.</q></p>
</body>
</html>

Output :

In this example, the text “An unexamined life is not worth living.” is quoted inline within the paragraph, and the <q> element is used to denote that it’s a quotation. Depending on the browser’s default styling, it may display with quotation marks around the quoted text.

<progress> : Progress Indicator element

by

Introduction

The <progress> element in HTML is used to create a progress bar or progress indicator. It represents the completion progress of a task or an event. The progress bar can be determinate, meaning the progress is measurable and known, or indeterminate, meaning the progress is ongoing and the completion time is unknown.

Here’s an example of how it can be used:

<!DOCTYPE html>
<html>
<head>
    <title>Progress Bar Example</title>
</head>
<body>
    <h2>File Upload Progress</h2>
    <progress value="50" max="100"></progress>
</body>
</html>

Output :

In this example, the progress bar is set to 50% completion (value="50" out of max="100"). This progress bar will be static and won’t change unless you modify its attributes directly in the HTML code. Typically, JavaScript is used to dynamically update the progress bar based on events or calculations. If you want dynamic behavior without scripting, you would need to use server-side technologies to generate the HTML with the appropriate progress value.

<pre> : Preformatted Text element

by

Introdution

The <pre> element in HTML is used to define preformatted text. This element preserves both spaces and line breaks in the text, displaying it exactly as it appears in the HTML code. It’s typically used for displaying code snippets or any text where formatting is important

For 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>
    <pre>
      This       is       preformatted
      text       with       spaces       preserved.
      hello 
                 user
    </pre>
</body>
</html>

Output :

In the above example, the text will be displayed exactly as it appears between the <pre> and </pre> tags, with multiple spaces preserved and displayed as they are.

<title> : Document Title element

by

Introduction

In HTML, the <title> element is used to define the title of a document, such as a webpage. It is placed inside the <head> element of an HTML document . The text specified within the <title> element appears in the browser’s title bar or tab, and it is also used as the default name when users bookmark the page.

Here’s a basic example of how the <title> element is used:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
          <!-- Content of the webpage goes here -->
</body>
</html>

Ouptut :

In this example, the text “Hello World” specified within the <title> element will be displayed in the browser’s title bar or tab when this HTML document is loaded.

We can change the name of the document according to ourself.

<small> : Side Comment element

by

Introduction

In HTML, the <small> element is used to represent side comments, fine print, legal notices, copyright information, and other smaller text that might require less emphasis compared to the surrounding content. It’s often used for providing additional information or context that is less significant than the main content.

Here’s a basic example:

<!DOCTYPE html>
<html>
<head>
  <title>Object Element Example</title>
</head>
<body>
    <p>The term google itself is a creative spelling of googol, a number equal to 10 to the 100th power, or more colloquially, an unfathomable number. (<small>Googol was coined in the 1930s and is attributed to the nine-year-old nephew of American mathematician Edward Kasner</small>)</p>  
</body>
</html>

Output :

In this example , the text written in <small> tag is consider as less important.

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

1.Legal disclaimers: Providing legal notices or disclaimers in small text at the bottom of a webpage.

2.Footnotes: Adding explanatory notes or references at the bottom of a page or section.

3.Fine print: Displaying fine print for terms and conditions, privacy policies, or other legal agreements.

4.Metadata: Presenting metadata such as publication dates, author names, or licensing information in smaller text.

However, it’s important to note that the <small> element should not be used solely for styling purposes (e.g., to make text smaller). Its purpose is to convey semantic meaning about the content it contains. If you need to style text without implying a change in meaning, consider using CSS to adjust the appearance instead.

<option> : Option element

by

Introduction


In HTML, the <option> element represents an option in a dropdown list (<select> element) or a list of options in a <datalist> element. It can be used within either of these elements to provide users with choices to select from.

Here’s the basic syntax of the <option> element:

<!DOCTYPE html>
<html>
<head>
  <title>Object Element Example</title>
</head>
<body>
    <select>
        <option value="value1">Option 1</option>
        <option value="value2">Option 2</option>
        <option value="value3">Option 3</option>
        <!-- Additional options can be added here -->
    </select>      
</body>
</html>

Output :

In this example, each <option> element represents a choice within the dropdown list. The value attribute specifies the value that will be sent to the server when the form is submitted, while the content of the <option> tag is the visible text that the user sees in the dropdown list.

You can also use the selected attribute to preselect an option by default:

<select>
  <option value="value1">Option 1</option>
  <option value="value2" selected>Option 2 (Selected by default)</option>
  <option value="value3">Option 3</option>
</select>

In a <datalist> element, <option> elements are used to provide a list of autocomplete options for an associated input field:

<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

Here, as the user types in the input field, they’ll be presented with autocomplete suggestions based on the options provided within the <datalist>.

The <option> element can also be used with JavaScript to dynamically manipulate dropdown options based on user interactions or data changes.

<optgroup> : Option Group element

by

Introduction

In HTML, the <optgroup> element is used to group related options within a <select> dropdown list. It does not represent a selectable option itself but rather acts as a container for grouping options together.

Here’s an example of how it’s used:

<!DOCTYPE html>
<html>
<head>
  <title>Object Element Example</title>
</head>
<body>
    <select>
        <optgroup label="Fruits">
          <option value="apple">Apple</option>
          <option value="banana">Banana</option>
          <option value="orange">Orange</option>
        </optgroup>
        <optgroup label="Vegetables">
          <option value="carrot">Carrot</option>
          <option value="broccoli">Broccoli</option>
          <option value="lettuce">Lettuce</option>
        </optgroup>
    </select>
</body>
</html>

Output :

In this example, there are two <optgroup> elements: one for grouping fruits and another for grouping vegetables. Each <optgroup> contains a set of <option> elements that belong to that group.

When rendered in a browser, the options within each <optgroup> will typically be visually grouped together, making it easier for users to identify related choices within the dropdown menu.

<object> : External Object element

by

Introduction

The <object> element in HTML is used to embed external resources, such as images, audio files, video files, or other types of documents, into a web page. It provides a way to include external content within the document, similar to the <img> element for images or the <iframe> element for inline frames.

Here’s a basic example of how the <object> element can be used:

<!DOCTYPE html>
<html>
<head>
  <title>Object Element Example</title>
</head>
<body>
    <object type="application/pdf" data="Social-Subjects-Flag-hands-Flags-of-the-World.pdf" width="250" height="200"></object>
</body>
</html>

Output :

In this example:

  • The <object> element is used to embed a PDF document (Social-Subjects-Flag-hands-Flags-of-the-World.pdf) into the webpage.
  • The data attribute specifies the URL of the external resource to be embedded.
  • The type attribute specifies the MIME type of the external resource. This helps the browser understand how to handle and display the content. In this case, it’s set to "application/pdf".
  • The width and height attributes define the dimensions of the embedded content.
  • The content inside the <object> element, in this case, a paragraph (<p>), serves as fallback content that is displayed if the browser does not support the embedding of the specified content type. It provides a link to download the PDF file if it cannot be displayed.

The <object> element can also be used to embed other types of content, such as images, audio files, or videos, by specifying the appropriate MIME type and URL in the data attribute. Additionally, it supports various attributes and child elements for specifying fallback content, alternative text, and other attributes related to the embedded object.