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.
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.
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.
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.
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.
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.
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.
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>elementappears 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.
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.
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 valueattribute 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:
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.
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.
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:
The <object>element is used to embed a PDF document (Social-Subjects-Flag-hands-Flags-of-the-World.pdf) into the webpage.
The dataattribute specifies the URL of the external resource to be embedded.
The typeattribute 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 widthand heightattributes 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 thedata attribute. Additionally, it supports various attributes and child elements for specifying fallback content, alternative text, and other attributes related to the embedded object.
