Code Writing: A Blogger’s Guide to Taming HTML Beasts
Complete practical guide to learning basic HTML for bloggers with working examples and copy-paste ready code you can use immediately.
Word Count: ~4,000 • Reading Time: 27 minutes
HTML Guide for Bloggers | Learn HTML
From Random Editing to Complete Code Control
Imagine standing on a brightly lit theater stage with elegant velvet curtains surrounding you. The scene is beautiful, the appearance professional, but suddenly you glimpse behind the curtains a complex tangle of ropes, wires, and iron pulleys.
In the world of blogging, the traditional visual editor (the graphical interface) is the elegant stage. While HTML represents those wires and pulleys that move everything from behind the scenes.
While most writers stay comfortable in the neat visual editor, the professional blogger sometimes finds themselves forced to dive “behind the curtains.” That moment when you switch from the visual editor to the Text Editor can be frightening; the neat formatting disappears and is replaced by a flood of symbols, words, and interlaced commands.
But—once you understand the simple logic of these symbols—you’ll transform from merely using the platform to mastering it. Capable of fixing any formatting flaw with simple, precise touches. Capable of complete control over how your article looks and functions.
HTML for a blogger isn’t a complex programming language, but the art of structuring ideas so that both human minds and machines understand them equally.
Why All This Effort? The Philosophy of Clean Code
You might wonder: “Why don’t I just stick with the visual editor? Why learn all this scary code?”
The answer is simple: Clean code isn’t just a technical luxury; it’s respect for both your reader and the machine.
When you place a tag (Tag) in the wrong place or forget to close a paragraph, you strain the browser and force it to “guess” what you meant. This guessing can lead to:
- Slow Loading: The browser tries to fix errors instead of executing code directly
- Appearance Distortion: Text may appear in wrong sizes or unexpected locations
- Poor Search Engine Ranking: Google doesn’t understand your page structure correctly
- Difficult Future Editing: When you return to edit the article, everything is chaotic
Clean, organized code ensures:
- ✓ Fast loading and responsiveness
- ✓ Uniform and beautiful formatting
- ✓ Better search engine ranking
- ✓ Easy future editing and maintenance
- ✓ Compatibility across all devices (phones, tablets, computers)
Remember: A blogger’s real power lies in knowing how to build the walls of their digital house, not just furnishing it beautifully.
Lesson One: The “Sandwich” Rule
This is the most important rule you’ll learn. If you understand nothing else, remember this:
If you open a command, you must close it. Always. Without exceptions.
Like a sandwich: you can’t have a sandwich without bread on the top and bottom. Otherwise, it’s just scattered ingredients.
Examples:
<!-- Opening and closing a paragraph --> <p>This is a paragraph</p> <!-- Opening and closing a heading --> <h2>This is a heading</h2> <!-- Opening and closing a link --> <a href="https://example.com">Click here</a> <!-- Common mistake: forgetting to close --> <p>This paragraph has no proper closing <h2>This will cause chaos</h2>
Notice the difference: the command starts with <p> and must end with </p>. The only difference is the forward slash (/) before the tag name.
Forgetting to close a tag is the #1 cause of sudden formatting collapse and arrangement chaos.
Second: Information Behind the Curtains (Page Identity)
Before your reader sees your content, you must tell the browser: “Who am I? What is this page’s name? How do I want it to look?”
This information goes in a section called the “Head,” and contains information invisible to the reader:
<head>
<!-- Page title appearing in search results and browser tab -->
<title>Code Writing: A Blogger's Guide to HTML</title>
<!-- Page description (Meta Description) -->
<meta name="description" content="Complete HTML guide for bloggers">
<!-- Language and character encoding -->
<meta charset="UTF-8">
<html lang="en">
<!-- Formatting commands (CSS) -->
<style>
h2 { color: #c0392b; }
p { line-height: 1.8; }
</style>
</head>
What each line means:
- <title>: Your page name appearing in Google results and browser tab
- <meta name=”description”>: Short description appearing under the title in search results
- <meta charset=”UTF-8″>: Tells the browser the page contains special text characters
- <style>: Where you place formatting commands (colors, sizes, alignment)
Third: Basic Page Structure (General Framework)
Every web page has the same basic structure. Think of it as a fixed template:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<style>
/* Formatting commands here */
</style>
</head>
<body>
<!-- All page content goes here -->
<h1>Your Article Title</h1>
<p>Article paragraphs...</p>
</body>
</html>
What each tag means:
- <!DOCTYPE html>: Tells the browser this is an HTML file (must be at the beginning)
- <html>: Beginning and end of all code
- <head>: Hidden information (title, description, formatting)
- <body>: All visible content to the reader
Fourth: Your Daily Tools – Headings, Paragraphs, and Links
Now that we understand basic structure, let’s focus on things you’ll use daily:
Hierarchical Headings
Headings have 6 levels: from h1 (largest) to h6 (smallest):
<h1>This is the largest main heading</h1> <h2>This is a secondary heading</h2> <h3>This is a smaller heading branching from the second</h3> <h4>Even smaller heading</h4> <h5>Very small heading</h5> <h6>The smallest of all</h6>
Important tip: Use only one h1 per page (your main article title). Then use h2 and h3 for subheadings. This helps search engines understand your article structure.
Paragraphs
Every sentence or group of sentences forming a paragraph should be in a p tag:
<p>This first paragraph talks about a specific topic.</p> <p>This second paragraph is completely different.</p> <p>Third paragraph with a <strong>bold word</strong> and an <em>italicized word</em>.</p>
Notice: you can put formatting inside a paragraph (like bold and italic) using inner tags.
Links
Links allow readers to navigate to another page:
<!-- Regular link --> <a href="https://example.com">Click here to visit Example</a> <!-- Link opening in new window --> <a href="https://example.com" target="_blank">Click to open in new tab</a> <!-- Internal link without https --> <a href="/article-name">Read the other article</a>
Professional standards for links:
- Add
target="_blank"if you want the link to open in a new window - Add
rel="noopener"for security if using target=”_blank” - Make link text clear (instead of “click here,” use “Complete SEO Guide”)
<!-- The correct way --> <a href="https://example.com" target="_blank" rel="noopener">Read the Complete SEO Guide</a>
Images
Images are added with a special tag called img:
<!-- Simple image --> <img src="image.jpg" alt="Image description"> <!-- Image with path --> <img src="/images/photo.png" alt="Illustrative photo"> <!-- Image with specific size --> <img src="image.jpg" alt="Description" width="300" height="200">
Important notes about images:
- src: Image path (where the image is on your site)
- alt: Image description (very important for SEO and screen readers)
- Use compressed images (PNG or JPG) to speed up loading
- Never use alt=”” (empty) – always write a meaningful description
Fifth: Formatting and Emphasis – Making Text Clearer
Now we come to things that make your article look better:
Bold and Italic Text
<!-- Bold text --> <strong>This text is bold and important</strong> or <b>This is also bold</b> <!-- Italic text --> <em>This text is italicized and emphasized</em> or <i>This is also italic</i> <!-- You can combine them --> <strong><em>Text that is both bold and italic</em></strong>
Difference between strong and b: Visually, both make text bold. But strong tells search engines this text is semantically important, while b means “visually bold only.” Use strong most of the time.
Highlighting Part of Text (Span)
If you want to color or format just a small piece of text:
<p>This is normal text <span style="color: red;">and this text is red</span> and back to normal.</p> <!-- With background color --> <span style="background-color: yellow; padding: 5px;">This text has a yellow background</span>
Quotes (Blockquote)
For each quote or important note:
<blockquote style="border-left: 3px solid #1a2e5e; padding-left: 12px; color: #1a2e5e;"> This is an important quote worth emphasizing </blockquote> <!-- Or use a div instead --> <div style="color: #1a2e5e; font-style: italic; border-left: 3px solid #1a2e5e; padding-left: 12px;"> This is an important note in a highlighted box </div>
Sixth: Lists – Organizing Data Logically
Lists make information easier to read and understand. There are two types:
Ordered Lists
When order matters (sequential steps):
<ol> <li>Step One: Open the editor</li> <li>Step Two: Write your content</li> <li>Step Three: Review and correct</li> <li>Step Four: Publish</li> </ol>
Result: appears as a numbered list 1, 2, 3, 4 instead of writing them manually.
Unordered Lists
When order doesn’t matter (random items):
<ul> <li>Grammarly for grammar checking</li> <li>Canva for image design</li> <li>Google Analytics for data analysis</li> <li>WordPress for blogging</li> </ul>
Result: a bulleted list instead of numbers.
Nested Lists
You can place a list inside a list:
<ol>
<li>Writing Tools
<ul>
<li>Grammarly</li>
<li>Hemingway App</li>
</ul>
</li>
<li>Design Tools
<ul>
<li>Canva</li>
<li>Figma</li>
</ul>
</li>
</ol>
Seventh: Tables – Displaying Complex Data
When you want to display data in rows and columns:
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr style="background-color: #f0f0f0;">
<th style="border: 1px solid #ddd; padding: 10px;">Name</th>
<th style="border: 1px solid #ddd; padding: 10px;">Job</th>
<th style="border: 1px solid #ddd; padding: 10px;">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid #ddd; padding: 10px;">John</td>
<td style="border: 1px solid #ddd; padding: 10px;">Blogger</td>
<td style="border: 1px solid #ddd; padding: 10px;">$5,000</td>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 10px;">Sarah</td>
<td style="border: 1px solid #ddd; padding: 10px;">Designer</td>
<td style="border: 1px solid #ddd; padding: 10px;">$4,500</td>
</tr>
</tbody>
</table>
Tag explanations:
- <table>: Table beginning and end
- <thead>: Table head (where column names go)
- <tbody>: Table body (where data goes)
- <tr>: One row (Table Row)
- <th>: Header cell (Table Header)
- <td>: Regular data cell (Table Data)
Eighth: Simple Forms
If you want readers to leave comments or fill out a survey:
<form> <label for="name">Full Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="message">Your Message:</label> <textarea id="message" name="message" rows="5"></textarea> <button type="submit">Send</button> </form>
Common input types:
<!-- Regular text --> <input type="text"> <!-- Email --> <input type="email"> <!-- Password --> <input type="password"> <!-- Number --> <input type="number"> <!-- Date --> <input type="date"> <!-- Checkbox --> <input type="checkbox"> <!-- Radio button --> <input type="radio">
Ninth: The Direction Challenge – The Secret in One Property
This is the real challenge facing every Arabic-speaking blogger.
Imagine writing an article in a foreign template or platform that doesn’t fully support Arabic. You open the page and find:
- Text aligned left instead of right
- Punctuation marks appearing at the beginning instead of the end
- Tables flipped
- Numbers in wrong places
The solution to all this lies in one simple property called dir (Direction):
<!-- To make a specific section right-to-left (RTL) --> <div dir="rtl" lang="ar"> This content will always appear from right to left. Punctuation will be in the correct places. </div> <!-- To make the entire page RTL --> <html dir="rtl" lang="ar"> <!-- All content here will be RTL by default --> </html>
What does dir=”rtl” do?
- ✓ Makes text start from the right
- ✓ Reorders elements correctly
- ✓ Fixes punctuation and number placement
- ✓ Adjusts table and list alignment
- ✓ Tells search engines the text is in Arabic
Always add lang="ar" alongside dir="rtl" for accessibility and usability reasons.
Tenth: Common Mistakes and How to Avoid Them
1. Forgetting Closing Tags
❌ Wrong: <p>This paragraph has no closing <p>Another paragraph ✓ Correct: <p>This paragraph</p> <p>Another paragraph</p>
2. Using Wrong Tags
❌ Wrong: <b>This is very important</b> ✓ Correct (better): <strong>This is very important</strong>
3. Forgetting Alt in Images
❌ Wrong: <img src="photo.jpg"> ✓ Correct: <img src="photo.jpg" alt="Illustrative photo of blogging tool">
4. Using More Than One H1
❌ Wrong: <h1>Article Title</h1> ... <h1>Another subheading</h1> ✓ Correct: <h1>Article Title</h1> ... <h2>Subheading</h2>
Tools to Help You with Code
You don’t need to memorize everything. There are tools to help:
- W3C HTML Validator: Checks for code errors and alerts you to problems
- HTML Formatter: Organizes code properly
- Browser DevTools: Press F12 and select “Inspector” to see actual code
- Editors like Visual Studio Code: Helps you write code easily and catches errors
Conclusion: You Now Have the Keys
HTML isn’t an obstacle but the enabler that gives you complete control over your text.
Breaking the fear starts with practice. In your next article, try writing one paragraph manually through the code editor. It won’t take more than 5 minutes.
You’ll realize the symbols that scared you are actually obedient servants to your ideas. The more you master them, the more creative freedom you’ll discover.
Practical experience matters more than theoretical knowledge. Open a code editor now, copy one of the examples from this guide, and try modifying it. That’s the real path to learning.
References and Resources:
- W3Schools HTML Tutorial — Comprehensive guide in English
- W3C HTML Validator — Check and fix code errors
- HTML Formatter — Organize and format code
- Visual Studio Code — Professional code editor (free)
- MDN Web Docs – HTML — Comprehensive technical reference
Final Note: This guide covers the basics only. HTML is a vast language, but these tools cover 80% of a blogger’s daily needs.
