The <video> tag is added in HTML5 along with its sibling, <audio>. Before the release of HTML5, a video could only be played in a browser with a plug-in (like a flash). The HTML5 <video> element specifies a standard way to embed a video in a web page. That is to say that the video is identified by adding a video URL to a source attribute. One can use it to embed videos imported from the computer or hosted by an external website.
You can display an ordered list with nested counters like 1.1, 1.2 instead of 1, 2 by using CSS. In this snippet, you’ll find some methods of displaying such numbers.
The <fieldset> tag is used to visually group some logically related fields in the <form> tag. In this tutorial, you will find some examples of using the <fieldset> tag and find out why we need this tag at all.
In the example below, we place the <fieldset> element in a <form> tag. In the <fieldset>, we add the <legend>, <input>, and <label> elements.
find some methods of creating an HTML table, which has a fixed header and scrollable body. Of course, you need to use CSS. It is possible to achieve such a result by setting the position property to “sticky” and specifying 0 as a value of the top property for the <th> element.
Mailto links are used to redirect to an email address instead of a web page URL. When a user clicks on the Mailto link, the default email client on the visitor's computer opens and suggests sending a message to the email address mentioned in the Mailto link.
To create a Mailto link, you need to use the HTML <a> tag with its href attribute, and insert a "mailto:" parameter after it, like the following:
In this snippet, you can see how to add a vertical line in HTML. But you need to use CSS, as well. Add a vertical line on the left or right side by using the border-left or border-right properties, respectively. See also how to center a vertical line and how to add a vertical line before a text.
The most common way of creating a click event with CSS is using the checkbox hack. This method has broad browser support. You need to add a for attribute to the <label> element and an id attribute to the <input> element.
Hyperlinks are used to jump from one page to another. A hyperlink commonly opens in the same page by default. But it is possible to open hyperlinks in a separate window.
In this snippet, we’re going to animate the progress bar created with the HTML <progress> tag. In our example, we style Shadow DOM elements, but one thing that may cause difficulties is animating the background which is represented as a repeating linear-gradient.
To delay an animation, we use the CSS animation-delay property, which specifies the time between an element being loaded and the start of an animation. But there can be some difficulties when delaying the animation, such as the problem when an element disappears after the animation. Let’s see the solution to this.
