HTML Comments, Colors, Links and Images: Episode 6 Tutorial (Updated June 2026) (Updated June 2026)

Episode 6 of our HTML series covers four topics that every web developer uses every single day: comments, colors, links, and images. These aren't advanced concepts — they're foundational. And yet, what most people don't realize is that how you use them separates clean, professional code from code that's hard to maintain and debug. NASSCOM and Deloitte have projected that India needs 1.25 million AI and digital tech professionals by 2027, and frontend web development is a key part of that pipeline. HTML comments help you document your code and collaborate better with teams. Colors define the visual identity of every web page. Links connect the entire web and determine how users navigate between pages. And images are what make web pages visually engaging — but only when you use them correctly with proper attributes. I teach these four topics together in Episode 6 because they represent the transition from static HTML structure to visual, interactive web content. By the end of this episode, your HTML pages will start looking like real websites. Let's get into it.

HTML Comments: How to Write Notes That Browsers Ignore

An HTML comment lets you write notes inside your code that the browser completely ignores — they never show up on the web page. The syntax is simple: start with . Everything between those markers is a comment. You can use comments to explain a tricky section of code, remind yourself why a particular element is structured a certain way, or temporarily disable a block of HTML during testing without deleting it. For example, if you're testing two different navigation layouts, you can comment out one while working on the other. In team projects, comments become even more important — they help other developers (or future you) understand the logic behind your markup without having to decode each element. One practical tip: don't over-comment. Comments should explain the WHY, not the WHAT. If the HTML tag already makes its purpose obvious, a comment just adds noise. Keeping comments meaningful and concise is a sign of professional, maintainable code.

Colors in HTML and CSS: Named, Hex, and rgb() Explained

Colors in HTML can be specified in three main ways. Named colors are the simplest — HTML recognizes 140+ standard color names like red, blue, cornflowerblue, and tomato. These are great for quick prototyping but limited in range. Hexadecimal (hex) color codes like #FF5733 or #2E86C1 give you precise control over all 16.7 million possible colors. A hex code has six characters: the first two represent red intensity (00–FF), the next two green, and the last two blue. Shorthand hex codes like #F73 (equivalent to #FF7733) work when both digits of each pair are the same. The rgb() function — written as rgb(255, 87, 51) — lets you set each channel with a number from 0 to 255 and is often preferred when you're calculating colors dynamically in CSS or JavaScript. There's also rgba() which adds an alpha (opacity) channel: rgba(255, 87, 51, 0.5) gives you a semi-transparent orange. In CSS (where most colors are actually set today), you can use all three formats interchangeably. Understanding how they work makes you much faster at reading design specs and implementing color palettes from design tools like Figma or Adobe XD.

Color Format	Example	Range	Best Use
Named Color	red, blue, tomato	140+ names	Quick prototyping, simple designs
Hex Code	#FF5733	16.7 million colors	Design specs, brand colors, precise control
rgb()	rgb(255, 87, 51)	0–255 per channel	Dynamic styling, color calculations
rgba()	rgba(255, 87, 51, 0.5)	rgb + 0–1 opacity	Overlays, semi-transparent backgrounds

HTML Links: The Anchor Tag, href, target, and rel Attributes

The HTML anchor tag creates hyperlinks — the fundamental mechanism of web navigation. The basic syntax is: Link Text. The href attribute specifies the destination. It can be an absolute URL (https://www.abctrainings.in), a relative URL (about.html), an email link (mailto:info@abctrainings.in), or a phone link (tel:+917039169629). The target attribute controls how the link opens: target="_blank" opens the link in a new tab (useful for external sites), while the default opens in the same tab. For links with target="_blank", you should also add rel="noopener noreferrer" for security — this prevents the linked page from accessing your page via the window.opener object. The title attribute adds a tooltip that appears on hover. You can also wrap images, buttons, or entire div blocks in anchor tags to make non-text elements clickable. Understanding the anchor tag deeply is essential because links are how search engines crawl sites, how accessibility tools help users navigate, and how users move through any web application.

HTML Images: Embedding Photos Correctly with img, src, and alt

The img tag embeds images in HTML pages. Unlike most HTML tags, img is self-closing — there's no separate closing tag. The two essential attributes are src (source: the path or URL to the image file) and alt (alternative text: a description of the image for screen readers and search engines). The alt attribute is not optional — it's required for accessibility compliance and it's what search engines use to understand image content. If an image fails to load, the alt text is what browsers display instead. The width and height attributes set the image dimensions in pixels or as percentages. Setting width and height explicitly (matching the actual image dimensions) prevents Cumulative Layout Shift (CLS), a Core Web Vitals metric that Google uses in ranking. The loading="lazy" attribute tells the browser to only load an image when it's about to enter the viewport, which significantly improves page load performance. Common image formats for the web are JPEG (photos), PNG (graphics with transparency), WebP (modern, smaller file sizes), and SVG (icons and logos). Using WebP with a fallback is the current best practice for performance.

Why These Four Concepts Are Foundational for Web Careers

These four concepts — comments, colors, links, and images — transform your HTML from a structural skeleton into a visually alive, navigable web page. They're also exactly what employers and clients look for in a developer's first portfolio project: does the person understand how to color a design correctly, link pages together, and embed images cleanly? What most people don't realize is that accessibility — which is rapidly becoming a legal requirement in India for government websites and large enterprises — depends heavily on correct use of alt text, link descriptions, and color contrast ratios. WCAG (Web Content Accessibility Guidelines) requires that text have a minimum contrast ratio of 4.5:1 against its background, and that all images have meaningful alt text. These aren't academic details — they're audit criteria for enterprise web projects at companies like TCS, Infosys, and L&T. Knowing them at the fundamentals level, before you even touch JavaScript, sets you apart.

Learn HTML Step by Step at ABC Trainings Pune and Aurangabad

ABC Trainings has trained thousands of web development students across Maharashtra through our structured, project-based HTML-to-full-stack curriculum. Episode 6 is part of our free YouTube series, designed to complement our live training in Pune (Wagholi and Hadapsar), Aurangabad/Sambhajinagar (CIDCO and Osmanpura), and Sangli. Our instructors bring real project experience — websites, e-commerce platforms, and web apps built for clients across industries. Beyond HTML, we cover CSS, JavaScript, React, and Node.js in our full-stack track, leading to placement support with IT companies in Pune's Hinjewadi and Magarpatta corridors, as well as with Sambhajinagar-based IT firms. In Sangli, SMMMA member companies in Kupwad MIDC have growing digital and IT needs that our graduates fill. Under the CMYKPY scheme, Maharashtra IT trainees can earn ₹6,000–₹10,000 per month in stipends during internship. Call +91 7039169629 or WhatsApp 7774002496 to join the next batch.

Under the Chief Minister Yuva Karya Prashikshan Yojana (CMYKPY), Maharashtra students in approved IT skill programs receive a monthly stipend of ₹6,000–₹10,000 during their internship period — making it much easier to complete web development training without financial pressure. Contact ABC Trainings to check your CMYKPY eligibility.

FAQs

What is an HTML comment and how do you write one?

An HTML comment is a note in your code that the browser completely ignores — it never appears on the web page. You write it by placing text between . For example: . Comments are used to explain code logic, document sections for teams, or temporarily disable HTML during testing without deleting it.

What is the difference between hex color and rgb() in HTML?

Both hex and rgb() specify the same colors — they're just different notations. Hex uses a six-character code like #FF5733 (two hex digits each for red, green, blue). rgb() uses decimal numbers from 0 to 255 like rgb(255, 87, 51). Hex is more common in design specs and CSS files because it's compact. rgb() is preferred when calculating or animating colors dynamically in CSS or JavaScript. rgba() adds an opacity channel: rgba(255, 87, 51, 0.5).

What does the target="_blank" attribute do in an anchor tag?

The target="_blank" attribute makes an anchor link open its destination in a new browser tab instead of the current one. It's commonly used for external website links so users don't leave your site. When using target="_blank", always pair it with rel="noopener noreferrer" for security — this prevents the opened page from accessing your page via the JavaScript window.opener object.

Why is the alt attribute important in the img tag?

The alt attribute in the img tag provides a text description of the image for screen readers (used by visually impaired users) and for search engines that cannot see images. If the image fails to load, alt text is displayed in its place. It's also required for WCAG accessibility compliance, which is becoming a legal standard for many Indian enterprise and government websites. Always write meaningful, descriptive alt text — not just "image" or the file name.