| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
1. 'time' Tag
The ‘<time>‘ tag in HTML is used to represent a specific time or date, or both. It helps browsers and search engines recognize the content as a date or time. This tag is particularly useful for events, blog posts, or any situation where time-sensitive data is important.
Example 1: Simple Date
<p>Our next meeting is on <time datetime="2024-08-15">August 15th, 2024</time>.</p>
- Explanation: The ‘
datetime‘ attribute in the ‘<time>‘ tag specifies the machine-readable date in ISO 8601 format. The human-readable text is “August 15th, 2024,” which is displayed to the user.
Example 2: Time with Timezone
<p>The webinar starts at <time datetime="2024-08-11T14:00-05:00">2:00 PM CST</time>.</p>
- Explanation: Here, the time is specified along with the timezone offset (‘
-05:00‘ for CST). The user sees “2:00 PM CST,” but the machine-readable time includes the full timestamp.
2. 'mark' Tag
The ‘<mark>‘ tag is used to highlight text that is relevant or important in the current context. It visually emphasizes the content, typically with a yellow background.
Example 1: Highlighting Important Text
<p>Please note that <mark>registration closes tomorrow</mark>.</p>
- Explanation: The text “registration closes tomorrow” is highlighted, drawing the user’s attention to this critical piece of information.
Example 2: Highlighting a Search Term
<p>You searched for: <mark>JavaScript tutorials</mark>.</p>
- Explanation: When a user searches for “JavaScript tutorials,” the term is highlighted in the search results to indicate a match.
3. 'progress' Tag
The ‘<progress>‘ tag is used to display the progress of a task or process. It visually represents how much of the task is complete. The tag is often used with the ‘value‘ and ‘max‘ attributes to specify the current state.
Example 1: Simple Progress Bar
<label for="file">File upload progress:</label>
<progress id="file" value="32" max="100">32%</progress>
- Explanation: Here, the progress bar shows that 32% of the file upload is complete. The ‘
value‘ attribute specifies the current progress, and ‘max‘ defines the total value (in this case, 100%).
Example 2: Indeterminate Progress
<p>Processing your request, please wait...</p>
<progress></progress>
- Explanation: When the ‘
value‘ attribute is omitted, the progress bar becomes indeterminate, often displayed as an animated bar, indicating that the task is ongoing but the completion percentage is unknown.
Putting It All Together
Here's an example combining all three tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Example</title>
</head>
<body>
<h1>Event Details</h1>
<p>Our next big event is scheduled for <time datetime="2024-09-01T10:00">September 1st, 2024 at 10:00 AM</time>.</p>
<p>Make sure to attend, as the <mark>early bird registration ends soon</mark>!</p>
<p>Registration progress:</p>
<progress value="75" max="100">75% complete</progress>
</body>
</html>
- Explanation: This example showcases an event with a specific date and time, highlights the important registration deadline, and visually displays the registration progress.
