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 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:
Ordered Lists (<ol>) – Displays items in numerical order.
Unordered Lists (<ul>) – Displays items with bullet points.
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.
✅ Inspection 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! 😊
Top comments (0)