HTML Program to Demonstrate Text elements
Learn HTML step by step.
How to write text like it appears on a website?
Jan 22, 2026
# Text elements
## 1. A Website is a "Document," Not a "Poster"
Many beginners view a website as a digital banner—all about colors and large text. However, a tutorial or blog website is actually a **structured document**, much like a textbook or a manual.
The foundation of a high-quality tutorial isn't design; it's the **hierarchy of information**:
- **Headings** for structure.
- **Paragraphs** for explanation.
- **Emphasis** for key terms.
- **Code Blocks** for technical examples.
- **Notes/Warnings** for student guidance.
If you treat your HTML as a document, your content becomes more readable for humans and more indexable for search engines.
## 2. Block vs. Inline: The "Classroom" Rule
To master HTML, you must understand how elements sit on the page.
### Block Elements
Think of a teacher writing on a blackboard. When they start a new topic, they move to a fresh line.
- **Behavior:** Takes up the **entire width** of the line.
- **Flow:** Content after a block element starts on a new line.
- **Examples:** `<h1>` to `<h6>`, `<p>`, `<div>`, `<ul>`, `<pre>`.
### Inline Elements
Think of a student highlighting a single word in a textbook sentence.
- **Behavior:** Stays **within the flow** of the line.
- **Flow:** Does not create a new line; it only takes up as much space as the content inside it.
- **Examples:** `<span>`, `<a>`, `<strong>`, `<code>`, `<img>`.
## 3) Paragraph `<p>` — The backbone of a tutorial
You are writing a tutorial. For any explanation, `<p>` is the best tag.
HTML
```
<p>HTML gives meaning to the browser.</p>
<p>Attributes give extra power to tags.</p>
```
**The purpose of `<p>`:**
- **Readable spacing**
- **Grouping sentences**
**Beginners make this mistake:**
They overuse the `<b>` tag. **Bad habit:**
HTML
```
HTML gives meaning to the browser<br>
Attributes give power to tags<br>
Next line<br>
```
This is weak for "document writing".
**The correct way:**
Make each explanation block a paragraph.
## 4. Span `<span>`: The Precise Highlighter
While `<dev>` is for big sections, `<span>` is for small parts of a sentence. It is an inline tag used when you want to target a specific word for future styling.
**Example:**
HTML
```
<p>Note: <span class="keyword">id</span> is unique.</p>
```
The `<span>` allows you to color the word "id" differently without breaking the paragraph.
---
## 5. Meaning vs. Style: Strong and Emphasis
HTML is about **meaning (semantics)**, not just how things look.
### 5.1 `<strong>` vs. `<b>`
- `<strong>`: Semantic meaning. Tells the browser/screen reader: **"This is important!"** * *Usage:* `<p> <strong> Warning:</strong> Do not duplicate IDs. <p>`
- `<b>`: Visual bold only. No special meaning.
- *Usage:* `<p> The creator of HTML was <b>Tim Berners-Lee </b>.</p>`
### 5.2 `<em>` vs. `<i>`
- `<em>`: Emphasis. Changes the "speaking tone" of a sentence.
- *Usage:* `<p>Don't ignore <em> attributes </em> in HTML.</p>`
- `<i>`: Visual italics. Used for book titles, technical terms, or foreign words.
---
## 6. Smart Usage of Text Tags
| Tag | Name | Use Case |
| --------- | --- | --- |
| <u> | Underline | Use rarely (can be confused with links). |
| <small> | Small Print | Side notes, copyright info, or version numbers. |
| <mark> | Highlight | Excellent for highlighting "Remember" points in tutorials. |
**Example:**
HTML
```
<p><mark>Remember:</mark> Attributes always go in the opening tag.</p>
```
---
## 7. Layout Tools: `<br>` and `<hr>`
- **`<br>` (Line Break):** Use this **only** for content where a new line is part of the data, like an address or poetry.
- *Don't use it to create space between paragraphs!*
- **`<hr>` (Horizontal Rule):** Use this to visually separate different topics or chapters in your tutorial.
---
## 8. Displaying Code: The "Heroes" of Your Site
Since you are building a programming blog, these tags are your most important tools.
### 8.1 `<code>` (Inline Code)
Use this to mention a keyword or tag inside a sentence.
In HTML, the <code>id</code> attribute is unique.
### 8.2 `<pre>` (The Preformatted Block)
The browser usually ignores extra spaces and line breaks. The `<pre>` tag tells the browser: **"Keep the spacing exactly as I wrote it."**
**The Correct Way to Show a Code Block:**
HTML
```
<pre>
<code>
function helloWorld() {
console.log("Hello, World!");
}
</code>
</pre>
```
## 9) HTML way of writing code: `<code>`, `<pre>`, `<kbd>`
You are building a tutorial website. Therefore, code blocks are the **"heroes"** of your content.
### 9.1 `<code>` — Inline Code
Showing code within a sentence:
`<p>In HTML, the <code>id <code> attribute is unique.<p>`
### 9.2 `<pre>` — Code Block
The function of `<pre>` is to preserve spaces and indentation.
HTML
```
<pre>
<h1>Hello</h1>
<p>Text</p>
</pre>
```
**Real-world use:**
For tutorials, it's best to wrap `<code>` inside `<pre>`.
HTML
```
<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
</code></pre>
```
### 9.3 `<kbd>` — Keyboard Input
Showing shortcuts in a tutorial:
`<p>To open VS Code, press <kbd>Ctrl </kbd> + <kbd>Shift </kbd> + <kbd>P </kbd>.<p>`
This is a sign of writing professional tutorials.
## 10) Nesting Rules — This is where 80% of students get stuck
Nesting means putting one tag inside another tag.
**Example:**
`<p> This paragraph has an <strong>important <strong> word.<p>`
Here, `strong` is nested inside `p`.
**The Golden Rule:** The tag that opens first, closes last.
- ✅ **Correct:** `<p> <strong>Hello </strong> </p>
- ❌ **Incorrect:** `<p> <strong> Hello </p></strong>`
**Think of it this way:** You put a small box inside a big box. The small box will close first, then the big box.
### 10.1 Incorrect Nesting Example (Common Mistake)
- ❌ **Incorrect:** `<p><h2>Title <h2>; </p>`
**Why is this wrong?** Because `h2` is a block element. A block element doesn't logically fit inside a paragraph.
- ✅ **Correct:**
```html
<h2>Title</h2>
<p>Explanation</p>
```
## 11) Now Attributes in Depth (Part 2 Level)
In Part 1, we covered the basics. Here's the remaining main use-oriented solution.
### 11.1 `id` (Unique)
**Where to use:** Section linking, Headings, Table of contents.
```html
<h2 id="html-attributes">HTML Attributes</h2>
<a href="#html-attributes">Go to section</a>
```
### 11.2 `class` (Group)
**Where to use:** Recurring notes, Warnings, Code blocks, Highlight boxes.
HTML
```
<p class="note">This note should be remembered by the student.</p>
<p class="note">This is also a note.</p>
```
### 11.3 `title` (Hover Meaning)
**Where to use:** Small icons, Short text, Button tips.
`<a href="next.html" title="Open next chapter">Next</a>`
### 11.4 `lang` and `dir`
If you are writing Hindi words in the tutorial:
`<p lang="hi">This is a Hindi line</p>`
Direction for right-to-left:
`<p dir="rtl">meetcode</p>`
### 11.5 `hidden`
In my blog for extra content for future release:
`<p hidden >Coming soon section</p>`
## 12) Links `<a>` Deep: Attributes that make you professional
Beginners using anchor tags might only use `href`. But on a tutorial site, you need to understand 3 things: `href`, `target`, and `rel`.
**Example:**
`<a href="https://example.com" target="_blank" rel="noopener">Open </a>`
- **`target="_blank"`**: Opens in a new tab.
- **`rel="noopener"`**: Provides security and performance benefits.
### 12.1 Relative vs. Absolute Links
- **Absolute Link (Full URL):**
`<a href="https://meetcode.in/blog.php">Blog</a>`
- **Relative Link (Same website):** `<a href="blog.php">Blog</a>`
Relative links are better for portability and server changes.
---
## 13) Images `<img>'` Deep Dive: Attributes that Improve SEO
**Image tag essentials:**
- **`src` & `alt`**: Basic necessity. `<img src="html.png" alt="HTML logo">`
- **`width` and `height`**: The browser finds the placeholder area. The page remains stable (less layout shift).
`<img src="html.png" alt="HTML logo" width="300" height="200">`
- **`loading="lazy"`**: Improves page speed by loading images only when needed.
`<img src="banner.png" alt="Tutorial banner" loading="lazy">`
## Part 2 Exercise (Basic HTML + Attributes)
You can create the "HTML Text Tools" page on your site like this:
HTML
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Text Tags - MeetCode</title>
<meta name="description" content="In-depth explanation of HTML text tags with examples.">
</head>
<body>
<h1 id="top">HTML Text Tags</h1>
<p class="intro">
On this page, we will understand HTML text tags in a practical way.
</p>
<h2>Quick Links</h2>
<ul class="toc">
<li><a href="#p">Paragraph</a></li>
<li><a href="#span">Span</a></li>
<li><a href="#strong">Strong vs. b</a></li>
<li><a href="#code">Code Tags</a></li>
</ul>
<hr>
<h2 id="p">Paragraph</h2>
<p>
The paragraph tag is used for longer explanations. It provides readable spacing.
</p>
<h2 id="span">Span</h2>
<p>
<code><span></code> is used to wrap words within a sentence.
</p>
<p>
Example: <span title="Additional information">Attributes</span> are important in HTML.
</p>
<h2 id="strong">Strong vs. b</h2>
<p>
<strong>Strong</strong> shows importance semantically.
<b>Bold</b> is just a visually thicker font.
</p>
<h2 id="code">Code Tags</h2>
<p>Inline code example: <code>id</code></p>
<pre><code>
<h1>Hello</h1>
<p>This is text</p>
</code></pre>
<p>
<a href="#top" title="Go back to the top">Back to top</a>
</p>
</body>
</html>
```
## Conclusion
In this article, we explored the core concepts of How to write text like it appears on a website?. Understanding these fundamentals is crucial for any developer looking to master this topic.
## Frequently Asked Questions (FAQs)
**Q: What is How to write text like it appears on a website??**
A: How to write text like it appears on a website? is a core concept that helps you solve problems in a structured way.
**Q: Why is How to write text like it appears on a website? important?**
A: It improves readability, reduces bugs, and makes code easier to maintain.
**Q: How to get started with How to write text like it appears on a website??**
A: Start with basic examples, then practice small problems step by step.
**Q: Are there any prerequisites?**
A: Basic programming fundamentals and syntax knowledge is enough.
**Q: Can I use How to write text like it appears on a website? in real projects?**
A: Yes, it is widely used in real-world development.
**Q: Where can I learn more?**
A: Check other chapters and practice problems on the site.