Links & Media in HTML

Creating Hyperlinks Links are created using the <a> tag to navigate between pages. Text Links Image Links Email Links Anchor Links (Jump to Sections) Adding Images Images enhance content and are added using the <img> tag. Responsive Images Favicons & Their Importance Favicons represent websites in browser tabs and bookmarks. Adding a Favicon Importance for […]

  • Post author:
  • Post category: HTML
  • Reading time: 29 mins read
  • Post last modified: April 3, 2025

Creating Hyperlinks

Links are created using the <a> tag to navigate between pages.

Text Links

<a href="https://example.com">Visit Example</a>
HTML

Image Links

<a href="https://example.com">
    <img src="image.jpg" alt="Example Image">
</a>
HTML

Email Links

<a href="mailto:someone@example.com">Send Email</a>
HTML

Anchor Links (Jump to Sections)

<a href="#section1">Go to Section 1</a>

<h2 id="section1">Section 1</h2>
HTML

Adding Images

Images enhance content and are added using the <img> tag.

<img src="image.jpg" alt="Descriptive Text">
HTML

Responsive Images

<img srcset="small.jpg 480w, medium.jpg 1024w" sizes="(max-width: 600px) 480px, 1024px" src="default.jpg" alt="Responsive Image">
HTML

Favicons & Their Importance

Favicons represent websites in browser tabs and bookmarks.

Adding a Favicon

<link rel="icon" type="image/png" href="favicon.png">
HTML

Importance for Branding & SEO

  • Enhances brand recognition.
  • Improves user experience.
  • Boosts SEO ranking.

This article covers links and media. Next, we’ll discuss the basic structure and semantics of HTML.

Tags:

Leave a Reply