Jan 22, 2026
## HTML's “Professional Layer”: Dates, Authors, FAQs, Progress
### 1) Website Content Needs “Context”
A student reading your tutorial naturally has three questions:
1. Who wrote this?
2. When was it published?
3. Is this information updated?
If you don't provide this context, the tutorial feels incomplete. A professional page includes:
- Author's name
- Publication date
- Last updated date
- Estimated reading time (optional)
Using HTML to display this metadata builds trust with your readers.
### 2) The `<time>` Tag: Making Dates Meaningful
Instead of using a simple paragraph for dates, use the `<time>` tag.
- **Standard Way:** `<p>Published: January 22, 2026</p>` (Browser sees only text).
- **Professional Way:**
HTML
```
<p>Published: <time datetime="2026-01-22">January 22, 2026</time></p>
```
**Why use this?**
- The user sees a readable date.
- The machine (Google) gets a precise, standardized date format (**YYYY-MM-DD**).
#### 2.1 Last Updated Date
To build long-term trust, always show when the content was last refreshed:
`Last updated: <time datetime="2026-01-22">January 22, 2026</time>`
---
### 3) Author Information: Professional Structure
Don't just place the author's name randomly. Use a clean metadata block.
**Example:**
HTML
```
<section aria-label="Post Metadata">
<p>Written by <strong>Mani</strong></p>
<p>Published: <time datetime="2026-01-22">January 22, 2026</time></p>
</section>
```
### 4) `<address>` Tag: Correct Use of Contact Info
The `<address>` tag is for the contact information of the website owner or author—not just a home address.
**Use cases:** Contact pages, Footer support info, or Support emails.
**Example:**
HTML
```
<address>
<p>Meetcode Support</p>
<p>Email: <a href="mailto:support@meetcode.in">support@meetcode.in</a></p>
<p>Phone: <a href="tel:+919999999999">+91 99999 99999</a></p>
</address>
```
### 5) `<details>` + `<summary>`: Built-in Toggle System
This is a powerful tool for tutorial sites because it creates FAQs without needing <a href="/blog-language.php?language_id=4" class="seo-link">JavaScript</a>.
**Example:**
HTML
```
<details>
<summary>What is the difference between HTML and HTML5?</summary>
<p>HTML5 added semantic tags, native media tags, and better form support.</p>
</details>
```
#### 5.1 FAQ Best Structure
Using this structure is AdSense-friendly because it keeps the page tidy while increasing user engagement.
HTML
```
<section aria-label="Frequently Asked Questions">
<h2>FAQ</h2>
<details>
<summary>What is the role of attributes?</summary>
<p>Attributes provide additional properties to a tag to set its behavior or identity.</p>
</details>
</section>
```
### 6) `<progress>` Tag: Track Course Completion
Use this tag to show students how much of a test or course they have finished.
**<a href="/quiz.php" class="seo-link">Mock Test</a> Progress:**
HTML
```
<label for="testProgress">Test Progress</label>
<progress id="testProgress" value="20" max="50"></progress>
```
- **Value="20"**: Chapters completed.
- **Max="50"**: Total chapters.
### 7) `<meter>` Tag: Performance and Scores
While `<progress>` shows a task in progress, `<meter>` shows a measurement within a specific range (like a score or skill level).
**Score Meter Example:**
HTML
```
<label for="scoreMeter">Your Score</label>
<meter id="scoreMeter" value="72" min="0" max="100">72 out of 100</meter>
```
**Skill Level Example:**
`<meter value="0.8" min="0" max="1">80%</meter>`
