Search for a command to run...
HTML is the most fundamental pillar of web development. We often ignore some trivial facts that could be very powerful when we know to use them.
Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
Thanks a lot š
Congratulations on your 100th article š and thanks for sharing about accessibility
Thanks a lot, Tracy!
Tapas, this is a great article. Thanks for putting all this together.
I wrote a short piece on HTML tips. You can check it if you want.
Thanks again.
Thanks, Marko. Glad you liked it.
I checked your article and gave it a read already. In fact, the JavaScript tips one too... They are awesome š.
Thank you! š
Wow congrats on making it to šÆ! Another great article by the way nice to have more HTML articles showing up.
Thank you very much!
Congratulations on the 100th post š Always found your posts very insightful.
Thank you very much, Rutik š
Thank you!š
Congrats Tapas on your 100th article! šš I've always been your supporter since I first discovered Hashnode! Keep writing and stay safe :)
Thank you Victoria Lo for your support. You have been a great inspiration, and your continued support means a lot to me.
You also be safe and continue to write awesome pieces.
Thank you, Amr Morsy
Congrats on your 100th article also awesome facts listed. Sometimes I forget those facts š.
Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.
Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD
Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.
A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment
Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.
GreenRoots Blog - A Blog by Tapas Adhikary
186 posts
Educator | YouTuber | Building ReactPlay | Let's Connect
One of the learnings I have after using HTML for over a decade is that many of the facts related to it are so underrated. As a developer, we usually do not pay much attention to them or build a hazy perspective. This article will learn about 10 such very trivial facts but powerful when we know their use. I hope you enjoy reading it.
I couldn't stop myself from bragging that I have achieved the feat of writing 100 articles with this post. I'm extremely proud to continue as a blogger and glad to get great feedback(most of the time) from the community. Thank you very much for your continuous support š!
Alright, let's get to the business now.
alt attribute of the img tag is mandatoryYou must have noticed an alt attribute on an img tag.
<img src="user.png" alt="User Profile Image" />
An alt attribute helps us to specify an alternate text for an image. This alternate text is useful in several situations where the browser can not display the image.
alt tag.As per HTML5 specification,
altis a mandatory attribute for theimgtag. However, you can assign it an empty string when the image is only for decoration purposes.
<img src="user.png" alt="" />
Below is an example of the alternate text displayed when the image is not displayed,
Don't get confused with the alt attribute and the tooltip functionality of the image. The alt attribute doesn't bring a tooltip for an image. Please use the title attribute to get a tooltip on the image. On the other hand, alt provides an invisible description of an image to help with accessibility.
The anchor(<a>) element creates a link to the content outside or inside a web page. The href attribute of the anchor element takes the destination URL to link to outside content.
<a href="https://google.com"> Go to Google </a>
Similarly, we can specify a section's id with a # symbol to reach out to the page's section.
<a href="#bio"> Bio </a>
.....
.....
.....
<div id="bio">
.....
</div>
At times, you may want to provide a custom behavior to the anchor tag where it does more than linking to a page or section. The custom behavior could be anything like making server calls, show-hide a section, etc. We use JavaScript to provide this custom behavior. In these cases, we have to declare the link as a dead link by specifying the value # to the href attribute.
<a href="#"> Dead Link </a>
The custom behavior is usually specified using the event listeners.
<a href="#" onclick="xhrCall()"> Fetch Data </a>
<label>'s for and <input>'s idA <label> tag defines the label for several input elements like text, email, number, date, etc. You can also use it with textarea, select, meter, and progress elements. When you define a label, make sure to give a value for the for attribute.
We can associate a label with another element by matching the value of the for attribute with the id of the element. See it in the example below,
<label for="advanced">Advanced</label>
<input type="radio" name="difficulty" id="advanced" value="advanced">
Here the for attribute value and the id value of the radio input are the same. It is important to follow this association because,
It helps in element selection by increasing the hit area. When a label is associated with an element like a checkbox or radio button, you can toggle/select the element by clicking on the associated label.
Checkbox and RadioLet's define a few radio buttons belong to a radio button group,
<label for="male">
<input id="male" value="M" type="radio" name="gender">Male
</label>
<label for="female">
<input id="female" value="F" type="radio" name="gender">Female
</label>
<label for="na">
<input id="na" value="O" type="radio" name="gender">NA
</label>
Here we have three radio buttons(Male, Female, and NA) that belong to the gender group. We have grouped them by specifying the same value for the name attribute. Also note, there is a value attribute for each of the radio buttons. When a form gets submitted, including these radio buttons, the data is sent to the server from the value attribute.
If you omit the value attribute, the default value will be on. The default value is not useful. Hence, It is important to set the value attribute properly to identify the correct selected option. The same applies to the checkboxes as well.
You may want to set a checkbox or radio button selected by default. You need to add the property checked inside the input tag.
In the code below, we have selected the options JavaScript and Python by default,
<form action="/action.do">
<input type="checkbox" id="js" name="js" value="JavaScript" checked>
<label for="js"> JavaScript </label><br>
<input type="checkbox" id="php" name="php" value="Php">
<label for="php"> Php </label><br>
<input type="checkbox" id="python" name="python" value="Python" checked>
<label for="python"> Python </label><br><br>
<input type="submit" value="Submit">
</form>
It produces,
placeholder?We can set a placeholder text with the placeholder attribute,
<input type="text" placeholder="Tell us your name" />
It produces,
But can we apply a style to the placeholder text? Yes, we can. We can change the look-and-feel of the placeholder text using the ::placeholder CSS selector.
::placeholder {
color: #210065;
opacity: 0.7;
font-family: verdana;
font-size: 16px;
font-style: italic;
}
It will change the placeholder text style as,
You can use this codepen to play with it,
Every HTML element has a display property, and the default value of it is either block or inline. It is important to know if an HTML element is a block-level element or an inline element, as it may heavily impact your final design outcome.
The table below compares a block-level element with an inline element,
| Block Level | Inline |
| The block-level element always starts from the next line | An inline element doesn't start from the next line. It flows side by side. |
| A block-lever element occupies the full length available at the left and right to stretch itself as much as possible. | An inline element takes only the space needed for the element. |
| A default top and bottom margin added to the block-level element | No such default margins are available for inline elements. |
Example of some of the block-level elements:
<article>, <canvas>, <div>, <fieldset>, <figure>, <footer>, <form>, <h1>-<h6>, <p>, <table>, <ul>, <video>, many others.
Example of the Inline elements:
<a>, <b>, <br>, <button>, <i>, <img>, <input>, <select>, <span>, <textarea>, many more.
The autofocus attribute helps to get focus on an input element automatically when the page loads.
<form action="/action.do">
<label for="uname">Username:</label>
<input type="text" id="uname" name="uname" autofocus><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit">
</form>
In the example above, the Username text field gets the focus automatically when the page loads.
Like autofocus, autocomplete is another attribute that comes in handy with the form element's input fields. The autocomplete attribute provides automated suggestions filling out the form field values.
<input type="email" id="email" name="email" autocomplete="on">
To autocomplete to work the following four conditions to satisfy,
<input>, <textarea>, and <select> elements.form element.Read more about the autocomplete attribute values and the administrative levels from here.
iframe is not always badHonestly, it is a separate article topic by itself. But, let me try giving an overview here. The iframe(inline frame) is one of the controversial, abused and oldest HTML tags. It is used to embed another HTML document inside the current HTML. You can embed a video from YouTube, any 3rdparty advertisements, Payment gateways, in fact, a complete webpage itself.
Here is an example of embedding my website in a 500x500 iframe.
<iframe src="https://www.tapasadhikary.com/" height="500px" width="500px"></iframe>
Over the decades, hundreds of thousands of articles have been written to show how bad the iframe is and why to avoid it in practice. Most of the claims made as disadvantages are very true. However, it would be too pessimistic to write off iframe altogether, thinking that we can not use it in our app.
What are the major problems with iframes, and how can we still use them by avoiding them?
Security: As we embed third-party site and content using iframe, we hardly have control over it. This increases the security risk as some malicious content, unwanted popups, etc., may get into our app. The iframe has two special attributes, sandbox and allow, that help you safeguard some of these security concerns.
With the sandbox attribute, we can state what kind of privileges we want to give to the iframe and what to allow, and whatnot. Below is a code example where the iframe can only submit the form and open popup dialog.
<iframe sandbox="allow-forms allow-popups" src="https://www.tapasadhikary.com/"></iframe>
Similarly, with the allow attribute(works on Chrome so far), we can specify the features(battery, camera, autoplay, etc.) to access and perform by the iframe.
Speed: The iframe may make your app slower. It is because the memory consumption goes higher with usages of every iframe. You can avoid the slag by lazy loading your iframes. To do that, add the attribute loading=" lazy to your iframe tag. It will load the iframe only when it is required.
<iframe src="https://tapasadhikary.com/" loading="lazy"></iframe>
It is important to know the iframe attributes and possibilities to use them in practice. You may have better chances to use iframe than completely banning it.
You may also like,
P.S. I love Coffee ā. 