HTML Coding Conventions
Here are a few HTML coding conventions you might want to follow to maintain proper coding stardard.
1. Always keep your code clean and well-formed with proper indentation.
2. Always declare the document type as the first line in your document.
3. Use lowercase for element names
4. Close all HTML elements even the empty tags like <hr />, <br />, <img />
5. Use lowercase for attribute names
6. Always enclose attribute values with quotes. (" ")
7. Always add alt attribute to images.
8. Avoid long code lines
9. Do not add blank lines without a reason.
10. Make the <title> elemet as meaningful as possible
11. Always define the language and the character encoding <meta> in the document
12. Use lowercase for filenames
💬 HTML Comments
1. What is an HTML Comment?
A comment is a note in the HTML code that is not displayed in the browser.
Used to explain the code or temporarily disable sections of code.
✅ Example:
<!-- This is a comment -->
2. Syntax
<!-- Your comment goes here -->
Starts with <!--
Ends with -->
Anything inside will be ignored by the browser.
3. Examples of Comments
🔹 Single Comment
<p>Hello World</p>
<!-- This paragraph displays a greeting -->
🔹 Multi-line Comment
<!--
This is a multi-line comment.
You can write notes about the page here.
-->
🔹 Comment Out Code
<!-- <p>This paragraph will not be displayed</p> -->
Useful for testing or temporarily hiding code.
4. Uses of HTML Comments
1. Explain code → Helps you or others understand the code later.
2. Disable code temporarily → Testing or debugging.
3. Add reminders → For future improvements.
5. Important Notes
Comments cannot be nested.
❌ Wrong:
<!-- Outer comment <!-- Inner comment --> -->
✅ Correct:
<!-- Outer comment -->
Comments do not affect page layout or performance.
6. Example in a Webpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Comments Example</title>
</head>
<body>
<!-- Main heading of the page -->
<h1>Welcome to My Website</h1>
<p>This paragraph is visible.</p>
<!--
<p>This paragraph is commented out and will not appear in the browser.</p>
-->
</body>
</html>
📝 Why You Should Describe Web Page Content
Accurately
1. Improves Accessibility
Users with disabilities rely on screen readers to understand web content.
Accurate descriptions ensure everyone can access your content.
✅ Example:
<img src="[Link]" alt="Snow-covered mountain under blue sky">
The alt text accurately describes the image for visually impaired users.
2. Better Search Engine Optimization (SEO)
Search engines like Google read your HTML content and meta tags to rank your page.
Accurate content description helps your page appear in relevant search results.
✅ Example:
<title>Best Italian Pasta Recipes Online</title>
<meta name="description" content="Explore easy and authentic Italian pasta recipes for
beginners and professionals.">
3. Improves Usability
Users understand what your page is about quickly.
Reduces confusion and increases user engagement.
✅ Example:
<h1>Online Programming Tutorials</h1>
<p>Learn HTML, CSS, JavaScript, Python, and more with step-by-step tutorials.</p>
4. Helps Maintain Code
Clear, descriptive content makes it easier for developers to maintain and update the website.
✅ Example:
<!-- Navigation bar for main menu -->
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
</nav>
5. Professionalism
Accurate content shows credibility and professionalism.
Avoid vague titles like "Welcome" or "Page1" → use meaningful descriptions instead.
6. Tips for Accurate Description
1. Use meaningful titles and headings (<h1>, <h2>).
2. Use alt attributes for images.
3. Use meta description for search engines.
4. Write clear and concise content for users.
5. Avoid misleading content (users should get what they expect).
✅ Example of Good Practices
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn HTML, CSS, and JavaScript Online</title>
<meta name="description" content="Step-by-step tutorials to learn HTML, CSS, and
JavaScript for building modern websites.">
</head>
<body>
<header>
<h1>Web Development Tutorials</h1>
</header>
<main>
<article>
<h2>HTML Basics</h2>
<p>Learn how to structure web pages using headings, paragraphs, lists, and
links.</p>
<img src="[Link]" alt="HTML code example with headings and paragraphs">
</article>
</main>
</body>
</html>
📘 HTML Content Model Categories
In HTML, every element belongs to a content model that defines what type of content it can contain and how
it behaves. Understanding this is essential for writing valid HTML.
1. Flow Content
Most HTML elements belong to flow content.
Flow content can appear inside the <body>.
Examples:
o Text content: <p>, <h1>–<h6>, <span>, <strong>
o Embedded content: <img>, <video>, <iframe>
o Sectioning: <div>, <section>, <article>
o Interactive: <a>, <button>
✅ Example:
<body>
<h1>Title</h1>
<p>This is a paragraph with <strong>bold text</strong> and <a href="#">a link</a>.</p>
<img src="[Link]" alt="Example image">
</body>
2. Metadata Content
Appears inside the <head> of the document.
Provides information about the page, not displayed directly.
Examples:
o <title> → Page title
o <meta> → Metadata like charset, description
o <link> → Link to CSS
o <style> → Internal CSS
o <script> → JavaScript
✅ Example:
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<link rel="stylesheet" href="[Link]">
</head>
3. Sectioning Content
Defines document structure.
Helps screen readers and search engines understand page hierarchy.
Examples: <header>, <footer>, <section>, <article>, <nav>, <aside>
✅ Example:
<section>
<header><h2>About Me</h2></header>
<p>Paragraph inside a section.</p>
</section>
4. Heading Content
Elements that define headings.
Examples: <h1> to <h6>
✅ Example:
<h1>Main Title</h1>
<h2>Sub Title</h2>
5. Phrasing Content
Represents text and the markup within text.
Inline content inside paragraphs or headings.
Examples: <span>, <strong>, <em>, <a>, <code>, <abbr>
✅ Example:
<p>This is <em>emphasized</em> text and a <a href="#">link</a>.</p>
6. Embedded Content
Content that embeds other resources.
Examples: <img>, <video>, <audio>, <canvas>, <iframe>
✅ Example:
<video src="movie.mp4" controls></video>
<img src="[Link]" alt="Picture">
7. Interactive Content
Elements that users can interact with.
Examples: <a> (with href), <button>, <input>, <select>, <textarea>
✅ Example:
<form>
<input type="text" placeholder="Enter Name">
<button type="submit">Submit</button>
</form>
8. Form-Associated Content
Elements used inside forms.
Examples: <input>, <textarea>, <button>, <label>, <fieldset>, <select>
✅ Example:
<form>
<label for="email">Email:</label>
<input type="email" id="email">
</form>
9. Script-Supporting Content
Elements that support scripting.
Examples: <script>, <template>, <canvas>
✅ Example:
<script>
alert("Hello World");
</script>
✅ Summary of Content Models
Content Model Description Examples
Metadata Info about page, inside <head> <title>, <meta>, <link>
Flow Main content that can go in <body> <p>, <div>, <section>
Sectioning Defines page structure <section>, <article>, <nav>
Heading Titles & headings <h1>–<h6>
Phrasing Inline text content <span>, <em>, <strong>
Embedded Media & external content <img>, <video>, <iframe>
Interactive User-interactive elements <a>, <button>, <input>
Form-Associated Form controls <input>, <textarea>, <select>
Script-Supporting Elements supporting JS <script>, <canvas>
📦 Block-Level Elements
1. Definition
Block elements are HTML elements that take up the full width of their parent container.
They start on a new line and stack vertically.
Typically used to structure the main layout of a webpage.
2. Characteristics
1. Start on a new line.
2. Take up 100% width by default.
3. Can contain inline elements and other block elements.
4. Used to group content or define sections.
3. Common Block Elements
Element Description
<div> Generic container, no semantic meaning
<p> Paragraph
<h1>–<h6> Headings (h1 largest, h6 smallest)
<ul> Unordered list
<ol> Ordered list
<li> List item
<section> Section of a document
<article> Self-contained article/content
<header> Header section
<footer> Footer section
<nav> Navigation links
<aside> Sidebar or related content
<form> Form container
<table> Table
Element Description
4. Examples
Paragraphs and Headings
<h1>Main Heading</h1>
<p>This is a paragraph. It takes full width and starts on a new line.</p>
<h2>Subheading</h2>
Div and Section
<div>
<h2>Section Title</h2>
<p>Content inside a div block element.</p>
</div>
<section>
<p>This is a section element.</p>
</section>
Lists
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
5. Difference Between Block and Inline Elements
Feature Block Elements Inline Elements
Start on new line? Yes No
Width Full width of container Only as wide as content
Can contain Block & inline Only inline
Example <div>, <p>, <section> <span>, <a>, <b>
✅ Example Combining Both:
<p>This is a <span style="color:red;">red text</span> inside a paragraph.</p>
<p> = block
<span> = inline
6. Why Use Block Elements
Structure your webpage clearly.
Group related content.
Work well with CSS styling and layout.
Required for semantic HTML (SEO & accessibility).
📝 Blockquote Element (<blockquote>)
1. Definition
The <blockquote> element is used to display long quotations from another source.
It is a block-level element, so it starts on a new line and usually has indentation.
Intended for sections of text quoted from another source, not short quotes (for short quotes, <q> is
used).
2. Syntax
<blockquote>
Quoted text goes here.
</blockquote>
3. Example
<blockquote>
“The only limit to our realization of tomorrow is our doubts of today.”
– Franklin D. Roosevelt
</blockquote>
By default, most browsers indent the quoted text.
4. Attributes
🔹 cite
Specifies the source URL of the quotation.
Does not display on page by default, used for reference.
<blockquote cite="[Link]
“Life is what happens when you’re busy making other plans.”
</blockquote>
5. Styling <blockquote> with CSS
You can customize indentation, font, or border to make quotes visually appealing.
<blockquote style="border-left: 4px solid #ccc; padding-left: 10px; color: #555;">
“Success is not final, failure is not fatal: It is the courage to continue that counts.”
</blockquote>
6. Difference Between <blockquote> and <q>
Feature <blockquote> <q>
Purpose Long quotation or section Short inline quotation
Display Block-level (new line, indented) Inline (within paragraph)
Browser Styling Indented by default Usually quotes " " added automatically
✅ Example:
<p>He said <q>Never give up on your dreams.</q> and left the room.</p>
7. Best Practices
1. Use <blockquote> only for long quotes or sections from another source.
2. Include cite attribute to credit the source.
3. Use CSS to improve readability.
4. Avoid using <blockquote> for styling alone; it’s semantic.
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blockquote Example</title>
<style>
blockquote {
border-left: 4px solid #888;
padding-left: 15px;
color: #555;
font-style: italic;
}
</style>
</head>
<body>
<h1>Famous Quote</h1>
<blockquote cite="[Link]
“Success is not final, failure is not fatal: It is the courage to continue that
counts.”
– Winston Churchill
</blockquote>
</body>
</html>
⚪ White Space Collapsing in HTML
1. What is White Space?
White space includes:
o Spaces ( )
o Tabs (\t)
o Newlines (\n)
Used to format code and make it readable.
2. HTML White Space Collapsing Rule
Browsers collapse multiple consecutive white spaces into a single space when rendering content.
This means no matter how many spaces, tabs, or newlines you use, only one space appears in the
browser.
✅ Example:
<p>This is HTML white space.</p>
Browser Output:
This is HTML white space.
Notice all extra spaces are collapsed into one.
3. Why It Happens
HTML ignores extra spaces to keep the layout consistent.
Browsers follow the HTML specification for white space handling.
4. Preserving White Space
Sometimes, you want to show multiple spaces or line breaks. You can use:
(A) Non-breaking Space ( )
<p>This is HTML.</p>
Each adds a visible space.
(B) <pre> Tag
Preserves all spaces and line breaks.
<pre>
This text
preserves
white space and
line breaks.
</pre>
(C) CSS white-space Property
Control white space using CSS:
<p style="white-space: pre;">This text preserves spacing.</p>
Other values:
Value Description
normal Default, collapses spaces
pre Preserves spaces and line breaks
nowrap Collapses spaces, no wrapping
pre-wrap Preserves spaces, wraps text
pre-line Collapses multiple spaces, preserves line breaks
5. Examples
Normal <p> (collapsed)
<p>This is collapsed.</p>
Output: This is collapsed.
Using <pre> (preserved)
<pre>This is preserved.</pre>
Output: Exactly as written, with all spaces intact.
Using CSS white-space: pre;
<p style="white-space: pre;">This is preserved.</p>
6. Summary
By default, HTML collapses consecutive white spaces into one.
To preserve spaces:
1. Use for extra spaces.
2. Use <pre> tag for preformatted text.
3. Use CSS white-space property.
Helps with code formatting, poetry, ASCII art, or special layout needs.
📘 HTML Text & Semantic Elements
1. <pre> Element
Used for preformatted text.
Preserves spaces, tabs, and line breaks as they are written in the code.
Often used for poetry, ASCII art, or code blocks.
✅ Example:
<pre>
Line 1
Line 2 with indentation
Line 3
</pre>
2. Phrasing Elements
These are elements that define the text structure inside a paragraph.
Common ones include:
<span> – generic inline container
<strong> – strong importance (usually bold)
<em> – emphasis (usually italic)
<mark> – highlighted text
<small> – small print (like fine print)
<sub> and <sup> – subscript and superscript
✅ Example:
<p>This is <em>important</em> and <strong>very important</strong>.</p>
<p>Water = H<sub>2</sub>O, E = mc<sup>2</sup></p>
<p>This is <mark>highlighted</mark> text.</p>
3. Editing Elements
<ins> → inserted text (usually underlined).
<del> → deleted text (usually strikethrough).
✅ Example:
<p>My favorite color is <del>blue</del> <ins>green</ins>.</p>
4. <q> and <cite> Elements
<q> → short inline quotation (browser adds quotation marks).
<cite> → used for titles of works (books, songs, research papers).
✅ Example:
<p>He said, <q>Knowledge is power.</q></p>
<p><cite>The Bhagavad Gita</cite> is a famous scripture.</p>
5. <dfn> Element
Used to indicate a term being defined.
✅ Example:
<p><dfn>HTML</dfn> stands for HyperText Markup Language.</p>
6. <abbr> Element
Represents an abbreviation or acronym.
Use title attribute to provide the full form.
✅ Example:
<p><abbr title="World Health Organization">WHO</abbr> was established in 1948.</p>
7. <time> Element
Represents time or date.
Can include datetime attribute for machine-readable format (useful for search engines).
✅ Example:
<p>Our meeting is on <time datetime="2025-10-07">October 7, 2025</time>.</p>
<p>The train leaves at <time datetime="19:30">7:30 PM</time>.</p>
8. Code-related Elements
<code> → for inline code snippets.
<samp> → for sample output from a program.
<kbd> → for user input (keyboard entry).
<var> → for variables in programming or math.
✅ Example:
<p>To print in Python use: <code>print("Hello")</code></p>
<p>Output: <samp>Hello</samp></p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>The formula is: <var>x</var> + <var>y</var> = 10</p>
9. <br> and <wbr> Elements
<br> → line break (forces new line).
<wbr> → word break opportunity (tells browser it may break the word here if needed).
✅ Example:
<p>First line<br>Second line</p>
<p>Thisisaverylongword<wbr>thatmaybreakhere.</p>
✅ Quick Summary Table
Element Purpose
<pre> Preformatted text (keeps spacing & line breaks).
Phrasing Inline text formatting (<em>, <strong>, <mark>, etc.).
Editing Track changes (<ins>, <del>).
<q> Inline quotation.
<cite> Title of a work.
Element Purpose
<dfn> Definition of a term.
<abbr> Abbreviation with full form.
<time> Date/Time info.
<code> Code snippet.
<samp> Program output.
<kbd> User input (keyboard).
<var> Variable in code/math.
<br> Line break.
<wbr> Word-break opportunity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Text & Semantic Elements Example</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
section {
margin-bottom: 30px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
}
h2 {
color: #2c3e50;
pre {
background-color: #f4f4f4;
padding: 10px;
border-left: 5px solid #3498db;
code {
background-color: #f0f0f0;
padding: 2px 4px;
font-family: monospace;
kbd {
background-color: #eee;
border: 1px solid #ccc;
padding: 2px 4px;
border-radius: 3px;
font-family: monospace;
abbr[title] {
text-decoration: underline dotted;
cursor: help;
ins {
background-color: #d4fcbc;
text-decoration: none;
}
del {
background-color: #fbb6b6;
</style>
</head>
<body>
<h1>HTML Text & Semantic Elements Example</h1>
<!-- 1. Preformatted Text -->
<section>
<h2><pre> Element</h2>
<pre>
Line 1
Line 2 with indentation
Line 3
</pre>
</section>
<!-- 2. Phrasing Elements -->
<section>
<h2>Phrasing Elements</h2>
<p>This is <em>emphasized</em> and <strong>strong</strong> text.</p>
<p>This is <mark>highlighted</mark> and <small>small print</small>.</p>
<p>Water = H<sub>2</sub>O, Einstein's formula: E = mc<sup>2</sup></p>
</section>
<!-- 3. Editing Elements -->
<section>
<h2>Editing Elements</h2>
<p>My favorite color is <del>blue</del> <ins>green</ins>.</p>
</section>
<!-- 4. q and cite Elements -->
<section>
<h2><q> and <cite> Elements</h2>
<p>He said, <q>Knowledge is power.</q></p>
<p>Reference: <cite>The Bhagavad Gita</cite></p>
</section>
<!-- 5. dfn Element -->
<section>
<h2><dfn> Element</h2>
<p><dfn>HTML</dfn> stands for HyperText Markup Language.</p>
</section>
<!-- 6. abbr Element -->
<section>
<h2><abbr> Element</h2>
<p><abbr title="World Health Organization">WHO</abbr> was established in 1948.</p>
</section>
<!-- 7. time Element -->
<section>
<h2><time> Element</h2>
<p>Our meeting is on <time datetime="2025-10-09">October 9, 2025</time>.</p>
<p>The train leaves at <time datetime="19:30">7:30 PM</time>.</p>
</section>
<!-- 8. Code-related Elements -->
<section>
<h2>Code-related Elements</h2>
<p>To print in Python: <code>print("Hello World")</code></p>
<p>Program output: <samp>Hello World</samp></p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save your file.</p>
<p>Math formula: <var>x</var> + <var>y</var> = 10</p>
</section>
<!-- 9. br and wbr Elements -->
<section>
<h2><br> and <wbr> Elements</h2>
<p>First line<br>Second line (using <br>)</p>
<p>Thisisaverylongword<wbr>thatmaybreakhere.</p>
</section>
</body>
</html>
