You now know the basic HTML tags. Now, it is time to learn about some of the most powerful features HTML has to offer: Adding links and media.
Links are used to navigate between web pages, while images, videos, and audio add visual and interactive elements to your site. Let’s explore how to work with them effectively.
If you haven’t already, make sure to check out our previous post on the most common HTML tags to get up to speed on the foundational elements we’ll be building on here.
1. Creating Links with Anchor tag
As we saw in the HTML tags, the <a> tag is used to create hyperlinks. It allows the user to navigate between different pages or websites. But links can also connect to specific parts of the same page or even open files and media.
Here’s how you create a simple link to another page
<a href=”https://www.example.com”>Visit Example</a>
But did you know you can also link to a particular section of your current page? Using an id attribute, you’ve created a “bookmark” and you can link directly to that bookmark now
Links are not only used for navigation but also for SEO to connect pages and content. In our previous blog, we covered how to use the <a> tag to create hyperlinks for content organization.
2. Adding Images with image tag
Images are essential to add context, visual appeal, and branding to your website. The <img> tag is used to embed images, and it does not have a closing tag. Here’s a simple example
The alt attribute is very important for accessibility because it gives a text description of the image to users who cannot see it. Also, having descriptive text aids search engines in indexing your images, which enhances SEO.
Linking Images
Linking images can also make an image clickable, leading users to a different page or resource. This is done by wrapping the <img> tag in an anchor tag (<a>)
3. Embed a video with video tag
HTML5 provides the <video> tag for embedding videos inside your page itself, without third-party plugins such as Flash.
Here’s an example- try yourself
The controls attribute adds a play, pause, and volume buttons to your video. It is possible to add multiple formats of video, which will then auto-detect itself, using <source> for cross-browser support.
4. Embedding audio with audio tag
The <audio> element, much like the code snippet below, allows you to add audio files to your pages. Podcasts, background music-whatever your sound content may be-the <audio> element is the place to go.
The controls attribute here adds the typical audio player controls, like play, pause, and volume. You can also include multiple formats of the audio file for wider compatibility.
5. Linking to Media Files
You can also link directly to media files: images, videos, audio files. You might want to include a download link so users can save the content to their device
The download attribute lets the browser download the file rather than open it.
Conclusion
Mastering links and media in HTML will greatly increase the interactivity and user experience of your website. Whether linking to another page, embedding images, or adding video and audio elements, they are opening endless creative possibilities.
In our previous post, we covered the basics of HTML tags, such as `<p>`, `<h1>–<h6>`, and `<a>`, which forms the basis of content structuring. With these tools now in your arsenal, you’re now ready to take your site to the next level.
At Codeneur, we’re here to help you through every step of your web development journey. Stay tuned for more tips and tutorials!
Happy coding!