HTML Essentials: How to Add Images and Hyperlinks
These two tags are the absolute foundation of all web content.
Welcome! If you want to build a functional webpage, you must be able to add two things: **images** to make it visual and **links** to make it navigable. These two elements, handled by the <img> and <a> tags, are fundamental to the structure and user experience of every website on the internet. Here is a simple guide to mastering them.
1. Adding Images: The <img> Tag
The <img> tag is used to embed an image into an HTML page. Note that it is a **self-closing tag** (it does not have a separate closing tag like </img>) and relies heavily on attributes.
Essential Attributes:
- `src`: (**Source**) Specifies the URL or file path of the image.
- `alt`: (**Alternative text**) Provides a description of the image for screen readers and search engines. It also appears if the image fails to load. This is mandatory for good practice!
<img src="images/my-logo.png" alt="Company logo of a blue star" width="200" height="150">
You can also use the `width` and `height` attributes to define the size, though CSS is preferred for style, these are often used for quick control.
2. Adding Links: The <a> Tag
The <a> tag, or **anchor tag**, is used to create a hyperlink that connects one document or section to another.
Essential Attributes:
- `href`: (**Hypertext Reference**) Specifies the destination URL (the address of the page the link goes to).
- `target`: Specifies where to open the linked document. The value
_blankis commonly used to open the link in a new browser tab.
<!-- Link to an external website -->
<a href="https://www.google.com" target="_blank">Visit Google</a>
<!-- Link to another page on your own website -->
<a href="about.html">About Us</a>
By mastering these two tags, you can give your web pages the visual and navigational backbone they need to function!
Comments
Post a Comment