10 trivial yet powerful HTML facts you must know
Tags: html, css, codenewbie, beginners
Published: 2021-04-06 06:42:38

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.

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.

# 1. The `alt` attribute of the img tag is mandatory
You must have noticed an `alt` attribute on an `img` tag.

```html
<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.

- The image path is broken, and it can not be displayed.
- browser can not display the image due to a slow network.
- Users with visual impairments use a screen reader which reads out the text specified in the `alt` tag.

> As per HTML5 specification, `alt` is a mandatory attribute for the `img` tag. However, you can assign it an empty string when the image is only for decoration purposes.

```html
<img src="user.png" alt="" />
```
Below is an example of the alternate text displayed when the image is not displayed,

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617076775222/hBuwPeLd6.png?border=1,CCCCCC&auto=compress)

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.

# 2. The use of a dead link
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.

```html
<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.

```html
<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.

```html
<a href="#"> Dead Link </a>
```
The custom behavior is usually specified using the event listeners.

```html
<a href="#" onclick="xhrCall()"> Fetch Data </a>
```

# 3. Relation between `<label>`'s for and `<input>`'s id
A `<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,

```html
<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 achieving better accessibility. Screen readers will read out the label when the user focuses on the associated elements.
- 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.

 ![hit-areas.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1617087212592/JouMl-O4E.gif?border=1,CCCCCC&auto=compress)

# 4. The default value of a `Checkbox` and `Radio`
Let's define a few radio buttons belong to a radio button group,

```html
<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.

# 5. Select a Checkbox/Radio by default
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,

```html
<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,

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617088877977/QY6VAzW_E.png?border=1,CCCCCC&auto=compress)
 

# 6. Can I style a `placeholder`?
We can set a placeholder text with the `placeholder` attribute,

```html
<input type="text" placeholder="Tell us your name" />
```
It produces,

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617090210574/FmAk2yS9E.png)

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.

```css
::placeholder {
  color: #210065;
  opacity: 0.7;
  font-family: verdana;
  font-size: 16px;
  font-style: italic;
}
```
It will change the placeholder text style as,

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617090327995/B-uQ5ygah.png)

You can use this codepen to play with it,

{% codepen https://codepen.io/atapas/pen/xxgENLg %}

# 7. Block vs. Inline element
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.

![block_inline.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617092256600/0uIewOGop.png)

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.


# 8. Autofocus
The `autofocus` attribute helps to get focus on an input element automatically when the page loads.

```html
<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.

# 9. Autocomplete
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.

```html
<input type="email" id="email" name="email" autocomplete="on">
```
To `autocomplete` to work the following four conditions to satisfy,
- The autocomplete attribute works on `<input>`, `<textarea>`, and `<select>` elements.
- The element must have a name and/or id specified.
- The element must be enclosed within a `form` element.
- The enclosing form must have a submit button.

Read more about the autocomplete attribute values and the administrative levels from [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete). 

# 10. The `iframe` is not always bad
Honestly, 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`.

```html
<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.

 ```html
 <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.

 ```html
 <iframe src="https://tapasadhikary.com/" loading="lazy"></iframe>
 ```
- **SEO:** The search engine considers the content from the iframe belongs to another website. While iframe doesn't have a strong negative impact on SEO, it doesn't positively impact either. It is a better SEO practice to avoid iframe from the main page of the website/app. [Check out this article](https://www.boostability.com/content/the-affect-of-iframes-on-seo) to learn more about iframe and SEO.

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.

<hr />
If you enjoyed this article or found it helpful, let's connect. You can find me on [Twitter(@tapasadhikary)](https://twitter.com/tapasadhikary) sharing thoughts, tips, and code practices.

You may also like,

- [10 useful HTML5 features, you may not be using](https://blog.greenroots.info/10-useful-html5-features-you-may-not-be-using-ckdua7ql300l1m3s1ez7teshc)
- [10 VS Code emmet tips to make you more productive](https://blog.greenroots.info/10-vs-code-emmet-tips-to-make-you-more-productive-ckknjvxal028f1qs18w20e94t)
- [10 useful HTML file upload tips for web developers](https://blog.greenroots.info/10-useful-html-file-upload-tips-for-web-developers-ckgetegpf0c7go9s123wvg7bi)

P.S. I love Coffee ☕. <a href="https://www.buymeacoffee.com/greenroots" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>