Related Topics
CSS
HTML
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<header>
<h1>My Web Page</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>My Article</h2>
<p>By John Doe</p>
</header>
<figure>
<img src="myimage.jpg" alt="My Image">
<figcaption>A beautiful image of the countryside</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ligula quis mi luctus fringilla non nec mauris. Sed elementum, elit quis consectetur rhoncus, orci diam tempor diam, a suscipit nisi arcu vel enim.</p>
</article>
</main>
<footer>
<p>© 2023 My Web Page. All rights reserved.</p>
</footer>
</body>
</html>
In this example, the <figure> element is used to contain the image and the <figcaption> element provides a caption for the image. The <img> element inside the <figure> element displays the image, and the alt attribute provides a text description of the image for users who can’t see it.
The <figcaption> element can be placed before or after the <img> element. The caption can be any text that describes the image, such as a title, a description, or a credit line.
By using the <figure> and <figcaption> elements, we’re indicating to web browsers and assistive technologies that the image and its caption are related and should be displayed together. This can help to improve the accessibility and usability of our web pages.
<details>
<summary>Click to expand</summary>
<p>Here is the content that will be expanded and collapsed.</p>
</details>
In this example, the summary element contains the text “Click to expand”, which will be visible on the webpage. When a user clicks on the text, the details element will expand to show the content inside the p element.
You can also include other HTML elements within the details element to create more complex expandable sections. For example, you could include images, lists, or tables within the details element to create more interactive content.
Overall, the details and summary elements provide a simple and easy-to-use way to create expandable sections on a webpage, making it easier for users to interact with and navigate your content.
<mark>Highlighted text</mark>
This will apply the default highlighting style to the text enclosed within the mark tags, which is typically a yellow background with black text. However, you can customize the appearance of the highlighted text using CSS.
For example, you could use the following CSS to change the background color of the highlighted text to green:
mark {
background-color: green;
}
You can also use other CSS properties to customize the appearance of the highlighted text, such as color to change the text color, font-weight to make the text bold, and text-decoration to add an underline or other decorations.
Note that the mark element is typically used to highlight text for emphasis or to indicate a search term or other important information. It is not intended for use as a replacement for a proper heading or other semantic element.
<p>The event will take place on <time datetime="2023-05-15T14:30">May 15, 2023 at 2:30 PM</time>.</p>
In this example, the time element is used to indicate that the text within the element represents a date and time. The actual date and time value is provided using the datetime attribute, which follows the ISO 8601 format (YYYY-MM-DDTHH:MM:SS). The content within the time element is the human-readable representation of the date and time.
Using the time element with a datetime attribute provides several benefits, such as:
It makes the date and time machine-readable, which can be useful for search engines, screen readers, and other tools that rely on structured data.
It allows browsers to display the date and time in a localized format, based on the user’s language and region settings.
It provides a fallback text in case the browser cannot display the date and time, such as when the user is using a text-only browser or the page is printed.
Overall, using the time element is a good practice for adding date and time information to a webpage.
<progress value="50" max="100"></progress>
In this example, the value attribute is set to 50, which means that the task is 50% complete. The max attribute is set to 100, which is the maximum value of the progress bar.
You can also add text to the progress bar by placing it inside the progress element:
<progress value="50" max="100">50%</progress>
This will display the text “50%” inside the progress bar.
The meter Element
The meter element is used to display a measurement in a range. You can use it to display things like the level of a battery, the storage capacity of a device, or the remaining time for a task. To use the meter element, you need to set the value, min, and max attributes:
<meter value="60" min="0" max="100">60%</meter>
In this example, the value attribute is set to 60, which means that the measurement is 60%. The min attribute is set to 0, which is the minimum value of the meter, and the max attribute is set to 100, which is the maximum value of the meter.
You can also add a label to the meter by using the label attribute:
<meter value="60" min="0" max="100" label="Battery level">60%</meter>
This will display the label “Battery level” below the meter.
Overall, the progress and meter elements in HTML are useful for displaying progress information on a webpage. They can help users understand how far along a task is, or how much capacity a device has left.
Popular Category
Topics for You
CSS
Go through our study material. Your Job is awaiting.