Day 1 - Inline Elements

This guide demonstrates common Inline elements, Media, and Tables with their code and actual output.

1. Links

Using <a> tags for navigation (Links may not work in this demo context).

Code:

<a href="/">Block elements page</a> |
<a href="./inline_elements.html">Inline elements page</a>  |
<a href="./form_elements.html">Form elements page</a>

Output:

Block elements page | Inline elements page | Form elements page

2. Buttons

Using <button> tags for user interaction.

Code:

<button type="button">Click Me!</button>
<button type="submit">Submit</button>

Output:

3. Text Formatting

Various tags for formatting text within a paragraph.

Code:

<p>Hello I am <b>superman!</b></p>
<p>I am very <strong>strong</strong></p>
<p>I have <i>lasser eyes</i></p>
<p>I can <em>fly</em> in the sky</p>
<p>I have a dog named  <mark>Krypto</mark></p>
<p>He's a <small>strong</small> dog too</p>
<p>Lorem ipsum dolor <del>sit</del>  amet.</p>
<p><ins>Lorem</ins> ipsum dolor sit amet.</p>

Output:

Hello I am superman!

I am very strong

I have lasser eyes

I can fly in the sky

I have a dog named Krypto

He's a strong dog too

Lorem ipsum dolor ~~sit~~ amet.

Lorem ipsum dolor sit amet.

4. Subscript & Superscript

Useful for chemical formulas or ordinal numbers.

Code:

<h3>H<sub>2</sub>O</h3>
<h3>13<sup>th</sup> floor</h3>

Output:

H₂O

13^th floor

5. Special Characters

What it does: HTML entities let you render characters that the parser would otherwise misinterpret as markup — specifically <, >, &, and " — plus hundreds of typographic and symbolic glyphs.

When to use it in real projects:

Code documentation / tutorials: Any page that displays raw HTML snippets must entity-escape angle brackets, otherwise the browser renders the example instead of showing it as text.
CMS and user-generated content: Always sanitize and entity-encode output from untrusted sources to prevent XSS attacks — your backend or templating engine should do this automatically, but knowing why matters.
Typographic polish: Use —, «, or © instead of copy-pasting Unicode characters that can get mangled by encoding mismatches in email or legacy systems.

Code:

<h2>Is 71 &gt; 13 &amp; 22 &lt; 5?</h2>

Output:

Is 71 > 13 & 22 < 5?

5. Emojis

What it does: Emojis are treated as regular text characters (Unicode) in HTML. They don't require special image tags, just the character itself.

Pro Tip: To quickly insert emojis while coding, use the system shortcuts: Win + . (Windows) or Cmd + Ctrl + Space (macOS).

When to use it in real projects:

Microcopy and UI: Adding quick visual cues to buttons or alerts without needing an icon library.
Marketing pages: Adding personality to headings or bullet points.
Custom list markers: Using emojis as bullet points for a more unique and branded feel compared to standard discs or squares.

Code:

<p>Warning: Server is down 🚨</p>
<button>Add to Cart 🛒</button>

<!-- Emoji List Marker -->
<ul style="list-style-type: '🚀 ';">
  <li>Fast Delivery</li>
  <li>Global Support</li>
</ul>

Output:

Warning: Server is down 🚨

Fast Delivery
Global Support

6. Abbreviation

Hover over the text to see the full meaning.

Code:

<abbr title="Inventive Media">IM</abbr>

Output:

7. Line Break

Using <br> to force a new line.

Code:

<p>
    Lorem, ipsum dolor sit amet... <br>
    Possimus cupiditate...
</p>

Output:

Lorem, ipsum dolor sit amet...
Possimus cupiditate...

8. Address

Defining contact information.

Code:

<address>
    Inventive Media Philippines<br>
    Karmela Building 2590<br>
    Makati City, Metro Manila<br>
    Philippines<br>
    <a  href="mailto:inventivemedia.ph@gmail.com">inventivemedia.ph@gmail.com</a><br>
    <a href="tel:+63288242145">+63 2  88242145</a>
</address>

Output:

Inventive Media Philippines
Karmela Building 2590
Makati City, Metro Manila
Philippines
inventivemedia.ph@gmail.com
+63 2 88242145

9. Quotations

Blockquotes, citations, and inline quotes.

Code:

<h3>Block quote</h3>
<blockquote  cite="https://www.inventivemedia.com.ph/faculty/">
    It is a fact that people...
</blockquote>

<h3>Citation</h3>
<p>One of the best novels I've read is <cite>To Kill a  Mockingbird</cite> by Harper Lee.</p>

<h3>Quote</h3>
<p>Steve Jobs once said, <q>Innovation distinguishes  between a leader and a follower.</q></p>

Output:

Block quote

It is a fact that people need to study and have the right to quality education. Education is perhaps the best solution to end illiteracy, injustice and poverty.

Citation

One of the best novels I've read is To Kill a Mockingbird by Harper Lee.

Quote

Steve Jobs once said, Innovation distinguishes between a leader and a follower.

10. Media & Embeds

Embedding multimedia and external content.

Code:

<!-- 1. Images -->
<h4>Picsum Photo</h4>
<img src="https://picsum.photos/300/160?random=1" alt="Picsum  example" width="300">

<h4>Pravatar Avatar</h4>
<img src="https://i.pravatar.cc/300" alt="Pravatar example"  width="150">

<h4>LoremFlickr People</h4>
<img src="https://loremflickr.com/300/160/people" alt="LoremFlickr  example" width="300">

<!-- 2. Audio -->
<audio controls autoplay muted loop>
    <source src="./audio/music.mp3"  type="audio/mp3">
</audio>

<!-- 3. Video -->
<video height="220" width="340" controls autoplay muted loop>
    <source src="./video/videoplayback.mp4"  type="video/mp4">
</video>

<!-- 4. PDF (Embed) -->
<embed src="./misc/html-slides.pdf" width="500" height="500"  type="application/pdf">

<!-- 5. IFrame (Google Map) -->
<iframe src="https://www.google.com/maps/embed?..." width="250"  height="250" style="border:0;" allowfullscreen=""  loading="lazy"></iframe>

Output:

1. Images:

Picsum Photo

Pravatar Avatar

LoremFlickr People

2. Audio:

3. Video:

4. PDF (Embed):

5. IFrame (Google Map):

11. Hyperlinks

The <a> tag creates clickable hyperlinks. The href attribute defines the destination.

1. Relative vs Absolute URLs

Code:

<!-- Relative URL: path is relative to the current file -->
<a href="block_elements.html">Go to Block Elements  (Relative)</a>

<!-- Absolute URL: full address including protocol and domain  -->
<a href="https://www.google.com" target="_blank">Go to Google  (Absolute)</a>

Output:

Go to Block Elements (Relative)

Go to Google (Absolute)

2. Text Hyperlink — Relative

Code:

<a href="block_elements.html">Block Elements Lesson</a>

Output:

Block Elements Lesson

3. Text Hyperlink — Absolute

Code:

<a href="https://developer.mozilla.org" target="_blank">MDN Web  Docs</a>

Output:

MDN Web Docs

4. Hyperlink — New Tab

Code:

<a href="https://www.google.com" target="_blank">Open Google in  New Tab</a>

Output:

Open Google in New Tab

5. Email Hyperlink

Code:

<a href="mailto:hello@example.com">Send us an email</a>

Output:

Send us an email

6. Telephone Hyperlink

Code:

<a href="tel:+639171234567">+63 917 123 4567</a>

Output:

+63 917 123 4567

7. PDF Hyperlink

Code:

<a href="./misc/html-slides.pdf" target="_blank">View HTML  Slides (PDF)</a>

Output:

View HTML Slides (PDF)

8. Download Hyperlink

Code:

<a href="./misc/Inventive-Media-HTML-CSS-Bootstrap.zip"  download="Inventive-Media-HTML-CSS-Bootstrap">Download Course Files  (.zip)</a>

Output:

Download Course Files (.zip)

9. Named Anchor

Code:

<!-- The link -->
<a href="#anchor-target">Jump to the target section  below</a>

<!-- The target element -->
<h4 id="anchor-target">You landed here!</h4>

Output:

Jump to the target section below

(scroll down — the target is a few lines below)

📍 You landed here!

This element has id="anchor-target", making it a named anchor destination.

< Previous: Block Elements | Next: HTML Special Characters >

Day 1 - Inline Elements

1. Links

Code:

Output:

2. Buttons

Code:

Output:

3. Text Formatting

Code:

Output:

4. Subscript & Superscript

Code:

Output:

H2O

13th floor

5. Special Characters

Code:

Output:

Is 71 > 13 & 22 < 5?

5. Emojis

Code:

Output:

6. Abbreviation

Code:

Output:

7. Line Break

Code:

Output:

8. Address

Code:

Output:

9. Quotations

Code:

Output:

Block quote

Citation

Quote

10. Media & Embeds

Code:

Output:

Picsum Photo

Pravatar Avatar

LoremFlickr People

11. Hyperlinks

1. Relative vs Absolute URLs

Code:

Output:

2. Text Hyperlink — Relative

Code:

Output:

3. Text Hyperlink — Absolute

Code:

Output:

4. Hyperlink — New Tab

Code:

Output:

5. Email Hyperlink

Code:

Output:

6. Telephone Hyperlink

Code:

Output:

7. PDF Hyperlink

Code:

Output:

8. Download Hyperlink

Code:

Output:

9. Named Anchor

Code:

Output:

📍 You landed here!

H₂O

13^th floor