Interactive HTML Elements

You have already seen elements and properties that help create interactivity.

They don't have to be multimedia elements to create interactivity!

<a>

Perhaps the most fundamental interaction on the web is clicking a link.

See the Pen Link Demo on CodePen.

<details> and <summary>

You may have also seen the <details> and <summary> elements which creates a toggle element that shows the details when you click the summary.

See the Pen Untitled by Rob Cobb (@rrcobb) on CodePen.

You've seen this combo in action!

We use the details and summary components in the lessons to hide away some of the content under a toggle.

There is always more underneath!

:hover and :cursor

You’ve also learned a couple of CSS tricks that create some interactive feeling:

  • Using the :hover selector to style elements when they are hovered (hover on MDN)
  • Using the cursor property to style the cursor (cursor on MDN)

See the Pen Untitled by Rob Cobb (@rrcobb) on CodePen.

These are basic kinds of interactivity, but don’t forget about them!