My Journey Learning HTML & SEO Optimization 🚀(Day-3)

Introduction

Today was an exciting day in my web development journey as I explored essential HTML concepts and dived into the basics of SEO optimization. In this blog, I'll share what I learned about adding images, tables, lists, line breaks, and SEO best practices that improve user experience.

📌 Adding Images in HTML

One of the fundamental elements in HTML is the <img> tag, which is used to insert images into a webpage. I learned how to:

• Use the <img> tag with the src attribute to specify an image.

• Set the width and height to control its dimensions.

• Optimize images for performance and responsiveness.

• Setting the alt attribute improves accessibility and helps in SEO ranking by allowing search engines to understand the image content.

📊 Understanding HTML Tables

HTML tables allow us to display data in a structured way. I learned about:

• The <thead>, <tfoot>, and <tbody> sections for organizing table content.

• Adding captions using the <caption> tag.

• Structuring rows with <tr> and columns with <td>.

• learned about colspan and Rowspan

🔥 The Function of <br> in HTML

The <br> tag is used to insert line breaks within content, making text more readable. Unlike paragraphs (<p>), it doesn’t add extra spacing.

📜 HTML Lists & Their Types

Lists play a crucial role in organizing content. I learned about three types of lists:

1. Ordered Lists (<ol>) – Displays items in numerical order.

2. Unordered Lists (<ul>) – Displays items with bullet points.

3. Description Lists (<dl>) – Used for term-definition pairs.

By changing the type attribute in ordered lists, we can use different numbering styles (e.g., 1, A, i).

🚀 SEO & User Experience Optimization in HTML

Beyond structuring web pages, SEO (Search Engine Optimization) plays a major role in improving a website’s visibility. I explored:

✅ Core Web Vitals

Google uses these metrics to evaluate a website’s user experience:

• CLS (Cumulative Layout Shift): Measures visual stability. The less it is the better it is

• LCP (Largest Contentful Paint): Measures loading performance.

• FID (First Input Delay): Measures interactivity and responsiveness.

✅ To check CWV go to your website and click on inspect and then go to lighthouse there u can see analyzed reports of your website

✅ Meta Description & Keywords

Meta tags provide search engines with a summary of the webpage

Adding well-structured meta descriptions and keywords helps boost a website’s ranking on search engines.

🎯 Conclusion

Today’s learning journey helped me understand both HTML structuring and SEO fundamentals. By implementing best practices, I can improve both design and user experience on web pages.

🚀 Stay tuned for more updates on my learning journey! 😊