HTML 5.1 and some stuff that is new

Created: 03.11.2016 | Updated: 27.11.2016

There are a couple of changes in HTML 5 and 5.1 and some of the useful parts are shown here over time.

The details and summary tag

The details tag in combination with the summary tag allow you to show some information and disclose more details if the user clicks on the summary. The most basic usage is:

<details>
<summary>
Summary to show always
</summary>
<p>
Details shown on click of the summary
</p>
</details>

If you want to have the details shown directly after loading of the page, just add the attribute open to it.

<details open>

The examples are using these tags and you can see immediately if the browser you are using is supporting it.

1. Basic example

The most straightforward example of here: Code for it:

<details>
<summary>
Summary: Make sure to try it yourself
</summary>
<p>
Detail: It is important to try all of this stuff yourself to see how it works.
</p>
</details>

2. Example with some styling

Now let's do some styling, especially to get rid of the blue selection box and add some background colors.

Summary: Make sure to try it yourself

Detail: It is important to try all of this stuff yourself to see how it works.

The styling added over here is:

<details style="background-color:#f8f8f8;"><summary style="outline:none;background-color:#f0f0f0;">

Styling of the summary marker

Summary

Detail: It is important to try all of this stuff yourself to see how it works.

And here the CSS part for the styling:

summary::-webkit-details-marker {
  display: none
}
summary:after {
  background: #c0c0c0; 
  content: "+"; 
  color: #fff; 
  float: left; 
  font-size: 1em; 
  font-weight: bold; 
  margin: 0px 10px 0 0; 
  padding: 0; 
  text-align: center; 
  width: 20px;
}
details[open] summary:after {
  content: "-";
}

Learn HTML in General

And here we get an introduction to HTML by professor Ramay: