I think a demo is worth thousands of words, so check out this Codepen:

In the above Pen, I’m showing you four different CSS filler-style loaders – but we can make even more. You can check out this collection I created to see more than 20 different loaders.

You might think the article is going to be super long – I mean, how long will it take to explain how to create 20 different CSS loaders?

Well don’t worry – this tutorial will be super quick, because I’ll show a few CSS tricks that help you create as many variation as you want. The loaders look different, but all of them rely on the same techniques. By simply adjusting a few setting you can get a whole new loader.

The Initial Loader Configuration

Like all the CSS Loaders I create, the HTML code is a simple as a single element. Nothing more! Here’s what it looks like:

<div class="loader">Loading</div>

Then we apply the following CSS:

.loader {
  font-weight: bold;
  text-transform: uppercase;
  color: #0000; /* or transparent */
  -webkit-text-stroke: 1px #000;
}

Nothing fancy so far. We make the text transparent and we add a black stroke to it. Here’s what that looks like:

The -webkit-text-stroke is still tagged as experimental, but it has good browser support so you should be able to use it without any issues. This said, it’s always good to test your code in different browsers to make sure everything works fine.

How to Fill the Text with Colors

Now it’s time to fill our text (that’s why this technique is called the Filling CSS loaders!). To do this, we are going to rely on gradients and background-clip: text. Here’s the code:

.loader {
  background-image: conic-gradient(#000 0 0);
  background-position: left;
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-clip: text;
}

Or the shorthand version if you prefer more compact code:

.loader {
  background: 
    conic-gradient(#000 0 0) text
    left/40% 100% no-repeat;
}

The above figure illustrates the difference between using or not using background-clip: text. It’s pretty clear that the left result is what we are aiming for. We are limiting the background coloration to only the text instead of the whole element.

The conic-gradient(#000 0 0) looks strange, right? It lets you have a one-color gradient. I wrote a small tip about it that I invite you to read to understand why we’re using that particular syntax in this article, “How to correctly define a one-color gradient“.

How to Create the Filling Loaders

Believe it or not, we’re almost done because we have everything we need to make the CSS loaders. For the first loader, we simply animate the background-size as follows:

#l1 {
  animation: l1 1s linear infinite;
}
@keyframes l1 {  /*  width  height */
  0% {background-size: 0%   100%}
  to {background-size: 120% 100%}
}

We start with a width equal to 0% until we reach a width equal to 120%. I could have used 100%, but I want the full coloration to stay longer so I am using a value bigger than 100%. As for the height (the second value of the background-size), it remains at 100%.

The second loader uses the same animation, but instead of a linear timing function, we use steps() to have a discrete animation.

#l2 {
  font-family: monospace;
  animation: l2 2s steps(8, jump-none) infinite;
}
@keyframes l2 {
  0% {background-size: 0%           100%}
  to {background-size: 100% 100%}
}

The text contains 7 characters so we use 8 steps (N + 1). I am also using a monospace font to make sure all the characters have the same width. In case you are wondering about the jump-none value, read the following: How to correctly use steps() with animations.

That’s basically the main trick. By animating the background properties, we create different kinds of loaders. It’s either the background-size like the previous ones or the background-position like the below:

Can you figure out how they work before checking my code? This will be your first homework!

How to Use Multiple Gradients

Using one gradient is enough to create a lot of variations – but we can do even more if we introduce multiple gradients. If you check the fourth loader of the first demo, you’ll see that I’m using seven gradients – one gradient per character.

#l4 {
  font-family: monospace;
  --g: conic-gradient(#000 0 0) no-repeat text;
  background: var(--g) 0,var(--g) 1ch,var(--g) 2ch,var(--g) 3ch,var(--g) 4ch,var(--g) 5ch,var(--g) 6ch;
  background-position-y: bottom;
  animation: l4 3s infinite;
}
@keyframes l4 {
  0%     {background-size: 1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  14.28% {background-size: 1ch 100%,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  28.57% {background-size: 1ch 100%,1ch 100%,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  42.85% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  57.14% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 0   ,1ch 0   ,1ch 0   }
  71.43% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 0   ,1ch 0   }
  85.71% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 0   }
  100%   {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%}
}

I’m using the same gradient, so we consider a CSS variable --g to avoid repetition. Then, I call that variable 7 times inside the background property. All the gradients have the same Y position (bottom) but a different X position. That’s why you see the 0, 1ch, 2ch, …,6ch.

Now if you check the animation, I’m simply animating the height of each gradient individually. At 0%, all of them have a height equal to 0. Then I update their height one by one until all of them are at 100%. The width doesn’t change – it’s always equal to 1ch (the width of one character).

It may look difficult at first glance, but if you think about it one gradient at a time, it’s pretty simple.

What about the third loader, you might ask? For that one, I will rely on my online generator for wavy shapes to generate the gradient configuration:

Then I animate the background-position like below:

#l3 {
  background:
    radial-gradient(1.13em at 50% 1.6em,#000 99%,#0000 101%) calc(50% - 1.6em) 0/3.2em 100%,
    radial-gradient(1.13em at 50% -0.8em,#0000 99%,#000 101%) 50% .8em/3.2em 100% repeat-x;
  background-clip: text;
  animation: l3 2s linear infinite;
}
@keyframes l3 {
  0% {background-position: calc(50% - 1.6em) 0,     50%          .8em}
  to {background-position: calc(50% + 1.6em) 0,calc(50% + 3.2em) .8em}
}

This one is probably a bit trickier, but it’s another example to illustrate all the possibilities. From the simple gradient configuration to the most complex one, we can create as many loaders as we want.

What about creating your own CSS loader? You can use what you have learned from the article and try to create a loader that is not part of my collection. The best way to learn is to practice – so give it a try!

Conclusion

By creating some cool loaders, we went through a bunch of CSS tricks related to gradients and backgrounds. Even if creating loaders is not your goal, you can always re-use the same tricks to do something else.

Don’t forget to check my CSS Tip blog where I am sharing cool CSS tricks and demos.

In this in-depth tutorial, I'll break down some key HTML attributes that enhance accessibility, explaining what they do, and when to use them effectively.

Prerequisites

To follow along with this tutorial, you should have a basic understanding of HTML and a little bit of Javascript knowledge as well.

Table of Contents

1. What are ARIA Attributes?

2. The alt Attribute

3. The aria-label Attribute

   • Best practices for Using aria-label

4. The aria-labelledby Attribute

   • How is aria-label Different from aria-labelledby?

   • Best Practices for Using aria-labelledby

5. The aria-describedby Attribute

   • Best Pracices for Using aria-describedby

6. The role Attribute

   • Common role Values

   • Best Practices for Using the role Attribute

7. The aria-controls Attribute

   • Best Practices for Using aria-controls

8. The aria-selected Attribute

   • Best Practices for Using aria-selected

9. The tabindex Attribute

   • Possible tabindex Values

   • Best Practices for Using tabindex

10. The title Attribute

    • Accessibility Concerns with title

    • Best Practices for Using the title Attribute

11. Using the for Attribute in label

    • Best Practices for Using the for Attribute

12. The scope Attribute

    • Possible scope Values

    • Best Practices for Using scope

13. The aria-hidden Attribute

    • Best Practices for Using aria-hidden

14. The inert Attribute

    • Best Practices for Using inert

15. The aria-live Attribute

    • Possible Values for aria-live

    • Best Practices for Using aria-live

16. The aria-roledescription Attribute

    • Best Practices for Using aria-roledescription

17. The aria-atomic Attribute

    • Best Practices for Using aria-atomic

18. Conclusion

What Are ARIA Attributes?

Most of the attributes listed in this article are ARIA attributes. ARIA, which stands for Accessible Rich Internet Applications, is a set of attributes defined by the W3C (World Wide Web Consortium) to enhance the accessibility of web applications.

ARIA attributes provide additional information to assistive technologies like screen readers. Using them correctly can make complex web applications more accessible to individuals with visual, auditory, or motor impairments.

One key principle of using ARIA is that sometimes it's best not to use it. Although this might seem contradictory, you should only ARIA attributes when necessary. Overusing ARIA can disrupt the experience for users relying on assistive technologies. While sighted users might not notice any issues, excessive or improper use of ARIA can negatively impact accessibility.

The alt Attribute

The alt attribute likely isn't new to you if you've used HTML images. You use it to provide alternative text that displays when an image isn't properly shown on the screen.

But the most important use of the alt attribute is for accessibility. If the alt attribute is not present in an image element, then a screen reader may announce the name of the image file or the URL of the image instead of explaining what it's showing. This can be unhelpful and we don't want that.

The content in the alt attribute should be concise because its primary purpose is to briefly describe an image for those who cannot see it. This includes users who rely on screen readers, search engines, and users with slow internet connections where images may not load. If the alt text is too long, it may include unnecessary details that don't add value to the user's understanding.

The alt attribute is different from an image caption. Captions are visible and can provide more context or additional information about an image. Using a caption as alt text can make it too long and redundant.

If the image is purely decorative, then the alt attribute should be left empty. If an image has an empty alt attribute, an assistive tool will skip it. This is important to help keep users focused on the content and not distract them with unnecessary information.

Here's an example of how you can use the alt attribute:

<p>Lions are remarkable for their powerful roars, 
which can be heard up to five miles away. 
These roars are used to communicate with other 
members of the pride, as well as to ward off rival lions and intruders. 
Although lions are often associated with the African savannah, 
a small population of Asiatic lions still exists in India's Gir Forest, 
making them one of the world's most endangered big cats.</p>

<img src="lion.jpg" alt="a lion" /> <!-- brief and gives context to the paragraph -->

<img src="background-stars.png" alt="" /> <!-- This image is purely for 
decoration so it's left empty -->

The aria-label Attribute

The aria-label attribute is used to provide an accessible name to an element that might not have visible text. A common example of this is a button that contains an image or SVG.

A lot of elements have an accessible name – the accessible name is the content inside the element. The accessible name for the heading in this example is "Frequently Asked Questions"

<h1>Frequently Asked Questions</h1>

Everyone, including people using assistive technology, would clearly understand the meaning of the example above because it contains visible content.

But in the example below, a user relying on a screen reader might miss the content in the button if it doesn't have an aria-label. This is because the content in the button is an SVG and the SVG does not contain any visible content:

<button aria-label="Search">
    <svg
      fill="#000000" 
      height="20px"
      width="20px"
      xmlns="http://www.w3.org/2000/svg" 
      viewBox="0 0 488.4 488.4">
        <g stroke-width="0"></g>
        <g stroke-linecap="round" stroke-linejoin="round"></g>
        <g><g>
        <g>
          <path d="M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6 s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2 S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7 S381.9,104.65,381.9,203.25z" />
        </g> 
        </g></g>
    </svg>
</button>

Do not overuse the aria-label. Not all content needs an aria-label – for example, if you have a button that contains an image with alt, or an SVG with a title, then those attributes act as the accessible name for that element.

<button>
    <img src="search-icon.png" alt="Search" /> <!-- no need for aria-label -->
</button>

<!-- Another example -->

<button>
  <svg
    fill="#000000"
    height="20px"
    width="20px"
    role="image"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 488.4 488.4">
        <title>Search Icon</title> <!-- Accessible name -->
        <g stroke-width="0"></g>
        <g stroke-linecap="round" stroke-linejoin="round"></g>
        <g><g>
        <g>
         <path d="M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6 s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2 S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7 S381.9,104.65,381.9,203.25z" />
        </g> 
        <g><g>
  </svg>
</button>

You should use the aria-label sparingly and appropriately. Overusing the attribute can lead to several issues:

• The aria-label content is not visible to sighted users. If a user with a cognitive disability is using a screen reader for support, they might not understand why they’re hearing different information from what they see on the screen.

• Using aria-label extensively across a large codebase can make the HTML harder to maintain. You may struggle to track where labels are coming from, especially if they’re set programmatically or in multiple places.

Best Practices for Using aria-label

• Whenever possible, use visible text labels. They’re easier to understand and maintain, and they ensure consistent experiences for all users.

• When Possible: If there is already a visible label on the page, use aria-labelledby to link the element to the existing text instead of creating a new label with aria-label (we'll talk about this below).

• If you use aria-label, keep the text short and to the point. It should describe the element’s purpose in as few words as possible.

The aria-labelledby Attribute

The aria-labelledby attribute is used to associate an element with another element that serves as its label. It links the target element to one or more other elements on the page that contain the text that should be used as the label.

You can use this attribute when there is already a visible text label or when the label needs to be composed of multiple text elements.

For example, you can use aria-labelledby in a <section> element to associate it with a heading or other text that serves as a label for the entire section.

<h2 id="about-heading">About Us</h2> 
<section aria-labelledby="about-heading"> <!-- use the id of the h2 -->
    <p>We are a company dedicated to providing excellent service...</p>
</section>

<h2 id="services-heading">Our Services</h2>
<section aria-labelledby="services-heading">
    <p>We offer a wide range of services including...</p>
</section>

Sometimes, you might want to combine multiple pieces of text as the label. You can do this by listing multiple IDs in the aria-labelledby attribute:

<h1 id="dialog-title">Confirmation Required</h1>
<p id="dialog-description">Are you sure you want to delete this item?</p>
<button aria-labelledby="dialog-title dialog-description">Yes</button>

The aria-labelledby is similar to the aria-label in that its purpose is to provide an accessible element.

How is aria-label Different from aria-labelledby?

aria-label directly assigns a string of text as a label for an element. This text is not visible on the screen but is announced by assistive technologies like screen readers. It’s typically used when there is no visible text label.

aria-labelledby points to one or more existing elements on the page (using their id attributes) that should be used as the label for the element. The label text is visible to all users because it’s part of the content of another element.

Best Practices for Using aria-labelledby

• Use aria-labelledby over aria-label when there is already text on the page that can serve as the label. This reduces redundancy and ensures that both sighted users and screen reader users see the same content.

• The id attributes referenced by aria-labelledby must be unique on the page and correctly point to existing elements. If the ID is missing or incorrect, the label won’t work, leading to accessibility issues.

• When combining multiple labels, ensure that the resulting label makes sense when read together. The order of IDs in aria-labelledby matters, as screen readers will read the labels in the order they are listed.

• Like aria-label, avoid overusing aria-labelledby in situations where a simpler approach (like using a visible label element directly) would suffice. This helps keep the code maintainable and reduces the cognitive load for users.

The aria-describedby Attribute

The aria-describedby attribute is used to associate an element with one or more elements that provide additional descriptive information about it. The aria-describedby attribute is used to provide additional context or instructions to an element.

Unlike aria-labelledby, which is meant to provide a label or name, aria-describedby is intended to give users more detailed information or context about an element, often to supplement what they already know from the label.

<label id="full-name">Full name</label>
<input type="text" aria-labelledby="full-name" aria-describedby="info">
<span id="info">Enter your full name.</span>

When both aria-labelledby and aria-describedby are used on the same element, screen readers will first announce the label (from aria-labelledby), then the role of the element (for example, "button"), and finally the description (from aria-describedby).

Best Practices for Using aria-describedby

• Apply aria-describedby when you need to provide users with additional context or instructions that go beyond the label. This is particularly useful for forms, complex controls, or any element that might require clarification.

• While aria-describedby is meant for more detailed descriptions, avoid overly long text. Keep the description focused on what the user needs to know to interact with the element effectively.

• Just like with aria-labelledby, ensure that the elements referenced by aria-describedby have unique and relevant id attributes. The content of these elements should be directly relevant to the element they describe.

The role Attribute

The role attribute is used to specify the role of an element. You can use it to override the default role of a semantic element. It helps assistive technologies understand how an element should be interpreted or interacted with.

When using non-semantic elements (like <div> or <span>) to create interactive controls (buttons, dialogs, tabs, and so on), the role attribute informs assistive technologies of the element’s intended behavior. You can also use the role to define landmark roles that assist in navigation, such as banner or complementary, which defines the structure of the page for screen reader users.

Common role Values

Roles for Landmark Regions:

• banner: Represents the site header.

• navigation: Defines a navigation section of the page, often for site or page navigation links.

• main: Marks the main content of a document, distinct from sidebars, footers, and so on.

• contentinfo: Represents the footer information.

This example below is just for demonstration purposes – you should use the right semantic element when possible:

<div role="banner">
    <h1>My Website</h1>
</div>

<div role="navigation">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</div>

<div role="main">
    <h2>Welcome to My Website</h2>
    <p>Here is some main content...</p>
</div>

<div role="contentinfo">
    <p>&copy; 2024 My Website</p>
</div>

Roles for Widgets and Interactive Elements:

• button: Represents a button element, which users can click to trigger an action.

• dialog: Marks a dialog box or modal that requires user interaction.

• alert: Identifies an element as an important message or alert that requires user attention.

• tablist, tab, tabpanel: Used for tabbed interfaces, where tablist contains the tabs, and each tab controls the visibility of its corresponding tabpanel.

<div role="button" tabindex="0" onclick="submitForm()">Submit</div>

<div role="dialog" aria-labelledby="dialog-title" aria-modal="true">
    <h2 id="dialog-title">Confirmation</h2>
    <p>Are you sure you want to proceed?</p>
    <button onclick="closeDialog()">Close</button>
</div>

Example of Tabbed panel:

<div role="tablist" aria-label="Sample Tabs">
    <button role="tab" id="tab-1" aria-controls="panel-1" aria-selected="true" tabindex="0">Tab 1</button>
    <button role="tab" id="tab-2" aria-controls="panel-2" aria-selected="false" tabindex="-1">Tab 2</button>
    <button role="tab" id="tab-3" aria-controls="panel-3" aria-selected="false" tabindex="-1">Tab 3</button>
</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
    <h2>Content for Tab 1</h2>
    <p>This is the content of the first tab.</p>
</div>

<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
    <h2>Content for Tab 2</h2>
    <p>This is the content of the second tab.</p>
</div>

<div role="tabpanel" id="panel-3" aria-labelledby="tab-3" hidden>
    <h2>Content for Tab 3</h2>
    <p>This is the content of the third tab.</p>
</div>

Best Practices for Using the role Attribute

• Always prefer using native HTML elements that already have the appropriate role (for example, <button>, <header>, <nav>, <main>). This provides better accessibility support across a wider range of browsers and devices.

• Don't overuse or misuse the role attribute as this can lead to confusion and reduced accessibility. Use role to enhance or clarify when needed, not to replace semantic HTML.

• Understand implicit roles. Many HTML elements have implicit roles. For example, an <a> element with an href attribute automatically has the link role. Avoid adding redundant role attributes to these elements.

The aria-controls Attribute

The aria-controls attribute informs a screen reader that the element is controlled or affected by another element. It's commonly used to indicate that a component (like a button or a tab) controls or interacts with another part of the page (like a panel or a menu). It is also used in interactive components such as tabs, accordions, and sliders to describe which parts of the page are affected when the user interacts with the component.

For example, you can use aria-controls on a tab button to indicate which panel each button controls:

<!-- Tab Buttons -->
<button id="tab1" aria-controls="panel1">Tab 1</button>
<button id="tab2" aria-controls="panel2">Tab 2</button>

<!-- Content Panels -->
<div id="panel1" role="tabpanel">Content for Tab 1</div>
<div id="panel2" role="tabpanel">Content for Tab 2</div>

Best Practices for Using aria-controls

• Ensure that the ID used in aria-controls matches the id of the controlled element exactly.

• Use aria-controls in conjunction with role and state attributes like aria-selected, or role="tabpanel" to provide more complete information about the controlled elements and their states.

• Apply aria-controls to interactive elements such as buttons or links that have a direct effect on other elements. It is not typically used for non-interactive content.

The aria-selected Attribute

The aria-selected attribute is used to indicate the current selection state of an element within a group of selectable items. A selectable item could be an option in a menu, a tab in a tabbed panel, or an item in a list box.

Here's an example of the selection state in a list box. aria-selected="true" in option 1 indicates that Option 1 is currently selected.

<!-- Listbox -->
<ul role="listbox">
  <li role="option" aria-selected="true">Option 1</li>
  <li role="option" aria-selected="false">Option 2</li>
  <li role="option" aria-selected="false">Option 3</li>
</ul>

Best Practices for Using aria-selected

• Use aria-selected="true" for the selected item and aria-selected="false" for non-selected items. The value should be a string, not a boolean.

• Ensure that the visual state of the element (for example, active tab or selected option) matches the aria-selected value. Inconsistent states can lead to confusion for users of assistive technologies.

• Use aria-selected in conjunction with appropriate role attributes (for example, role="option" for listbox items) to provide complete context.

• Ensure that aria-selected is updated dynamically as users interact with the interface. For example, when a user selects a new option, update the aria-selected attribute accordingly.

The tabindex Attribute

The tabindex attribute is used to control the keyboard navigation of an element. You can use it to activate focus for non-interactive elements like div, p, or span or disable focus for interactive elements like button, a, input. You can also use it to control focus order on a page.

Possible tabindex Values

Positive values: Elements with positive values become focusable and are included in the tab order with their numbers determining the order in which they are focused. Elements with lower numbers are focused before elements with higher numbers.

<button tabindex="2">Cancel</button> <!-- This will recieve focus last -->
<button tabindex="1">Submit</button> <!-- This will recieve focus first -->

Elements with the same values will be navigated in the order in which they appear.

Note: Using positive tabindex values can lead to a confusing and non-intuitive tab order. It is generally better to use tabindex="0" for elements that should be part of the natural tab order.

Zero: You use this to make an element focusable and include it in the natural tab order based on its position in the document. It's useful for making elements focusable that are not normally focusable (like <div> or <span>).

<div role="button" tabindex="0">Submit</div> 
<!-- The element becomes focusable using the keyboard -->

Negative values: You use this to remove an element from the tab order, meaning it cannot be focused using the Tab key. But it can still be focused programmatically (via JavaScript). It's useful for elements that should not be focusable by default but may need to be focusable under certain conditions.

<input type="text" name="name">
<input type="text" name="other-names" tabindex="-1">
<input type="text" placeholder="email">

<!-- other-names will be skipped when tabbing through the inputs; 
only name and email will receive focus -->

Best Practices for Using tabindex

• Rely on the natural tab order as much as possible. Use tabindex="0" to include elements in the tab order and avoid using positive values unless absolutely necessary.

• Using positive tabindex values can create an unpredictable tab order and make it harder for users to navigate. It's better to use the default flow and tabindex="0".

• Use tabindex="-1" for elements not intended to be focused.

• Ensure that the focus order follows a logical and intuitive sequence, which matches the visual layout and interaction flow of the page.

• Test with keyboard and assistive technologies.

• When dynamically adding or removing focusable elements (for example, through JavaScript), ensure that focus management is handled properly to maintain a smooth experience.

The title Attribute

The title attribute in HTML is used to provide additional information about an element. The content in the attribute shows in a tooltip when a user hovers over the element containing the title. It can be applied to most HTML elements, including links, images, and form fields.

You can use the title attribute to provide a brief explanation or description of the content of an element. For example, you can use it to clarify the meaning of abbreviations or acronyms when used with the <abbr> tag.

<abbr title="World Wide Web">WWW</abbr>
<!-- Hovering over "WWW" displays the tooltip "World Wide Web," 
explaining the abbreviation. -->

<img src="logo.png" 
alt="Company Logo" 
title="This is the logo of our company">
<!-- Users will see "This is the logo of our company" 
when hovering over the image. -->

Accessibility Concerns with the title Attribute

The title attribute can be useful, but it comes with some accessibility concerns:

• Screen readers do not consistently announce the title attribute, especially when there is also an alt attribute – or they may ignore it altogether. Users of assistive technologies may miss out on the information provided by the title attribute, especially if they rely solely on screen readers.

• The tooltip generated by the title attribute typically appears only on hover with a mouse or trackpad. Users who navigate with a keyboard or touch screen may not have access to this information.

• The content of the title attribute is hidden by default and only revealed on hover. This makes it less accessible to users who don't know they need to hover to get additional information.

• Tooltips can be difficult to read because they often disappear quickly, and their content might be truncated or too long to fit within the tooltip window.

Best Practices for Using the title Attribute

• Avoid relying solely on the title attribute. Ensure that critical information is available in a more accessible manner, such as visible text or ARIA attributes.

• Use the title attribute for supplementary, non-essential information that enhances user experience but isn’t critical to understanding the content.

• For form inputs, use the aria-describedby attribute to associate additional instructions with a form element. Use visible labels or descriptions instead of or in addition to the title attribute to ensure that all users have access to the information.

• If you use the title attribute, keep the text brief and to the point. Long tooltips can be difficult to read and may get truncated.

Using the for Attribute in label

The for attribute, when used in <label>, is used to connect a label to its corresponding form control element – that is <input>, <select>, or <textarea>. Screen readers will announce the label when the assigned input is focused. When used correctly, clicking on the label will focus on the corresponding input.

The value of the for attribute should match the id of the input it is associated with:

<label for="fullname">Full Name</label>
<input type="text" id="fullname">
<!-- When the user clicks on the "Full Name" label, 
the cursor will focus on the corresponding input field. -->

Best Practices for Using the for Attribute

• Ensure that each form control has a unique id attribute so that the for attribute can correctly reference it. Avoid using duplicate id values on the same page.

• Avoid empty for attributes. If there’s no associated form control, it can confuse users of assistive technologies.

• Position labels close to their associated form controls. Typically, labels should be placed above or to the left of the form controls for optimal readability and usability.

The scope Attribute

The scope attribute is used in HTML tables to define the relationship between table headers and the cells they describe. The attribute is particularly important for accessibility because it helps screen readers and other assistive technologies understand the structure of the table and convey the correct information to users.

The scope attribute is applied to <th> (table header) elements to specify whether the header applies to a row, a column, or a group of rows or columns

Possible scope Values

• row: Indicates that the <th> element is a header for a row. In the example below, scope="row" is used for the first <th> element in each row, indicating that the header applies to the entire row.

<table>
    <tbody>
        <tr>
            <th scope="row">Product A</th>
            <td>$1000</td>
            <td>$1200</td>
            <td>$1100</td>
        </tr>
        <tr>
            <th scope="row">Product B</th>
            <td>$900</td>
            <td>$950</td>
            <td>$1000</td>
        </tr>
    </tbody>
</table>

• col: Indicates that the <th> element is a header for a column.

<table>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Age</th>
            <th scope="col">Occupation</th>
        </tr>
<!-- The scope="col" attribute indicates that each <th> element 
serves as a header for the corresponding column beneath it. -->
    </thead>
    <tbody>
        <tr>
            <td>Jane</td>
            <td>30</td>
            <td>Engineer</td>
        </tr>
        <tr>
            <td>Tobe</td>
            <td>25</td>
            <td>Designer</td>
        </tr>
    </tbody>
</table>

• rowgroup: Indicates that the <th> element is a header for a group of rows. In the example below, the rows "Marketing Department" and "Sales Department" have the scope="rowgroup" attribute to indicate that these rows act as headers for the groups of rows that follow:

<table>
  <thead>
    <tr>
      <th scope="col">Department</th>
      <th scope="col">Employee Name</th>
      <th scope="col">Position</th>
      <th scope="col">Salary</th>
    </tr>
  </thead>
  <tbody>
    <!-- Row Group for the Marketing Department -->
    <tr>
      <th scope="rowgroup" colspan="4">Marketing Department</th>
    </tr>
    <tr>
      <th scope="row">Amari Pere</th>
      <td>Marketing Manager</td>
      <td>$75,000</td>
    </tr>
    <tr>
      <th scope="row">Uyati Hope</th>
      <td>SEO Specialist</td>
      <td>$65,000</td>
    </tr>

    <!-- Row Group for the Sales Department -->
    <tr>
      <th scope="rowgroup" colspan="4">Sales Department</th>
    </tr>
    <tr>
      <th scope="row">Timini Prosper</th>
      <td>Sales Manager</td>
      <td>$80,000</td>
    </tr>
    <tr>
      <th scope="row">Delilu Pink</th>
      <td>Account Executive</td>
      <td>$70,000</td>
    </tr>
  </tbody>
</table>

• colgroup: Indicates that the <th> element is a header for a group of columns. In the example below, scope="colgroup" is used to indicate that the first row of headers applies to groups of columns (Q1 and Q2), while scope="col" and scope="row" are used for individual columns and rows.

<table>
    <thead>
        <tr>
            <th scope="colgroup">Region</th>
            <th scope="colgroup">Q1</th>
            <th scope="colgroup">Q2</th>
        </tr>
        <tr>
            <th scope="col">Sales</th>
            <th scope="col">Profit</th>
            <th scope="col">Sales</th>
            <th scope="col">Profit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">North</th>
            <td>$2000</td>
            <td>$400</td>
            <td>$2500</td>
            <td>$500</td>
        </tr>
        <tr>
            <th scope="row">South</th>
            <td>$1500</td>
            <td>$300</td>
            <td>$1800</td>
            <td>$350</td>
        </tr>
    </tbody>
</table>

Best Practices for Using the scope Attribute

• Always define scope for complex tables to clarify the relationship between headers and data cells.

• Simplify table structures when possible. While the scope attribute helps with accessibility, consider simplifying table structures where possible. If a table is too complex, it might be difficult for all users to understand, even with proper markup.

• For particularly complex tables, consider using ARIA attributes like aria-labelledby or aria-describedby to provide additional context and ensure that all users can navigate the table effectively.

• After applying the scope attribute, test the table with screen readers to ensure that the relationships between headers and data cells are announced correctly.

• Don’t use scope in situations where it’s unnecessary. For simple tables where each header is clearly associated with a single row or column, HTML’s default behavior is usually sufficient.

The aria-hidden Attribute

The aria-hidden attribute is used to control the visibility of an element for assistive technologies while it's still visible on the screen. You can use it to hide purely decorative elements, like icons or images, that don't add meaningful information to the content. This helps prevent screen readers from reading unnecessary information.

<button>
    <span aria-hidden="true">🔍</span>
    Search
</button>

You can also use it to hide content that has already been announced to prevent redundancy in what screen readers announce. For content that is toggled on and off (like modals, or expandable sections), you can use aria-hidden to hide the inactive content from screen readers, ensuring that they only interact with the visible, active content.

<button>
    <span aria-hidden="true">✉</span> <!-- hide decorative icon -->
    <span>Messages</span>
</button>

You can also use aria-hidden when creating complex widgets (like carousels or tabbed interfaces) to hide inactive panels or slides from assistive technologies, focusing their attention on the active part of the widget.

<div id="menu" aria-hidden="true">
    <!-- Menu content here -->
</div>

<button onclick="toggleMenu()">Toggle Menu</button>

<script>
    const toggleMenu = () => {
        const menu = document.getElementById('menu');
        const isHidden = menu.getAttribute('aria-hidden') === 'true';

        menu.setAttribute('aria-hidden', !isHidden);
    }
</script>

Best Practices for Using aria-hidden

• Only use aria-hidden when you need to hide content from screen readers to avoid overwhelming users with redundant or irrelevant information.

• Do not use on elements that users need to interact with, like buttons or links.

• Ensure that aria-hidden accurately reflects the visibility of elements on the screen. If an element becomes visible or hidden via JavaScript or CSS, update aria-hidden accordingly to maintain accessibility.

• In a team environment, document why and where aria-hidden is used in your codebase, so that other team members understand its purpose and can maintain it properly.

The inert Attribute

The inert attribute prevents an element and all of its descendants from being focusable, interactive, or perceivable by assistive technologies. When an element has the inert attribute, it cannot receive focus, be clicked on, or be interacted with in any way. It's also hidden from assistive technologies like screen readers.

Unlike aria-hidden, which only affects accessibility, inert applies to all user interactions. The inert attribute can be used to disable sections of a page that are temporarily irrelevant, such as during form validation errors, while loading data, or when a certain section is hidden but still in the DOM. It can also be used in complex user interfaces like multi-step forms or wizards to ensure that users only interact with the current step or section

The most common use of inert, however, is in a modal, where you want to prevent users from interacting with the background content while the modal is open.

Like in the example below, when the modal is open the inert attribute is added to the main content, making it non-interactive and hidden from screen readers. When the modal is closed, the inert attribute is removed, and the main content becomes interactive again.

<div id="main-content" inert>
    <p>This is the main content of the page. It will be inactive when the modal is open.</p>
</div>

<div id="modal" role="dialog" aria-modal="true">
    <h2>Modal Title</h2>
    <p>This is the content inside the modal.</p>
    <button onclick="closeModal()">Close Modal</button>
</div>

<script>
function openModal() {
    document.getElementById('main-content').setAttribute('inert', '');
    document.getElementById('modal').style.display = 'block';
}

function closeModal() {
    document.getElementById('main-content').removeAttribute('inert');
    document.getElementById('modal').style.display = 'none';
}
</script>

Best Practices for Using the inert Attribute

• Ensure that when you use inert, the visually inactive or disabled state of elements is clear to sighted users. For example, dimming or blurring background content when a modal is open can complement the inert attribute.

• Don't overuse inert, as doing so might unintentionally make significant portions of your page non-interactive and inaccessible. Use it judiciously to manage user focus and interaction only when necessary.

• When dynamically adding and removing the inert attribute, ensure that it is properly removed when no longer needed so that users can regain access to previously disabled content.

The aria-live Attribute

You can use the aria-live attribute to notify assistive technologies about dynamic content changes on a webpage. When aria-live is applied to an element, screen readers are alerted when the content inside that element is updated, ensuring that users are informed about important changes that occur after the page has initially loaded.

This attribute can be useful for content that updates dynamically, such as notifications, alerts, chat messages, or stock prices. It ensures that users are aware of changes that might otherwise go unnoticed.

Possible Values for aria-live

There are three main values: off, polite, and assertive.

• off: Default value, updates to the element will not be announced by screen readers.

• polite: Updates will be announced by the screen reader, but only after the user has finished interacting with the current task or reading other content. This ensures that the update does not interrupt the user’s current activity.

In the example below, each new message is added to the #messages container, which has aria-live="polite". The screen reader will announce the new message only after the user finishes their current activity.

<div id="chat-window">
    <div id="messages" aria-live="polite">
        <!-- Existing messages are here -->
        <div>John: Hello!</div>
        <div>You: Hi there!</div>
    </div>
</div>

<button onclick="addMessage()">Send Message</button>

<script>
function addMessage() {
    const newMessage = document.createElement('div');
    newMessage.textContent = 'Alice: How are you?';
    document.getElementById('messages').appendChild(newMessage);
}
</script>

• assertive: Updates will be announced immediately, interrupting whatever the screen reader is currently announcing. Use this for urgent or critical information that requires the user’s immediate attention.

In the example below, updates to the stock prices are placed within a container that has aria-live="assertive".

<div id="stock-ticker" aria-live="assertive">
    <!-- Initial stock prices -->
    <div id="stock1">Stock A: $100</div>
    <div id="stock2">Stock B: $150</div>
</div>

<button onclick="updateStockPrices()">Update Prices</button>

<script>
function updateStockPrices() {
    document.getElementById('stock1').textContent = 'Stock A: $95';
    document.getElementById('stock2').textContent = 'Stock B: $155';
}
</script>

Best Practices for Using aria-live

• Use aria-live="polite" for non-critical updates to avoid disrupting the user’s experience. Reserve aria-live="assertive" for urgent updates that require immediate attention, such as critical errors or security warnings.

• Be mindful of how often you use aria-live elements on a page. Overusing it can lead to an overstimulating experience for users who rely on screen readers, as they may be overwhelmed by frequent announcements.

• Don’t use aria-live on content that doesn’t need to be announced, or on content that’s already being communicated to the user in another way.

• aria-live is particularly useful for content that is updated dynamically, such as live sports scores, breaking news, or chat applications. Make sure that the user is kept informed of important updates as they occur.

The aria-roledescription Attribute

You can use aria-roledescription to provide a human-readable, localized description for the role of an element. It overrides the implicit or explicit role value for screen readers, and allows developers to create more intuitive and context-specific descriptions for complex or unconventional user interface components that may not have a standard role name.

You can use it to provide a clearer explanation of the element’s purpose or functionality.

In the example below, screen readers will announce it as "Bookmark Button" instead of just "Button."

<button role="button" aria-roledescription="Bookmark Button">
    <span aria-hidden="true">⭐</span> Save this page
</button>

You can also use it to support internationalization, like providing role descriptions in different languages.

<button role="button" aria-roledescription="Search Button" lang="en">
    <span aria-hidden="true">🔍</span> Search
</button>

<button role="button" aria-roledescription="Botón de busqueda" lang="es">
    <span aria-hidden="true">🔍</span> Buscar
</button>

<button role="button" aria-roledescription="Bouton de recherche" lang="fr">
    <span aria-hidden="true">🔍</span> Recherche
</button>

Best Practices for Using aria-roledescription

• Only use aria-roledescription when the standard role does not sufficiently describe the element's purpose.

• The description should be short, clear, and directly related to the element's function. Avoid using jargon or overly technical language.

• aria-roledescription should be used alongside an appropriate ARIA role, not as a replacement. The role provides the foundational context (like "button" or "listbox"), while the description adds clarity.

• If your application supports multiple languages, ensure that the aria-roledescription values are localized to match the user's language preferences. This helps provide a consistent and understandable experience.

• Ensure that the aria-roledescription does not repeat or conflict with other ARIA attributes or element labels. It should complement, not duplicate, the information already provided.

The aria-atomic Attribute

You can use the aria-atomic attribute to control how updates to an element are announced by assistive technologies. When aria-atomic is set to true, it indicates that when changes occur within the element, the entire content of the element should be treated as a single unit and announced in full by the screen reader (rather than announcing only the changed parts).

In cases where updates to part of an element might make the overall context unclear, aria-atomic helps by providing a full announcement of the element's content, giving users a complete understanding of the context.

It is often used in conjunction with aria-live. While aria-live determines how updates are announced (politely or assertively), aria-atomic controls whether the entire content is read or just the changes.

<div id="news-ticker" role="region" aria-live="polite" aria-atomic="true">
  Breaking News: Major storm expected this weekend.
</div>
<button onclick="updateHeadline()">Update Headline</button>
<script>
function updateHeadline() {
    document.getElementById('news-ticker').innerText = 'Breaking News: Stock market hits record high!';
}
</script>

Best Practices for Using aria-atomic

• Apply aria-atomic="true" only to elements where a full announcement of updates is essential for understanding the context.

• When using aria-atomic="true", ensure that the content within the element provides consistent and complete context to users.

• Use aria-atomic in combination with aria-live to specify how updates should be announced. This ensures that the updates are announced in the appropriate manner and with full context.

Conclusion

Understanding and effectively using HTML attributes for accessibility is crucial for creating inclusive web experiences. By understanding and using these attributes appropriately, you can ensure that your application has a great user experience for all visitors.

Resources

• Providing Accessible Names and Descriptions

• MDN ARIA

• No ARIA is better than Bad ARIA

• ARIA examples by properties and states

Thank you so much for reading, I hope this guide helps you create more accessible web content. If you found it helpful, consider sharing.

You can connect with me on LinkedIn.

In this article, we'll explore how far you can go in creating interactive prototypes using just HTML. We'll challenge the common belief that JavaScript is always necessary for interactivity by showing you how to build engaging features with nothing but HTML. By the end, you'll see that sometimes, simplicity is all you need to bring your ideas to life.

Table of Contents

• Basics of HTML Forms

• Interactive HTML Elements

• Creating Advanced Interactive Prototypes with HTML

• HTML-Only Interactive Techniques

• Design Tips for HTML-Only Prototypes

• Conclusion

Basics of HTML Forms

HTML forms are essential for collecting user input, whether it's for signing up for a service, submitting feedback, or conducting a search. The power of forms lies in their ability to handle user data and send it to a server for processing. Understanding how to construct a basic form is the first step in leveraging HTML's interactive capabilities.

A basic form in HTML might look like this

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" na<button type="submit">Submit</button>
</form>

• The <form> element is a container for all the input elements. The action attribute specifies where the form data should be sent when the form is submitted. The method attribute determines how the data is sent (typically using GET or POST).

• The <label> element provides a user-friendly label for each input field, improving accessibility.

• The <input> elements are where users enter their information. Each input has a type attribute that defines what kind of data it accepts (for example: text, email, password).

• The <button> element submits the form when clicked.

Forms are fundamental because they involve direct user interaction, making them a critical component of any interactive prototype.

Interactive HTML Elements

Beyond forms, HTML includes a variety of elements that naturally respond to user actions. These elements can be used to create interactive interfaces without writing any JavaScript, which is perfect for quick prototyping.

Buttons, Checkboxes, and Radio Buttons

Buttons: Buttons are one of the most straightforward interactive elements. They can perform a wide range of actions, from submitting a form to triggering a CSS animation. Buttons are usually defined with the <button> or <input type="button"> elements.

<button type="button">Click Me</button>

In the above example, the button doesn't do anything by itself unless tied to a form or an action. However, in prototypes, buttons can visually represent functionality, making the prototype feel more complete.

Checkboxes: Checkboxes allow users to select multiple options from a list. They are ideal for scenarios where more than one choice is allowed.

<input type="checkbox" id="option1" name="option1" value="Option 1">
<label for="option1">Option 1</label>

Each checkbox can be checked or unchecked, providing immediate visual feedback.

Radio Buttons: Radio buttons are used when only one option can be selected from a group. This is useful in cases like surveys or quizzes where the user needs to choose one answer.

<input type="radio" id="choice1" name="choice" value="Choice 1">
<label for="choice1">Choice 1</label>

<input type="radio" id="choice2" name="choice" value="Choice 2">
<label for="choice2">Choice 2</label>

When one radio button in a group is selected, the others are automatically deselected, ensuring that only one option is chosen.

These elements are simple yet powerful, providing the basic building blocks for interactive user interfaces.

The <details> and <summary> Elements

The <details> and <summary> elements provide a way to create sections of content that users can expand or collapse. This is particularly useful for FAQs, where you might want to show the question and hide the answer until the user chooses to reveal it.

<details>
  <summary>What is HTML?</summary>
  <p>HTML stands for HyperText Markup Language. It is the standard language used to create web pages.</p>
</details>

How it works:

• The <summary> element is the clickable heading that the user interacts with.

• The content inside the <details> tag (but outside the <summary> tag) remains hidden until the user clicks on the summary, revealing it.

This simple interaction adds a layer of user control, allowing content to be hidden or shown based on user action, all without JavaScript.

Different Types of <input>

The <input> element is one of the most versatile in HTML. Depending on its type attribute, it can serve different purposes, from accepting text input to allowing date selection. Understanding the various input types is key to creating functional prototypes.

Here are a few common types:

Text Input: This is the most common input type, used for single-line text input.

<input type="text" name="username" placeholder="Enter your username">

The placeholder attribute provides a hint to the user about what to enter.

Password Input: This input type hides the characters as the user types, making it suitable for sensitive information like passwords.

<input type="password" name="password" placeholder="Enter your password">

Email Input: The email type ensures that the user’s input is in a valid email format.

<input type="email" name="email" placeholder="Enter your email">

Date Input: This type provides a date picker, allowing users to select a date from a calendar interface.

<input type="date" name="birthdate">

These different input types enhance user experience by providing specialized interfaces for different types of data. They help make the form more intuitive and reduce the likelihood of user errors.

How to Create Advanced Interactive Prototypes with HTML

Once you're comfortable with the basics of HTML forms and interactive elements, you can start creating more advanced prototypes that offer a richer user experience. In this section, we'll explore how to combine form elements to build complex interactions and simulate dynamic content updates, using only HTML.

How to Combine Form Elements for Complex Interactions

Combining different form elements can help you create more sophisticated interactions and user experiences. While HTML alone has its limitations, you can still achieve quite a bit by using these elements creatively.

Multi-step Forms and Conditional Inputs

Multi-step forms are useful when you want to break a long form into smaller, more manageable sections. This approach can improve user experience by making complex forms feel less overwhelming. While HTML alone doesn’t support multi-step functionality directly, you can use the <fieldset> and <legend> elements to organize form sections visually.

Example of a Multi-step Form:

<form>
  <fieldset>
    <legend>Step 1: Personal Information</legend>

    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <button type="button" onclick="document.getElementById('step2').style.display='block';">Next</button>
  </fieldset>

  <fieldset id="step2" style="display:none;">
    <legend>Step 2: Address Details</legend>

    <label for="address">Address:</label>
    <input type="text" id="address" name="address">

    <label for="city">City:</label>
    <input type="text" id="city" name="city">

    <button type="button" onclick="document.getElementById('step2').style.display='none';">Previous</button>
    <button type="submit">Submit</button>
  </fieldset>
</form>

How it works:

• Fieldsets: The <fieldset> element groups related fields together and helps visually separate different sections of the form.

• Legends: The <legend> element provides a title for each section.

• Buttons: Use <button> elements with onclick attributes to show or hide sections. In a real-world scenario, you’d use JavaScript for better control, but this example demonstrates the concept.

Conditional Inputs allow users to fill out additional fields based on previous choices. While HTML alone doesn’t support this functionality natively, you can use checkboxes and radio buttons creatively to show or hide sections of the form.

Example of Conditional Inputs:

<form>
  <label for="subscribe">
    <input type="checkbox" id="subscribe" name="subscribe">
    Subscribe to newsletter
  </label>

  <div id="newsletterDetails" style="display:none;">
    <label for="frequency">Preferred Frequency:</label>
    <select id="frequency" name="frequency">
      <option value="weekly">Weekly</option>
      <option value="monthly">Monthly</option>
    </select>
  </div>

  <script>
    document.getElementById('subscribe').addEventListener('change', function() {
      document.getElementById('newsletterDetails').style.display = this.checked ? 'block' : 'none';
    });
  </script>
</form>

How it works:

• Checkboxes: The checkbox lets users opt into additional options.

• Conditional Display: The <div> with id="newsletterDetails" shows or hides based on the checkbox state. While the JavaScript is necessary to handle the condition, HTML alone provides the structure and initial display.

Simulating Dynamic Content Updates

Simulating dynamic content updates involves creating sections of a webpage that can change based on user input. While full dynamic updates require JavaScript, you can use HTML and CSS to simulate these changes.

Example of Simulated Dynamic Content Updates:

<form>
  <label for="view">Choose a view:</label>
  <select id="view" name="view">
    <option value="overview">Overview</option>
    <option value="details">Details</option>
  </select>

  <div id="overviewContent">
    <h2>Overview</h2>
    <p>This is the overview content.</p>
  </div>

  <div id="detailsContent" style="display:none;">
    <h2>Details</h2>
    <p>This is the detailed content.</p>
  </div>

  <script>
    document.getElementById('view').addEventListener('change', function() {
      var selectedView = this.value;
      document.getElementById('overviewContent').style.display = selectedView === 'overview' ? 'block' : 'none';
      document.getElementById('detailsContent').style.display = selectedView === 'details' ? 'block' : 'none';
    });
  </script>
</form>

How it works:

• Dropdown Menu: A <select> element allows users to choose between different views.

• Content Sections: The content sections are shown or hidden based on the user’s selection. This simulation relies on JavaScript to handle the visibility, but the structure is set up with HTML.

While true dynamic updates are best handled with JavaScript, these examples show how you can create the illusion of interactivity using HTML and CSS alone.

HTML-Only Interactive Techniques

While JavaScript is commonly used for creating interactive features, HTML itself offers several techniques to achieve interactivity. In this section, we'll explore four HTML-only techniques: using the target attribute for page-level interactions, emulating modal dialogs, creating tooltips, and building interactive image maps. Each technique highlights how HTML can be used creatively to add interactive elements to your webpages.

How to Use the target Attribute for Page-level Interactions

The target attribute allows you to control where a linked document will open. This can be used to create interactive experiences that involve navigating between different sections of a page or opening new pages within the same window or tab.

Example of Using the target Attribute:

<a href="#section1" target="_self">Go to Section 1</a>
<a href="#section2" target="_self">Go to Section 2</a>

<h2 id="section1">Section 1</h2>
<p>Content for Section 1...</p>

<h2 id="section2">Section 2</h2>
<p>Content for Section 2...</p>

How it works:

• Anchors (<a> elements): These links navigate to different parts of the same page or other pages. The href attribute points to the target location.

• target="_self": This attribute ensures the link opens in the same window or tab, which is the default behavior. You can use other values like _blank to open links in a new tab or window.

Using the target attribute allows you to control how users interact with links and navigate your site, enhancing the user experience without relying on JavaScript.

How to Emulate Modal Dialogs

Modal dialogs are often used to display important information or prompts that require user interaction before proceeding. While creating true modals typically involves JavaScript, you can use HTML and CSS to simulate modal dialogs.

Example of Emulating a Modal Dialog:

<!-- Hidden checkbox to toggle the modal -->
    <input type="checkbox" id="modal-toggle">

    <!-- Button to open the modal -->
    <label for="modal-toggle" style="cursor: pointer;">Open Modal</label>

    <!-- The Modal -->
    <div class="modal">
        <div class="modal-content">
            <a href="#" class="close" onclick="document.getElementById('modal-toggle').click();">&times;</a>
            <h2>Modal Title</h2>
            <p>This is a simple modal dialog without JavaScript!</p>
        </div>
    </div>

<style>
/* Hide the checkbox */
#modal-toggle {
    display: none;
}

/* The modal background */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

/* Show the modal when the checkbox is checked */
#modal-toggle:checked ~ .modal {
    display: flex;
}

/* The modal content */
.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
    text-align: center;
    position: relative;
}

/* The close button */
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

.close:hover {
    color: #ff4c4c;
}

</style>

How it works:

• Checkbox (<input type="checkbox">): Used to control the visibility of the modal.

• Labels: The labels act as buttons to open and close the modal. Clicking the "Open Modal" label checks the checkbox, which makes the modal visible. Clicking the "Close" label unchecks the checkbox and hides the modal.

• CSS: Controls the appearance and positioning of the modal and its overlay.

This approach allows you to create a modal-like effect with HTML and CSS alone, providing a user-friendly way to present information or options.

How to Create HTML-only Tooltips

Tooltips provide additional information when a user hovers over an element. While JavaScript can enhance tooltips, you can create basic tooltips using just HTML and CSS.

Example of Creating Tooltips:

<div class="tooltip">
  Hover over me
  <span class="tooltip-text">Tooltip text</span>
</div>

<style>
  .tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  .tooltip .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the tooltip trigger */
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
</style>

How it works:

• Tooltip Container: The <div class="tooltip"> contains the text that triggers the tooltip and the tooltip text itself.

• Tooltip Text: The <span class="tooltip-text"> is hidden by default and only becomes visible when the user hovers over the tooltip container.

• CSS: Uses visibility and opacity to show and hide the tooltip, with a transition effect for smooth appearance.

This method allows you to add helpful hints or extra information to your webpage without needing JavaScript.

How to Build Interactive Image Maps

Image maps enable you to create clickable areas on an image, allowing users to interact with different parts of an image. HTML’s <map> and <area> elements are used to define these clickable regions.

Example of Building an Image Map:

<img src="map-image.jpg" usemap="#image-map" alt="Map Image">

<map name="image-map">
  <area shape="rect" coords="34,44,270,350" href="page1.html" alt="Region 1">
  <area shape="circle" coords="130,136,60" href="page2.html" alt="Region 2">
  <area shape="poly" coords="300,50,400,150,350,200" href="page3.html" alt="Region 3">
</map>

How it works:

• Image: The <img> tag includes the usemap attribute, which links to the <map> element.

• Map and Areas: The <map> element contains one or more <area> elements. Each <area> defines a clickable region on the image.

  • shape="rect": Defines a rectangular area with specified coordinates.

  • shape="circle": Defines a circular area with a center and radius.

Image maps allow you to create interactive images with different regions that lead to various pages or actions, adding an extra layer of engagement to your prototypes.

Design Tips for HTML-Only Prototypes

Designing HTML-only prototypes involves focusing on both usability and performance. While HTML alone provides a solid foundation for interactive elements, it’s essential to ensure that your prototypes are accessible, fast, and efficient. This section offers tips on making your HTML-only prototypes more effective, covering accessibility, performance, and limitations.

Make Sure Your Prototype is Accessible

Accessibility ensures that your prototypes can be used by everyone, including those with disabilities. By adhering to accessibility principles, you improve the user experience for all users and make your prototypes more inclusive.

Keyboard-friendly Navigation

Many users rely on keyboards for navigation, so it’s crucial to ensure that all interactive elements can be accessed and used via keyboard alone.

Tips for Keyboard-Friendly Navigation:

• Use Semantic HTML: Proper use of HTML elements like <button>, <a>, and <input> helps with keyboard navigation. These elements are naturally focusable and keyboard-navigable.

• Tab Index: The tabindex attribute can be used to manage the order of focusable elements. For example, tabindex="0" allows an element to be focusable, while negative values like tabindex="-1" remove an element from the tab order.

• Visible Focus Indicators: Ensure that focus indicators (like outlines) are visible when navigating with the keyboard. This helps users see which element is currently in focus.

Example:

<button tabindex="0">Click Me</button>
<a href="#section1" tabindex="0">Go to Section 1</a>
<input type="text" tabindex="0" placeholder="Enter text here">

Screen Reader Support

Screen readers help visually impaired users navigate your site. To ensure that your prototypes are accessible to these users, include relevant ARIA (Accessible Rich Internet Applications) attributes and use semantic HTML.

Tips for Screen Reader Support:

• Alt Text: Use the alt attribute for images to provide descriptive text for screen readers.

• ARIA Roles and Labels: Use ARIA roles and labels to enhance the accessibility of interactive elements. For example, role="button" can be used for clickable elements that are not inherently buttons.

• Descriptive Labels: Ensure that form inputs and interactive elements have clear and descriptive labels.

Example:

<img src="logo.jpg" alt="Company Logo">
<button aria-label="Close" onclick="closeModal()">X</button>

Incorporating these practices makes your prototypes more navigable and usable for individuals with disabilities.

The Speed and Simplicity of HTML-only Prototypes

HTML-only prototypes are often faster to load and simpler to maintain due to their reliance on minimal resources. These benefits contribute to a more efficient user experience.

Faster Loading

HTML-only prototypes typically load faster because they don’t rely on external scripts or complex interactions that can slow down performance. The simplicity of HTML means fewer resources need to be processed by the browser.

Benefits:

• Reduced Load Times: Without JavaScript or complex CSS, the browser can render the content more quickly.

• Improved Performance: Fewer resources mean less strain on the client’s device, resulting in smoother performance.

Lower Resource Use

Using HTML alone minimizes resource consumption. Without JavaScript or heavy CSS, your prototype consumes less memory and processing power.

Benefits:

• Lower Memory Usage: Less reliance on external scripts means reduced memory footprint.

• Less CPU Usage: Simplified interactions reduce the need for extensive computation, leading to lower CPU usage.

These aspects contribute to a more efficient and responsive user experience, especially important for users on slower connections or less powerful devices.

Where HTML Falls Short

HTML is great for building interactive prototypes, but it has some limits. Knowing these limits helps you decide when to add other technologies.

No Complex Logic

HTML alone is limited in handling complex logic and dynamic interactions. For example, conditions, loops, or advanced calculations require JavaScript.

Limitations:

• Conditional Logic: HTML cannot perform actions based on complex conditions or states.

• Dynamic Updates: Changes to the page content or structure based on user input often require JavaScript.

Example Limitation:

• Interactive Forms: Complex forms with dynamic fields or conditional sections generally need JavaScript to manage the logic and interactions effectively.

Difficulties with More Advanced Interactions

Some interactions, such as real-time updates or complex animations, are challenging to achieve with HTML alone. While CSS can handle some animations, more advanced interactions often require scripting.

Limitations:

• Real-time Data: Updating content in real time based on user actions or external data sources is typically not possible with HTML alone.

• Complex Animations: Advanced animations and transitions usually require JavaScript or CSS animations.

Example Limitation:

• Live Content Updates: HTML cannot fetch or update content dynamically without JavaScript or server-side solutions.

Recognizing these limitations helps you balance the use of HTML with other technologies when needed to achieve your desired functionality.

When to Use HTML-Only Prototypes

HTML-only prototypes can be a powerful tool in your design toolkit, especially when simplicity and performance are key.

Understanding when to use HTML-only solutions, considering your audience, and knowing how to blend HTML with JavaScript can help you create effective prototypes that meet your project needs.

When HTML-only is the Right Choice

HTML-only prototypes are particularly useful in specific scenarios where their simplicity and efficiency shine. Here are some situations where using HTML-only prototypes makes sense:

1. Simple Forms and Surveys: When you need to create basic forms or surveys to collect user input, HTML forms with standard input elements can be used effectively. These prototypes are easy to set up and provide a straightforward way for users to submit information.

Example:

• A contact form on a website.

• A quick survey to gather feedback from users.

2. Static Information Display: For displaying static content or information, HTML is sufficient. Prototypes that focus on showcasing content without requiring dynamic interactions are ideal candidates for HTML-only design.

Example:

• An informational landing page.

• A product details page that provides static information.

3. Prototyping Early Concepts: When prototyping early concepts or initial designs, HTML-only prototypes can help quickly visualize and test ideas without the need for complex scripting. This approach allows you to iterate rapidly and focus on layout and structure.

Example:

• Wireframes or mockups of a new feature.

• Early-stage designs for a website or application.

4. Performance Considerations: For situations where performance is critical and you need to ensure fast loading times and low resource usage, HTML-only prototypes can be advantageous. They eliminate the overhead of additional scripts and reduce processing demands.

Example:

• A mobile landing page with minimal resources.

• A lightweight information page with fast load times.

5. Accessibility and Simplicity: When designing for accessibility and simplicity, HTML provides a strong foundation. Using semantic HTML and built-in attributes ensures that your prototypes are accessible to users with disabilities.

Example:

• An accessible form with clear labels and input fields.

• A simple navigation menu with clear, focusable links.

Understanding Your Audience

Knowing your audience is crucial when deciding whether to use HTML-only prototypes. Consider the following factors:

1. User Needs and Expectations: Understand what your users need and expect from the prototype. If your audience is looking for simple, straightforward interactions, HTML-only may be sufficient. For more complex interactions or dynamic content, consider integrating JavaScript.

Example:

• Users who need a basic contact form may be satisfied with an HTML-only solution.

• Users who expect interactive features or real-time updates might require a combination of HTML and JavaScript.

2. Technical Constraints: Consider the technical constraints of your audience’s devices and browsers. HTML-only prototypes generally perform well across various devices and browsers, making them suitable for diverse audiences.

Example:

• A prototype for users with older devices or limited internet connectivity may benefit from the simplicity of HTML-only design.

3. User Expertise: Assess the technical expertise of your audience. If they are not familiar with complex interactions or scripting, HTML-only prototypes can provide a more accessible and user-friendly experience.

Example:

• A prototype for a non-technical audience may prioritize simplicity and ease of use with HTML-only design.

4. Feedback and Iteration: Gather feedback from users to understand how they interact with your prototype. If users find HTML-only prototypes sufficient for their needs, you can continue with this approach. If more advanced features are requested, consider integrating additional technologies.

Example:

• Collect user feedback on a basic form and decide if additional features or interactions are needed.

Mixing HTML and JavaScript

While HTML-only prototypes have their strengths, combining HTML with JavaScript can enhance functionality and provide a richer user experience.

Here’s when and how to mix HTML and JavaScript effectively:

1. Adding Dynamic Interactions: When your prototype requires dynamic interactions, such as real-time updates or complex logic, JavaScript can complement HTML to provide these features.

Example:

• A form that updates in real time based on user input.

• An interactive map with zoom and filter capabilities.

2. Enhancing User Experience: JavaScript can be used to improve the user experience by adding interactive elements like modals, carousels, or animations that HTML alone cannot achieve.

Example:

• A modal dialog that opens and closes based on user actions.

• A carousel that allows users to navigate through images or content.

3. Handling Complex Logic: For prototypes involving complex calculations, conditional logic, or data manipulation, JavaScript can handle these requirements more effectively than HTML alone.

Example:

• A calculator that performs complex calculations based on user input.

• A dynamic form that adjusts fields based on previous selections.

4. Iterating and Testing: Start with an HTML-only prototype to establish the basic structure and layout. Once you have a clear understanding of the design, integrate JavaScript to add interactivity and test the enhanced functionality.

Example:

• Begin with a static prototype of a feature and then add JavaScript to refine and test interactive elements.

5. Balancing Complexity: Use JavaScript to enhance the prototype where necessary, but avoid overcomplicating the design. Maintain a balance between simplicity and functionality to ensure the prototype remains easy to use and understand.

Example:

• Implement JavaScript for essential interactions but keep the overall design and layout straightforward.

Conclusion

HTML-only prototypes are a great choice for many design tasks because they are simple and quick to build. They work well for basic interactions like forms and displaying information.

HTML alone is powerful for straightforward designs. However, if you need more advanced features or dynamic interactions, adding JavaScript can help. Mixing HTML with JavaScript lets you enhance your prototypes when needed.

In summary, HTML-only prototypes offer speed, accessibility, and ease of use. Understanding when to use HTML by itself and when to add other tools ensures that your prototypes are both effective and user-friendly.

That's all for this article! If you'd like to continue the conversation or have questions, suggestions, or feedback, feel free to reach out to connect with me on LinkedIn. If you enjoyed this content, consider buying me a coffee to support the creation of more developer-friendly contents.

This approach contrasts with client-side rendering (CSR), where content is delivered as a basic HTML shell, and JavaScript fetches and displays data in the browser.

SSR offers significant SEO advantages, making it a perfect fit for Next.js, a popular React framework. Let's discuss how using SSR with Next.js can elevate your website's search engine visibility.

Table of Contents

1. What is Server-Side Rendering?
2. How to Get Started with Next.js and SSR
3. How Next.js Enables Server-side Rendering
4. Data Fetching with getStaticProps and getServerSideProps
5. Benefits of SSR for SEO with Next.js and How to Optimize
6. Conclusion

What is Server-Side Rendering?

Server-side rendering (SSR) is a technique in web development where the web server generates the complete HTML content of a web page before sending it to the user's browser.

This is unlike client-side rendering (CSR), where the browser downloads a basic HTML structure and then uses JavaScript to fetch and display the content.

How to Get Started with Next.js and SSR

Getting started with Next.js and server-side rendering (SSR) involves a few steps. Here's a step-by-step guide to help you set up a Next.js project and implement SSR.

Step 1: Install Next.js

First, you need to install Next.js. You can do this using create-next-app, which sets up a new Next.js project with a default configuration. Run the following command in your terminal:

npx create-next-app my-next-app
cd my-next-app
npm run dev

This command creates a new Next.js application in a folder called my-next-app and starts the development server.

Step 2: Understand the Project Structure

Next.js organizes the project with some default folders and files:

• pages/: This folder contains all the pages of your application. Each file represents a route in your app.
• public/: Static assets like images can be placed here.
• styles/: Contains CSS files for styling your application.

Step 3: Create a Simple Page with SSR

Now, let's create a simple page that uses SSR.

Create a new file pages/index.js:

// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>Welcome to Next.js with SSR</h1>
      <p>Data fetched from the server: {data.message}</p>
    </div>
  );
};

export async function getServerSideProps() {
  // Fetch data from an API or other sources
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  // Return the data as props to the Home component
  return {
    props: {
      data,
    },
  };
}

export default Home;

Let's discuss this code in some detail. For the home component:

• The Home component is a functional component that accepts props.
• The data prop contains the data fetched from the server.
• Inside the component, we render a welcome message and the fetched data.

The getServerSideProps function:

• This function is exported from the pages/index.js file.
• It executes on the server for each request to this page.
• Inside this function, you can perform asynchronous operations such as fetching data from an external API.
• The fetched data is returned as an object with a props key. This object will be passed to the Home component as props.

You can add error handling to the getServerSideProps function to manage any issues that might arise during data fetching. Here's an example:

export async function getServerSideProps() {
  try {
    const res = await fetch('https://api.example.com/data');
    if (!res.ok) {
      throw new Error('Failed to fetch data');
    }
    const data = await res.json();
    return {
      props: {
        data,
      },
    };
  } catch (error) {
    console.error(error);
    return {
      props: {
        data: { message: 'Error fetching data' },
      },
    };
  }
}

Step 4: Run the Application

Start your development server if it's not already running:

npm run dev

Open your browser and go to http://localhost:3000. You should see the message fetched from the API displayed on the page.

How Next.js Enables Server-Side Rendering

Next.js provides a seamless way to enable SSR and Static Site Generation (SSG). It pre-renders every page by default. Depending on the use case, you can choose between SSR and SSG:

• Server-Side Rendering (SSR): Pages are rendered on each request.
• Static Site Generation (SSG): Pages are generated at build time.

Next.js determines which rendering method to use based on the functions you implement in your page components (getStaticProps and getServerSideProps).

Next.js Page Components

Next.js uses the pages/ directory to define routes. Each file in this directory corresponds to a route in your application.

• pages/index.js → /
• pages/about.js → /about
• pages/posts/[id].js → /posts/:id

Here's a basic example of a page component:

// pages/index.js
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Welcome to Next.js</h1>
      <p>This is the home page.</p>
    </div>
  );
};

export default Home;

Data Fetching with getStaticProps and getServerSideProps

getStaticProps is used for static generation. It runs at build time and allows you to fetch data and pass it to your page as props. Use this for data that doesn't change often.

Example:

// pages/index.js
import React from 'react';

const Home = ({ posts }) => {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

// This function runs at build time
export async function getStaticProps() {
  // Fetch data from an API
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

export default Home;

getServerSideProps is used for server-side rendering. It runs on every request and allows you to fetch data at request time.

Example:

// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>Server-Side Rendering with Next.js</h1>
      <p>Data fetched from the server: {data.message}</p>
    </div>
  );
};

// This function runs on every request
export async function getServerSideProps() {
  // Fetch data from an external API
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default Home;

Benefits of SSR for SEO with Next.js and How to Optimize

In this section, we will look at the main benefits of using SSR for SEO and give easy-to-follow tips on how to make the most of these benefits with your Next.js application.

1. Improved Indexing by Search Engines

Client-side rendering (CSR) can cause issues with search engines struggling to index content properly since it is rendered in the user's browser using JavaScript.

SSR, however, renders content on the server before sending it to the user's browser, ensuring the HTML is complete and can be easily crawled and indexed by search engines.

Use SSR for important pages: Ensure that key pages, such as landing pages, blog posts, and product pages, are rendered on the server to facilitate better indexing.

Example – Using SSR for a blog post page:

// pages/blog/[id].js
import React from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';

const BlogPost = ({ post }) => {
  const router = useRouter();
  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <Head>
        <title>{post.title}</title>
        <meta name="description" content={post.excerpt} />
      </Head>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default BlogPost

• BlogPost Component: This component displays a blog post. It uses next/head to manage meta tags, which are important for SEO.
• getServerSideProps Function: This function fetches data for the blog post from an API. It runs on the server for every request to this page, ensuring the content is ready for search engines to index when they crawl the page.

2. Faster Load Times

Search engines like Google use page load speed as a ranking factor. SSR can improve initial load time because the server sends a fully rendered page to the browser, enhancing perceived performance and user experience.

Optimize server response time: Ensure your server is optimized for quick responses. Use caching strategies to reduce server load.

Example – cache-control header for SSR:

export async function getServerSideProps({ res }) {
  res.setHeader('Cache-Control', 'public, s-maxage=10, stale-while-revalidate=59');

  const resData = await fetch('https://api.example.com/data');
  const data = await resData.json();

  return {
    props: {
      data,
    },
  };
}

• getServerSideProps Function: This function sets cache-control headers to cache the response for 10 seconds and serve stale content while revalidating for 59 seconds. This improves server response time and page load speed, contributing to better SEO.

3. Improved Social Media Sharing

When sharing links on social media, platforms like Facebook and Twitter scrape the URL content to generate previews. SSR ensures that necessary metadata is available in the initial HTML, resulting in better previews and increased click-through rates.

Manage meta tags with next/head: Use the next/head component to add meta tags for social media and SEO.

Example – Adding meta tags to a page:

import Head from 'next/head';

const Page = ({ data }) => (
  <div>
    <Head>
      <title>{data.title}</title>
      <meta name="description" content={data.description} />
      <meta property="og:title" content={data.title} />
      <meta property="og:description" content={data.description} />
      <meta property="og:image" content={data.image} />
      <meta name="twitter:card" content="summary_large_image" />
    </Head>
    <h1>{data.title}</h1>
    <p>{data.content}</p>
  </div>
);

• Page Component: This component uses next/head to add SEO meta tags, including Open Graph tags for social media previews. This ensures that when the page is shared, social media platforms can generate rich previews with the provided metadata.

4. Enhanced User Experience

A faster, more responsive website enhances the overall user experience, leading to longer visit durations and lower bounce rates. Both factors positively influence your SEO rankings.

Pre-render pages with static generation (SSG) for less dynamic content: Use SSG for pages that don’t change often to reduce server load and improve performance.

Example – Using SSG for a static page:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/static-data');
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 10, // Revalidate at most once every 10 seconds
  };
}

const StaticPage = ({ data }) => (
  <div>
    <h1>{data.title}</h1>
    <p>{data.content}</p>
  </div>
);

export default StaticPage;

• StaticPage Component: This component displays static content fetched from an API.
• getStaticProps Function: This function fetches data at build time and revalidates it every 10 seconds, ensuring the content is always fresh while reducing server load.

Conclusion

Using server-side rendering and Next.js together is like giving your website an extra boost for search engines. With pre-built content for search engines and a smooth experience for visitors, your site is set up to be seen by more people naturally.

This works great for any kind of website, from online stores to blogs. Next.js with SSR makes it easy to build a website that search engines love and users enjoy.

That's all for this article! If you'd like to continue the conversation or have questions, suggestions, or feedback, feel free to reach out to connect with me on LinkedIn. And if you enjoyed this content, consider buying me a coffee to support the creation of more developer-friendly contents.

Here's what the mini project you'll build looks like:

In the image above, each button changes the background color of the page to a specific color.

You can get the starter files for the project here.

There are five buttons in the index.html file, and each of them changes the background color to a specific value:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Change BG Color With JS</title>
</head>
<body>
    <h1>Choose background color</h1>
    <button>Red</button>
    <button>Blue</button>
    <button>Green</button>
    <button>Yellow</button>
    <button>Reset</button>
​
    <script src="script.js"></script>
</body>
</html>
​

You won't be making any changes to the style.css file. Its purpose is to center the elements on the page and style the buttons to have the same size.

At the moment, nothing happens when you click on the buttons. Let's write the logic for that in the script.js file.

How to Change Background Color with JavaScript

To change the background color of an element with JavaScript, you can use the element's style property:

Here's how:

function setBgGreen() {
    document.body.style.backgroundColor = 'green';
}
​
function setBgRed() {
    document.body.style.backgroundColor = 'red';
}
​
function setBgBlue() {
    document.body.style.backgroundColor = 'blue';
}
​
function setBgYellow() {
    document.body.style.backgroundColor = 'yellow';
}
​
function defaultBgColor() {
    document.body.style.backgroundColor = 'white';
}

In the code above, we created five functions: setBgGreen(), setBgRed(), setBgBlue(), setBgYellow(), and defaultBgColor().

Each function has one thing in common: they all target the body. Through the body element (which represents the webpage), we accessed the style.backgroundColor property. The property returns or sets the background color of an element.

So:

• document.body.style.backgroundColor = 'green'; in the setBgGreen() function sets the background color of body to green.

• document.body.style.backgroundColor = 'red'; in the setBgRed() function sets the background color of body to red.

• document.body.style.backgroundColor = 'blue'; in the setBgBlue() function sets the background color of body to blue.

• document.body.style.backgroundColor = 'yellow'; in the setBgYellow() function sets the background color of body to yellow.

• document.body.style.backgroundColor = 'white'; in the defaultBgColor() function sets the background color of body to white.

Next, you'll assign each function to their respective button using the onclick attribute in your HTML file. This is what your index.html file should look like after that:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Change BG Color With JS</title>
</head>
<body>
    <h1>Choose background color</h1>
    <button onclick="setBgRed()">Red</button>
    <button onclick="setBgBlue()">Blue</button>
    <button onclick="setBgGreen()">Green</button>
    <button onclick="setBgYellow()">Yellow</button>
    <button onclick="defaultBgColor()">Reset</button>
​
    <script src="script.js"></script>
</body>
</html>

When you click the buttons, you should see the background color of the page change to the color assigned to the button.

Note that this is not only applicable to the body element. You can do this for specific parts of your page as well.

For a example, the background color of a div with an id of container can be changed using container.style.backgroundColor = "red" .

Conclusion

In this article, you learned how to change background color with JavaScript using an element's style property.

You can find the full project code here.

Happy coding!

an example of a masonry layout

Unlike traditional grids with fixed row heights, masonry layouts adjust the positioning of items dynamically based on their content height, creating a visually appealing and space-efficient arrangement.

Key Characteristics of Masonry Layouts

• Items can have varying heights, which makes the layout look more organic and less uniform when compared to standard grids.
• Items are positioned to fill vertical gaps, creating a tightly packed layout without large spaces between items.
• Masonry layouts can adapt to different screen sizes, adjusting the number of columns and the positioning of items accordingly.
• The layout is often used for galleries, portfolios, and other visual content where an aesthetically pleasing presentation is important.

Common Uses

• Image Galleries: Displaying images of different sizes without cropping.
• Blog Layouts: Arranging posts of varying lengths.
• E-commerce Sites: Showcasing products with different dimensions.

How It Works

Masonry layouts are often implemented using CSS Grid or JavaScript libraries like Masonry.js. Here, we'll focus on the CSS Grid approach.

How to Create a Masonry Layout

Step 1: Set Up Your Project

• Create a project folder: Create a folder for your project on your computer.
• Create HTML and CSS files: Inside the project folder, create two files: index.html and styles.css.

Masonry/
├── index.html
└── styles.css

Step 2: Write the HTML

• Use a text editor like Visual Studio Code, Sublime Text, or any other editor you prefer.
• Add the basic structure of an HTML document by pressing Shift+!
• Change the title from Document to "CSS Masonry Layout"
• Below the title, link your styles.css file as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Masonry Layout</title>
    /** Link styles.css **/
        <link rel="stylesheet" href="styles.css">
</head>
<body>

</body>
</html>

• After setting up your HTML structure, create the different divisions for your layout within the body area.

<div class="masonry">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
    <div class="item item5">Item 5</div>
    <div class="item item6">Item 6</div>
    <div class="item item7">Item 7</div>
    <div class="item item8">Item 8</div>
    <div class="item item9">Item 9</div>
    <div class="item item10">Item 10</div>
</div>

• <div class="masonry"> is the container for our masonry layout. We'll use CSS Grid to create the masonry effect inside this container.
• <div class="item item1">Item 1</div> to <div class="item item10">Item 10</div> are the individual items (or boxes) inside our masonry layout. Each item has a class of item to style them uniformly and a specific class (for example: item1, item2, and so on) to apply unique styles—like different heights and colors—to each item.

Breakdown of the CSS classes:

• item: This class is used to style all items uniformly. It sets the background color, padding, box-sizing, box shadow, border-radius, and transitions for the items.
• item1 to item10: These classes are used to set specific styles for each item. For example, item1 might have a different height and background color than item2, and so on. These classes will be used in the CSS to apply specific styles.

Step 3: Style with CSS

• Open styles.css in a text editor: Use the same text editor to open your CSS file.
• Add some basic styles for the body and the masonry container.

 body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        padding: 20px;
        margin: 0;
    }
    .masonry {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-auto-rows: 10px;
        gap: 20px;
    }

What this means:

• body sets the font, background color, padding, and removes default margin.
• .masonry uses CSS Grid to create a responsive layout with columns that are at least 200px wide and automatically fills the available space. The rows have a base height of 10px, and there's a 20px gap between items.

Add styles for the items inside the masonry layout.

 .item {
        background-color: #ffffff;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        transition: transform 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2em;
        color: #fff;
    }
    .item:hover {
        transform: translateY(-10px);
    }

What the above means:

• .item sets a white background, padding, box shadow for elevation, rounded corners, and a hover effect to lift the item slightly. display: flex centers the content.
• .item:hover will add a transform effect when the item is hovered on.

Set specific dimensions and colors by defining specific styles for each item to give them different heights and background colors.

.item1 { grid-row: span 15; background-color: #ff6f61; }
.item2 { grid-row: span 20; background-color: #6b5b95; }
.item3 { grid-row: span 10; background-color: #88b04b; }
.item4 { grid-row: span 25; background-color: #d65076; }
.item5 { grid-row: span 30; background-color: #ffb347; }
.item6 { grid-row: span 15; background-color: #45b8ac; }
.item7 { grid-row: span 20; background-color: #e94b3c; }
.item8 { grid-row: span 10; background-color: #6c5b7b; }
.item9 { grid-row: span 25; background-color: #00a86b; }
.item10 { grid-row: span 30; background-color: #b565a7;}

• Each item class (.item1, .item2, and so on) sets the number of rows it spans (grid-row: span X;) and assigns a unique background color.

Step 4: View Your Layout

Open index.html in a web browser to see the masonry layout.

You can add more items, change colors, or adjust sizes to fit your design needs. Below is the layout we created.

Putting it all together

The index.html file should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Masonry Layout</title>
        <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="masonry">
        <div class="item item1">Item 1</div>
        <div class="item item2">Item 2</div>
        <div class="item item3">Item 3</div>
        <div class="item item4">Item 4</div>
        <div class="item item5">Item 5</div>
        <div class="item item6">Item 6</div>
        <div class="item item7">Item 7</div>
        <div class="item item8">Item 8</div>
        <div class="item item9">Item 9</div>
        <div class="item item10">Item 10</div>
    </div>
</body>
</html>

The styles.css file will look like this:.

    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        padding: 20px;
        margin: 0;
    }
    .masonry {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-auto-rows: 10px;
        gap: 20px;
    }

    .item {
        background-color: #ffffff;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        transition: transform 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2em;
        color: #fff;
    }

    .item:hover {
        transform: translateY(-10px);
    }

    /* Specific dimensions and colors for each item */
    .item1 { grid-row: span 15; background-color: #ff6f61; }
    .item2 { grid-row: span 20; background-color: #6b5b95; }
    .item3 { grid-row: span 10; background-color: #88b04b; }
    .item4 { grid-row: span 25; background-color: #d65076; }
    .item5 { grid-row: span 30; background-color: #ffb347; }
    .item6 { grid-row: span 15; background-color: #45b8ac; }
    .item7 { grid-row: span 20; background-color: #e94b3c; }
    .item8 { grid-row: span 10; background-color: #6c5b7b; }
    .item9 { grid-row: span 25; background-color: #00a86b; }
    .item10 { grid-row: span 30; background-color: #b565a7; }

Summary

A masonry layout is an effective way to display content with varying heights in a grid-like structure without large vertical gaps, making it ideal for image galleries, blogs, and portfolios.

Using CSS Grid, you can create a responsive and visually appealing masonry layout with minimal code.

Imagine a tree: its roots anchor and nourish the entire plant. Similarly, HTML, the root of web development, provides the foundation for every webpage.

Understanding HTML's role is like grasping a tree's roots, it forms the fundamental basis for comprehending how web pages come to life.

By the end of this tutorial, you'll be equipped with the knowledge to kick-start your coding journey.

Table of Contents

• What is HTML?

• Basic Structure of an HTML Document

• Comments

• Tags and Elements

• HTML Attributes

• HTML Multimedia

• Best Practices

What is HTML?

HTML, which stands for Hypertext Markup Language, is the standard language used for creating and designing the structure of a web page. It allows you to organize content on your website, define its structure, and establish the relationships between different elements.

Basic Structure of an HTML Document

An HTML document follows a specific structure that acts as the foundation for your web page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link />
</head>
<body>
  <!-- your web page content goes here -->
</body>
</html>

Let's break it down:

<!DOCTYPE html>: defines the document type and version of HTML being used (HTML5 in this case).

<html lang="en"> and </html>: opening and closing tag of the root element that wraps the entire HTML content. The attribute lang="en" defines the language (in this case, USA English)

<head> and </head>: opening and closing tag of the head element contains meta-information <meta > about the HTML document, the page title <title></title> you see in the browser tab, and link <link /> which defines a link between your HTML document and an external resources, like stylesheet, favicon, import and so on.

<body> and </body> : opening and closing body tag encloses all the visible content of a web page, including text, images, links, forms, and other elements that users interact with.

Note: All HTML elements have opening (**< >**) and closing (**</ >**) tags, except for self-closing (**< >** or **< />**) tags, which I will explain in more detail later.

Comments

Notice this <!-- your web page content goes here --> in the above html basic structure, it's called comments. Comments are used to add explanatory notes that are not displayed when the web page is viewed in a browser. They are useful for documenting your code, providing information to other developers, or temporarily excluding specific parts of the code. You can create comment using this tag <!-- your comment goes here -->.

There are:

1. Single-line comment: <!-- This is a single-line comment -->

2. Multi-line comment: <!-- This is a multi-line comment. It can span multiple lines. All content within the comment block will be ignored by the browser. -->

Tags and Elements

HTML uses tags to define different elements on a webpage. Tags are enclosed in angle brackets (< >). There are opening (< >) and closing (</ >) tags, and self-closing (< > or < />) tag. Here are a few examples:

Headings

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<!-- ... up to <h6> -->

The heading tags <h1> to <h6> are used to define headings or subheadings within a document. These tags represent a hierarchy of headings, with <h1> being the highest level (main heading) and <h6> being the lowest level (lowest subheading level).

Its purpose is to structure and organize the content of a web page, making it more readable and accessible.

Paragraph

The paragraph tag (<p> your text goes here </p>) is used to separate blocks of text into distinct paragraphs. It is a block-level element that represents a unit of text or a block of content, and it is commonly used to structure and separate text on a webpage.

The <p> tag is part of the structural markup in HTML and helps in creating well-organized and readable content.

Line Breaks

To create a line break without starting a new paragraph, use the break (<br>) tag.

Example 1 - Basic Line Break:

<p>This is the first line.<br>This is the second line.</p>

This will render as:

This is the first line.
This is the second line.

Example 2 - Line Breaks in Text:

<p>This text contains a<br>line break.</p>

This will render as:

This text contains a
line break.

Example 3 - Line Breaks in List:

<ul>
  <li>Item 1</li>
  <li>Item 2<br>with a line break</li>
  <li>Item 3</li>
</ul>

This will render as:

• Item 1

• Item 2
  with a line break

• Item 3

Example 4 - Line Breaks in Address:

<address>
  Nuel Cas<br>
  23 Musa Yar'Dua VI<br>
  Lagos, Nigeria
</address>

This will render as:

Nuel Cas
23 Musa Yar'Dua VI
Lagos, Nigeria

Example 5: Line Breaks with Multiple
Tags

<p>This is a paragraph with<br><br>multiple line breaks.</p>

This will render as:

This is a paragraph with

multiple line breaks.

While break (<br>) tag is commonly used for simple line breaks, CSS and block-level elements like <p> and <div> tags are often preferred for more complex layouts.

Overusing <br> tags for layout purposes is discouraged. CSS is generally more suitable for controlling the spacing and layout of elements on a webpage.

Div

A <div> tag, which stands for "division" is one of the most commonly used container elements in HTML. It is a block-level container that is used to group other HTML elements together and apply styles or scripting to them collectively.

Here's an example:

<div>
  <p>This is a paragraph inside a div.</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</div>

In this example, the <div> element wraps around a paragraph (<p>) and an unordered list (<ul>). This grouping allows you to apply styles or manipulate these elements together using CSS or JavaScript.

Note: The <div> tag is often used for layout purposes, helping structure the content of a webpage. For more semantic and specific meanings, HTML5 introduced new semantic tags like <section>, <article>, <header>, <footer>, and so on, which provide better clarity about the content's purpose.

Semantic Tags

They are like special labels that tell web browsers and developers what different parts of a webpage are all about. They help make websites easier to understand for both people and computers.

By using these tags, you can make your websites more accessible and easier to find on search engines. Here are some common HTML semantic tags along with examples:

1. <header>: The header tag represents introductory content at the beginning of a section or webpage. It typically contains logos, navigation menus, and other introductory elements.

Example:

  <header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

2. <nav>: Use nav tag to define navigation links within your webpage. It contains links to other pages or sections of the website.

Example:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

3. <main>: Used to define the main content of a webpage. It helps improve the accessibility and structure of your HTML code, as it clearly identifies the main content area for screen readers and other assistive technologies. It also helps search engines understand the relevance of the content on your page, which can improve your website's Search Engine Optimization (SEO).

Example:

<main>
  <article>
    <h2>Page Title</h2>
    <p>Page content goes here...</p>
  </article>
</main>

4. <section>: Use the section tag when you want to define sections within a webpage. Also, for grouping related content together.

Example:

<section>
  <h2>Section Title</h2>
  <p>Section content goes here...</p>
</section>

5. <article>: Use the article tag when you want to define an independent piece of content that can stand alone, such as a blog post, news article, or forum post.

Example:

<article>
  <h2>Article Title</h2>
  <p>Article content goes here...</p>
</article>

6. <aside>: Use the aside tag when you want to define content that is related to the main content but not part of it, such as sidebars, advertisements, or related links.

Example:

<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</aside>

7. <footer>: Used to define the footer of a webpage, typically containing copyright information, contact details, or links to related pages.

Example:

<footer>
  <p>&copy; Nuel Cas Website</p>
</footer>

List Tag

Lists <li> allow you to organize and structure content in a hierarchical manner. They are two types: ordered <ol> (numbered) and unordered (<ul>) (bulleted) lists.

Ordered List: Use <ol> for ordered lists, and <li> for list items.

Example:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

This will render as:

1. First item

2. Second item

3. Third item

Unordered List: The <ul> tag is used to create an unordered list, where the order of the items doesn't matter, it renders bulleted items. Each item in the list is represented by the <li> (list item) tag.

Example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

This will render as:

• Item 1

• Item 2

• Item 3

Lists can be nested within each other. For example, you can have an ordered list within an unordered list or vice versa.

Example:

<ul>
  <li>Unordered List Item 1</li>
  <li>Unordered List Item 2
    <ol>
      <li>Ordered List Item 1</li>
      <li>Ordered List Item 2</li>
    </ol>
  </li>
  <li>Unordered List Item 3</li>
</ul>

This will render as:

• Unordered List Item 1

• Unordered List Item 2

1. Ordered List Item 1

2. Ordered List Item 2

• Unordered List Item 3

List items can also have attributes. For example, you might use the type attribute with the <ol> tag to change the numbering style.

Example:

<ol type="A">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

This will render as:

A. Item 1
B. Item 2
C. Item 3

The <ul>, <ol>, and <li> tags in HTML are essential for creating organized lists and structuring content on web pages. They provide flexibility in presenting information in both ordered and unordered formats.

Span Tag

The <span> tag is a generic inline (it does not create a line break) container used to group and apply styles to inline elements or text. It is typically used when you want to apply styles or using JavaScript to manipulate specific portions of text within a larger block of content without affecting the overall structure.

Here's an example of how the <span> tag can be used in HTML:

<p>This is a <span style="color: red; font-weight: bold;">highlighted</span> text.</p>

In this example, the word "highlighted" will be displayed in red and bold, as specified by the inline styles applied to the <span> element.

Links

The <link> tag is used to define a link between a document and an external resource. Its primary purpose is to include external resources, such as stylesheets, icons, and other documents. Let's look at the common use cases of the <link> tag:

Linking stylesheet: The most common use of the <link> tag is to link an external CSS (Cascading Style Sheets) file to an HTML document. This allows you to separate the styling of your website from its structure, making it easier to maintain and update.

Example:

<link rel="stylesheet" type="text/css" href="styles.css">

In this example, the rel attribute specifies the relationship between the HTML document and the linked resource (stylesheet), the type attribute indicates the type of the linked resource (text/css for stylesheets), and the href attribute specifies the path to the external CSS file.

Note: Linking a CSS file should be done inside the <head> element.

Linking icon: The <link> tag is also commonly used to link the favicon icon for a webpage, which is the small icon that appears in the browser tab or next to the URL in the address bar.

<link rel="icon" href="favicon.ico" type="image/x-icon">

In this case, the rel attribute is set to "icon" to indicate that it is an icon file, and the href attribute specifies the path to the icon file. The type attribute indicates the type of the linked file, in this case, image/x-icon for icons.

Linking external documents: The <link> tag can be used to link other external documents, such as:

1. Stylesheet for printing: Imagine you have a special design for when someone wants to print your webpage. The <link> tag can connect your webpage to a separate stylesheet designed just for printing. This way, when someone prints your page, it looks nice and tidy.

Example:

<!-- Link to the stylesheet for printing -->
  <link rel="stylesheet" type="text/css" href="print-styles.css" media="print">

2. Alternative versions of a document (like translations): Sometimes, you might have different versions of your webpage for different languages or purposes. The <link> tag can connect your webpage to these alternative versions.

Example:

<link rel="alternate" hreflang="es" href="spanish-version.html">

3. Feeds for content syndication: Let's say you have a blog, and you want others to easily see your latest posts. The <link> tag can help by connecting your webpage to a feed, which is like a stream of your latest content.

Example:

<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="rss-feed.xml">

The <link> tag is like a connector that helps your webpage interact with other files on the internet.

Anchor Tag

The anchor tag, represented by <a>, is used to create hyperlinks or anchor points within a webpage. It is primarily used to define a hyperlink, allowing users to navigate to another webpage, a different section of the same page, or even an external resource.

The anchor tag uses the href attribute to specify the destination URL (Uniform Resource Locator).

Example:

<a href="https://www.example.com">Visit Example.com</a>

Form tag

HTML forms are essential for user interaction on websites. They allow users to input data that can be sent to a server for processing. The basic structure of an HTML form involves several key elements:

<form>
  <!-- Your form elements go here -->
</form>

The <form> tag marks the beginning and end of your form. It acts as a container for various form elements. It commonly houses label, input types, textarea, and button tags.

Label

The <label> tag is used to define a label for an input element. Example:

<label for="username">Username:</label>

Input type

In a form, different input types serve various purposes. The input (<input>) tag defines an interactive element for users to enter data. Commonly used ones are:

Text Input:

<input type="text" name="username" placeholder="Enter your username">

Password Input:

<input type="password" name="password" placeholder="Enter your password">

Radio Buttons:

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

Checkboxes:

<input type="checkbox" name="subscribe" value="yes"> Subscribe to newsletter

Textarea

The <textarea> tag defines a multi-line text input control, commonly used within form elements. Example:

<textarea name="message" placeholder="Enter your message"></textarea>

Button (for submitting forms)

The most crucial part of a form is allowing users to submit their input. For this, you can use a button (<button>) tag to submit:

Example:

<button type="submit">Submit</button>

The <button> tag creates a clickable button. The type="submit" attribute indicates that clicking this button will submit the form.

Quick Tips

• Always include a name attribute in your form elements. It helps identify and process the data on the server.

• Use the placeholder attribute to give users a hint about the expected input.

• Consider the user experience when choosing input types. For instance, use radio buttons for mutually exclusive options.

Here is a code snippet demonstrating usage of a form element:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Enter your username">

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="Enter your password">

  <label>Gender:</label>
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female

  <label>Subscribe to newsletter:</label>
  <input type="checkbox" name="subscribe" value="yes">

  <label for="message">Your Message:</label>
  <textarea id="message" name="message" placeholder="Enter your message"></textarea>

  <button type="submit">Submit</button>
</form>

Self-closing Tags

The <input> or <input /> element above is a self-closing tag, which means it doesn't require a separate closing tag.

There are other self-closing tags in HTML:

• Image (<img> or <img />).

• Line breaks (<br> or <br />).

• External resource link (<link> or <link />).

• Horizontal rule (<hr> or <hr />).

• Meta data (<meta> or <meta />).

• Table column (<col> or <col />).

• Base URL for relative links (<base> or <base />).

• Word break opportunity (<wbr> or <wbr />).

• Area (<area> or <area />) which defines an area inside an image map so the image can have a clickable region.

Note: HTML5 (latest version of HTML) allows you to omit the slash (/) at the end of self-closing tags, but including it ensures compatibility with older standards like XHTML and some tools.

HTML Attributes

This is an additional information or characteristics that you can apply to HTML elements to modify their behavior, appearance, or define certain properties. Attributes are always included in the opening tag of an HTML element and are written as name-value pairs.

The basic syntax for an HTML attribute is:

<tagname attribute="value">Content</tagname>

Here, attribute is the name of the attribute, and "value" is the value assigned to that attribute.

There are many attributes available for various HTML elements, here are few ones:

id Attribute

It provides a unique identifier for an HTML element. It should be unique within the entire HTML document.

"id" attribute helps you uniquely identify and control specific elements on a webpage, just like how each student's ID number helps identify them uniquely in a school.

Example:

<div id="header">This is a div with an id attribute.</div>

class Attribute

Used to assign one or more class names to an HTML element. It also helps you organize and style different parts of a webpage by grouping them together.

Here is the syntax for class attribute:

<tagname class="classname1 classname2 ...">Content</tagname>

Suppose you want to style multiple paragraphs with the same font and color. Instead of writing the same CSS styles for each paragraph individually, you can assign a common class to all those paragraphs and define the styles for that class in your CSS file. Example:

<body>
  <p class="highlight">This is the first paragraph.</p>
  <p class="highlight">This is the second paragraph.</p>
  <p class="highlight">This is the third paragraph.</p>
</body>

Note: The "id" attribute and the "class" attribute in HTML serve similar purposes in that they both allow you to uniquely identify elements on a webpage. However, there are key differences between the two:

• Use the "id" attribute when you need to uniquely identify a single element.

• Use the "class" attribute when you want to group multiple elements together and apply styling or functionality to them collectively.

While both attributes can be used for styling, the "id" attribute is more suitable for unique styling, while the "class" attribute is ideal for applying consistent styles to multiple elements.

src (source) Attribute

It specifies the source URL of an image to be displayed. Example:

<img src="image.jpg" alt="Nuel Cas Photo">

Note: The alt attribute is used to provide alternative text for an image if the image fails to load. It serves as a descriptive text that is displayed in place of the image, helping users understand the content or purpose of the image even when it's not visible.

href Attribute (for links)

It specifies the URL that the hyperlink points to. Example:

<a href="https://www.nuelcas.com">Visit Nuel Cas</a>

width and height Attribute (for images)

It determines the width and height of an image in pixels. Example:

<img src="image.jpg" alt="Nuel Cas Photo" width="400" height="300">

style Attribute

Allows you to apply inline CSS styles to an HTML element. Example:

<p style="color: red; font-size: 18px;">This is a red text.</p>

disabled Attribute (for form elements)

Allows you to disable user interaction with form element. Example:

<input type="text" disabled>

type Attribute (for form element and list items)

You can use the type attribute with the <ol> tag to change the numbering style. Example:

<ol type="A">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ol>

This will render as:

A. Item A
B. Item B
C. Item C

Also, you can use type attribute to specify the input type of form element. Say you want to notify the browser that this input is for password, use the code below

<input type="password" name="password" placeholder="Enter your password">

name attribute (for form element)

The name attribute provides a unique identifier for each form field. When the form is submitted to the server, the data entered into each field is sent with the corresponding name as a key-value pair. The code snippet below shows that you want the server to identify this input as email.

 <input type="email" id="email" name="email" placeholder="Enter your email">

Note: Understanding and using attributes effectively is essential for controlling the appearance and behavior of elements in your HTML documents.

HTML Multimedia

You may need to integrate various types of media content into web pages, such as images, audio, and video. These media elements enhance the user experience by making web content more engaging and dynamic.

Here are the different types of multimedia you can use in HTML:

Images

Images are the most common type of multimedia in HTML. You can add images to a web page using the <img> tag. Example:

<img src="image.jpg" alt="Description of the image" width="200" height="150">

In the above example, src specifies the source URL of the image, alt provides alternative text for accessibility and SEO, and width and height are optional attributes to set the dimensions of the image.

Audio

You can embed audio files directly into a web page using the <audio> tag. This allows you to play audio clips, music, or other sound recordings. Example:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser may not support the audio element.
</audio>

In the above example, controls provides play, pause, and volume controls for the user, srcspecifies the source URL of the audio file, while type specifies the MIME (Multipurpose Internet Mail Extensions) type of the audio file.

Video

The <video> tag is used to embed video files into a web page. This allows you to play videos within the content. Example:

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  Your browser may not support the video element.
</video>

In the above example, controls provides play, pause, and volume controls for the user, width and height specifies the dimensions of the video, src specifies the source URL of the video file, while type specifies the MIME type of the video file.

iframe

<iframe> allows you to display content from a different source or page inside a frame on your webpage. This can be useful for embedding videos, maps, web pages, or other external content. Example using <iframe> to embed a video from YouTube:

<iframe 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  width="560" 
  height="315" 
  title="YouTube Video" 
  frameborder="0" 
  allowfullscreen>
</iframe>

In the above code snippet, src attribute specifies the URL of the page or content you want to embed. Sizes are controlled using the width and height attributes. title attribute provides a description for the content, which is important for accessibility.

The frameborder attribute controls whether the iframe has a border (0 for no border, 1 for a border), while the allowfullscreen attribute allows the video to be played in full-screen mode.

Note: Replace "VIDEO_ID" with the ID of the YouTube video you want to embed.

Best Practices

1. Follow proper HTML document structure:

• Start your HTML document with a <!DOCTYPE html> declaration to ensure browser compatibility and standards compliance.

• Always include the <html>, <head>, and <body> tags in your document.

• Use the <meta charset="UTF-8"> tag to specify the character encoding of your document.

• Define the language of your document using the language (<html lang="en">) attribute.

• Include a descriptive title (<title>) tag within the head (<head>) section to provide context for the page.

2. Use semantic HTML element:

• Utilize semantic HTML elements like <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> to provide clarity and structure to your content. Semantic elements improve accessibility, SEO, and maintainability of your code.

3. Comment your code:

• Use comments <!-- --> to document your HTML code, explaining its purpose and functionality. Comments improve code readability and facilitate collaboration among developers.

4. Structure your content with proper tags:

• Use heading tags <h1> to <h6> for defining the hierarchy of your content.

• Utilize paragraph tags <p> to separate blocks of text into distinct paragraphs.

• Employ lists (<ul>, <ol>, <li>) to organize and structure content in a hierarchical manner.

5. Group elements with <div> and <span> sparingly:

• Use <div> and <span> tags as needed to group and style elements, but avoid excessive nesting and over-reliance on these elements. Prefer more semantic alternatives where appropriate.

6. Do not overuse line breaks (<br>):

• While <br> tags can be useful for simple line breaks, avoid overusing them for layout purposes. Instead, use CSS and block-level elements for more complex layouts to maintain better code readability and maintainability.

7. Always use alternative text for images (alt attribute):

• Always include descriptive alternative text using the alt attribute for images (<img> tags). This improves accessibility for users with visual impairments and ensures that content remains understandable even if images fail to load.

8. Optimize forms for user experience (UX):

• Include meaningful name attributes for form elements to identify and process data accurately on the server.

• Utilize appropriate input types (type attribute) for form fields to enhance user experience and ensure data validation.

• Use the placeholder attribute to provide hints or expected input for form fields.

9. Ensure compatibility with older browsers:

• Your code should undergo compatibility testing across different browsers and devices to ensure consistent rendering and functionality.

• Include appropriate fallbacks for newer HTML features or attributes, this will help maintain compatibility with older browsers.

10. Stay updated with HTML standards:

• Keep yourself updated with the latest HTML standards and best practices to leverage new features, improve performance, and enhance the user experience of your web applications.

By adhering to these best practices, you can create well-structured, accessible, and maintainable HTML code that contributes to the overall quality and usability of your web projects.

If you have read, enjoyed, and desire more of this piece, feel free to reach out to me on X and LinkedIn for further collaboration.