Maison > Article > interface Web > Balises HTML5

Balises HTML5

WBOYoriginal: 2024-09-04 16:36:33406parcourir

Nous connaissons tous l'abréviation standard de HTML, qui est HyperText Markup Language. Ainsi, HTML5 est la dernière et la nouvelle version de HTML. Une fois qu'un produit est développé ; évidemment, il y aurait de nombreuses versions de HTML avec de nombreux nouveaux développements en cours de route. Ainsi, HTML5 a de nouveaux attributs et comportements. Cette balise HTML5 n'est plus un langage de programmation, mais c'est un langage de balisage. Maintenant, qu’est-ce qu’un langage de balisage ? Définir les attributs des éléments à l'aide de balises dans un document est un langage de balisage. Voyons maintenant en détail comment définir des balises et créer une page Web.

Balises HTML5

Une balise est une spécification pour afficher du contenu. Généralement, il y aurait une balise de début et de fin. De plus, peu de balises ne nécessitent pas de balise de fin, comme , ce qui signifie une rupture de ligne, qui affiche les données à côté de cette balise de la ligne suivante. Voyons ici quelques-uns des nouveaux éléments du HTML5.

En HTML5, on peut généralement diviser les balises en deux catégories.

Éléments sémantiques : Quelques exemples de ces éléments sont : , , etc.
Éléments non sémantiques : Voici des exemples :
, etc.

Les balises décrites ci-dessous sont celles qui sont nouvellement introduites exclusivement dans les versions HTML5. Ce sont différents types de balises qui peuvent toutes être catégorisées.

1. Balises structurelles

Vous trouverez ci-dessous les types d'étiquettes structurelles avec des exemples :

a. Article : Il s'agit d'une balise qui est principalement utilisée comme une balise head. Principalement utilisé dans les formulaires, les blogs, les actualités et tout cela à titre d'exemple.

Code :

<html>
<article> <h3>The first one </h3></article>
<body>
<h2>Welcome Back</h22>
</body>
</html>

Sortie :

Balises HTML5

b. À part : Quelque chose de similaire à nos balises normales, qui relieraient le contenu au contenu environnant, comme une barre latérale dans l'article. Et cette balise n'aurait de sens que lors de l'utilisation d'une version d'IE supérieure à 8.

c. Détails : Cette balise est utilisée pour fournir des données supplémentaires à l'utilisateur. Il peut s'agir d'une plate-forme interactive pouvant masquer ou afficher les détails. Nous pouvons voir l’utilisation de cet onglet sous la balise récapitulative.

d. En-tête : Cette balise est liée à la partie en-tête et contient des informations sur le titre. Il doit avoir à la fois les balises de début et de fin.

Code :

<html>
<header>
<h1>Happy Hours</h1>
<nav>
<p><a href="#">Morning</a> | <a href="#">Afternoon</a> | <a href="#">Evening</a></p>
</nav>
</header>
</html>

Sortie :

Balises HTML5

e. hgroup : Cette balise est utilisée pour décrire un groupe d'en-têtes. Regardons l'exemple.

Code :

<html>
<body>
<hgroup>
<h1>Let’s check size of this h1 </h1>
<h2> Let’s check size of this h2 </h2>
<h3> Let’s check size of this h3</h3>
<h4> Let’s check size of this h4</h4>
<h5> Let’s check size of this h5</h5>
</hgroup>
</body>
</html>

Sortie :

Balises HTML5

f. Pied de page :Cette balise est celle qui doit être placée en fin de page. Il s'agit de quelque chose comme le droit d'auteur, des informations ou des données liées à l'histoire. Voyons un petit exemple ci-dessous.

Code :

<html>
<body>
<footer>
<nav>
<p><a href="#">Copy Rights</a> | <a href="#">Come back soon</a></p>
</nav>
<p>Please subsribe for more learning content</p>
</footer>
</body>
</html>

Sortie :

Balises HTML5

g. nav : Cette balise sert à fournir une section de tous les liens pour la navigation.

Code :

<html>
<body>
<nav>
<ul>
<li><a href="https://www.educba.com/">EDUCBA Home</a></li>
<li><a href="https://www.educba.com/about-us/">About EDUCBA</a></li>
<li><a href="https://www.educba.com/courses/">Courses in EDUCBA</a></li>
</ul>
</nav>
</body>
</html>

Sortie :

Balises HTML5

Vérifiez en cliquant sur les liens une fois que vous avez écrit votre code tout en vous entraînant.

h. Section : Comme son nom l'indique déjà, cette balise définit la partie du code comme le corps, l'en-tête, le pied de page, etc. Ici, les balises de début et de fin sont nécessaires. Voyons un petit exemple ci-dessous :

Code :

<html>
<section>
<h1> Welcome </h1>
<h4> See you soon </h4>
<p>Thank You.</p>
</section>
</html>

Sortie :

Balises HTML5

je. Résumé : Cette balise est utilisée en parallèle avec l'onglet Détails. Sous la balise détails, nous avons cette balise récapitulative pour résumer les concepts. Exemple ci-dessous :

Code :

<html>
<body>
<details>
<summary>How is this Summary tag defined?</summary>
<p>By clicking the arrow beside the Summary question I got displayed</p>
</details>
<p> The data after the display tag is displayed like this.</p>
</body>
</html>

Sortie :

Balises HTML5

En développant maintenant les données de la balise récapitulative, nous obtenons ce qui suit.

Balises HTML5

2. Balises de formulaire

Voici les différents types de balises de formulaire expliqués ci-dessous avec des exemples :

a. Datalist : Cette balise est utilisée comme une liste déroulante contenant des valeurs prédéfinies qu'un utilisateur peut choisir. Jetons un coup d'œil au petit exemple ci-dessous :

Code :

<html>
<body>
<p>Enter your favorite browser name:</p>
<input type="text" list="browsers">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
</body>
</html>

Sortie :

Balises HTML5

La liste déroulante apparaît lorsque la souris passe le curseur.

Balises HTML5

b. Keygen: This is for the encryption. It is for generating an encrypted key for passing the data in an encrypted format. Only the start tag is enough/required for this element, and the end tag is not mandatory.

c. Meter: This tag would give us the measurement of the data which is present in a given range.

Code:

<html>
<body>
<meter value="25" min="0" max="100">25 out of 100</meter><p> This is 25 out of 100 </p><br>
<meter value="0.7">70%</meter><p> This is the range for 70%</p>
</body>
</html>

Output:

Balises HTML5

3. Formatting Tags

Below are the types of formatting tag with examples:

a. BDI: This is Bi-directional isolation. As the name already suggests, this tag can be used to isolate a part of the text and give it different styles from that of other text.

b. Mark: This tag can help us highlight a specific text.

Code:

<html>
<body>
<p>This is how you can <mark>mark or highlight</mark> a text.</p>
</body>
</html>

Output:

Balises HTML5

c. Output: As the name already shows us, it gives the result of any calculation.

Code:

<html>
<body>
<form oninput="sum.value=parseInt(x.value)+parseInt(y.value)">
<input type="number" id="x”> +
<input type="number" id="y" value="350"> =
<output name="sum" for="x y"></output>
</form>
</body>
</html>

Output:

Balises HTML5

Make sure that you notice the form attribute of oninput. Once you input the attribute ‘x’ value, then the output gets displayed.

d. Progress: This tag gives us the progress of a particular task.

Code:

<html>
<body>
<progress value="80" max="100"></progress><p> This progress bar is 80% completed</p>
</body>
</html>

Output:

Balises HTML5

e. Rp: This is used when the ruby tags are not supported.

f. Rt: It is used with the tag ruby. Mostly this is used in pronunciation in both Japanese and Chinese languages.

g. Ruby: This tag is used with the rt and rp tags where the annotations with respect to the two languages, Chinese and Japanese, are pronounced.

h. Wbr: This tag is for the word break. It is mainly used to check how a word breaks when the window size is resized.

4. Embedded Content Tags

Here are the types of embedded content tag explained below with examples:

a. Audio: As the name already suggests, this tag would help us to incorporate audio files in the HTML document.

b. Canvas: Defines a place on the web page where graphics or shapes, or graphs are present or can be defined. Here is an example.

Code:

<html>
<body>
<canvas id="run" ></canvas>
<script type="text/javascript">
window.onload = function(){
var can = document.getElementById("run");
var context = can.getContext("2d");
context.moveTo(30, 60);
context.lineTo(150, 30);
context.stroke();
};
</script>
</body>
</html>

Output:

Balises HTML5

c. Dialog: This tag gives us a default box, especially if we wanted to have data in a box.

Code:

<html>
<body>
<p> Trying dialog here <dialog open>How does dialog box come up?</dialog> </p>
</body>
</html>

Output:

Balises HTML5

d. Embed: This tag can be used for getting in any external file to the HTML file. We can have only the start tag, and the end tag is not mandatory here. There are different attributes that can be used with this tag, namely, width, height, src, and type.

e. Figure and Figcaption: This, as already in its name, can incorporate the images and can give a caption to that image.

f. Source: This tag can implement multiple audio and video files by providing the location of the files using this source tag.

g. Time: This tag, as the name already notifies, is a tag for displaying the time. And note that this tag is not functional in the cases of internet explorer version 8 and below.

h. Video: With the name of the tag, we can obviously get to know where this tag is used. For specifying the video files, we have this tag. Inside this Audio/Video tags, we define the source tags in specifying the files and their locations.

Input Elements of HTML5 Tags

Here are some input elements which we are using in HTML5 tags:

1. Email: This is one of the input elements in HTML5. This element takes in only email addresses as the input.

2. Number: This input element only accepts the number.

3. Range: As the name already explains, this tag contains a range of numbers.

4. URL: This input tag accepts the input field for the URL address. In this input type, we can only enter the URL.

5. Placeholder: This is one of the attributes for the input type as text or text area or any number. This place holder value shows the value to be given as the input.

Code:

<html>
<body>
Enter Date of birth : <input type = "text" name = "dob"
placeholder = "dd/mm/yyyy"/>
</body>
</html>

Output:

Balises HTML5

6. Autofocus: This attribute automatically focuses on a particular field where this element has been declared inside the input tag. This attribute is supported only by the latest versions of Chrome, Safari, and Mozilla only. The syntax is like this:

<input type = “textarea” name=”focus” autofocus/>
Tag <dd>: This tag represents a description of a definition.
Tag <del>: This tag deletes a specified text.
Tag <marquee>: This tag helps to display data in a scrolling manner.
<html>
<body>
<marquee> This texxt is in a scrolling manner </marquee>
</body>
</html>

Output:

Balises HTML5

7. : This is one of the basic tags that would help the browser understand the HTML version in which the program is being written. The declaration of this tag is to be written before the HTML tag.

8. : This Meta tag describes the description of the HTML document. It contains the author’s name, date, and modifications, etc.

In this HTML5, we even have an opportunity to get the GeoLocation of a device. There are different methods that can be helpful in making this location tagging easy. There are also different fonts and colors available in HTML5. Below are the few tags that are removed from the HTML usage from this HTML5 version.

Acronym, Applet, big, dir, font, frameset, center, tt (TeleType text), basefont, center, strike, frame, u (underlined text), isindex, noframes, etc. Few attributes that are removed are below:

Align, bgcolor, cellpadding, cellspacing, border, link, shape, charset, archive, codebase, scope, alink, vlink, link, background, border, clear, scrolling, size, width, etc.