Let us share few HTML Tips with code snippets that can boost our coding skills.
Defining Base URL for Relative Links
We can use the <base> tag to define the base URL for all relative URLs in a web page.
This is handy when we want to create a shared starting point for all relative URLs on a web page, making it easier to navigate and load resources.
<head>
<base href="https://shefali.dev" target="_blank" />
</head>
<body>
<a href="/blog">Blogs</a>
<a href="/get-in-touch">Contact</a>
</body>Creating Collapsible Content
We can use the <details> and <summary> tags, when we want to include collapsible content on our web page.
The <details> tag creates a container for hidden content, while the <summary> tag provides a clickable label to toggle the visibility of that content.
<details>
<summary>Click to expand</summary>
<p>This content can be expanded or collapsed.</p>
</details>
===>
Providing Additional Information
The title attribute can be used to provide additional information about an element when a user hovers over it.
<p title="World Health Organization">WHO</p>Improving Video Presentation
The poster attribute can be used with the <video> element to display an image until the user plays the video.
<video controls poster="image.png" width="500">
<source src="video.mp4" type="video/mp4 />
</video>Optimizing Video Loading
We can make video files load faster for smoother playback by using the preload attribute with <video> element.
<video src="video.mp4" preload="auto">
Your browser does not support the video tag.
</video>Creating Download Links
We can use the download attribute with the <a> element to specify that when a user clicks the link, the linked resource should be downloaded rather than navigated to.
<a href="document.pdf" download="document.pdf"> Download PDF </a>Accepting Specific File Types
We can use the accept attribute to specify the types of files accepted by the server (only for file type). This is used with the <input> element.
<input type="file" accept="image/png, image/jpeg" />Managing Translation Features
We can use the translate attribute to specify whether the content of an element should be translated by the browser’s translation features.
<p translate="no">
This text should not be translated.
</p>Enabling Content Editing
Use the contenteditable attribute to specify whether the element’s content is editable or not. When setted to true, It allows users to modify the content within the element.
<div contenteditable="true">
You can edit this content.
</div>Grouping Form Elements
Use the <fieldset> tag to group related elements in a form and the <legend> tag with <fieldset> to define a title for the <fieldset> tag.
<form>
<fieldset>
<legend>Personal details</legend>
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="contact">Contact:</label>
<input type="text" id="contact" name="contact" />
<input type="button" value="Submit" />
</fieldset>
</form>