All about HTML5 for Absolute Beginners: Part 3

on

All about HTML5 for Absolute Beginners: Part 3





Hello everyone, and welcome back to our exciting HTML5 learning series! We’ve covered some basics, but there’s still much to explore. Today, I’ll guide you through the powerful formatting options HTML5 offers, taking your web development skills to the next level. As we move forward, you'll see how HTML5, when paired with CSS and JavaScript, can bring magic to your future webpages.

Exploring More Text Formatting Options

You might think that bold, italic, and underline options are enough for text formatting. But HTML5 offers much more! Let’s dive into some useful tags that will help you format text effectively for different purposes.

1. Strikethrough: <s>

We use the <s> tag to place a line through the text, often indicating that something is no longer valid, such as a discounted price on an e-commerce site.

Example:

<s>Original Price: $500</s> Discounted Price: $400

Try it out in your code editor to see the effect.

2. Deleted Text: <del>

The <del> tag is especially useful for SEO purposes. It allows you to show content that has been removed or is no longer relevant but still visible for reference.

Example:

<p>The old policy was <del>free shipping on all orders</del>, but it has been updated.</p>

3. Superscript: <sup>

When writing scientific or mathematical content, we often need to display exponents. The <sup> tag allows us to format text as a superscript.

Example:

10<sup>2</sup> = 100

4. Subscript: <sub>

The <sub> tag is useful for chemical formulas and other content that requires subscript formatting.

Example:

H<sub>2</sub>O

5. Highlighting Text: <mark>

The <mark> tag highlights specific parts of the text to draw attention. While it’s not commonly used, it can be helpful in certain cases.

Example:

<p>Please <mark>read the instructions</mark> carefully before proceeding.</p>


6. Code Snippets: <code>

When displaying code or commands that should not be formatted by HTML, the <code> tag is used to maintain the exact appearance of the content.

Example:

<code>echo "Hello, World!";</code>


There are many more formatting tags available, but these are the most commonly used. If you're curious to explore further, check out the official documentation on MDN Web Docs:

MDN HTML5 Formatting Tags


Working with Images in HTML5


Adding images to your website is a fundamental part of web development. HTML5 provides the <img> tag to display images easily. The key requirement is to specify the image's source (src), which can be from your local files or an online source.


Adding an Image from a Local File

If the image is in the same folder as your HTML file, use:


<img src="laptop.jpg" />


If the image is inside a subfolder named "images":


<img src="images/laptop.jpg" />


If it's inside multiple subfolders (e.g., assets > images), use:


<img src="assets/images/laptop.jpg" />


Adding an Image from an External URL

If the image is hosted online, simply provide the full URL:


<img src="https://example.com/images/laptop.jpg" />


Navigating Folders with ./ (Dot Slash)

If your image is outside the current folder, you can use ./ to move up one level.


Example:


<img src="./laptop.jpg" />


Adjusting Image Size

You can control the image dimensions using the width and height attributes.


Example:


<img src="laptop.jpg" width="300px" height="150px" />


Note: HTML doesn't require a closing tag for <img> elements.


Wrapping Up

That’s all for today’s blog! We’ve covered some important formatting techniques and how to add images effectively in HTML5. Focus on practicing these concepts so they become second nature to you.

Thank you for spending your time with me. If you found this helpful, please support my work by sharing this blog with friends and family who are interested in web development.