El atributo itemscope de HTML funciona con tipos de elementos para garantizar que el código HTML contenido en un bloque se refiera a un elemento en particular. La definición del atributo itemscope para cualquier elemento crea un nuevo elemento, lo que da como resultado una serie de pares de nombre y valor asociados con el elemento.
Sintaxis:
<element itemscope></element>
Ejemplo 1: El siguiente ejemplo ilustra el atributo itemscope en HTML.
HTML
<!DOCTYPE html> <html> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <strong>HTML itemscope Attribute</strong> </center> <div itemscope itemtype= "https://www.youtube.com/channel/UC0RhatS1pyxInC00YKjjBqQ"> <h1 itemprop="name">Courses</h1> <span>Geeksforgeeks: <span itemprop="topic">A Computer</span> Science portal for Geeks </span> <span itemprop="stack">Web Developer</span> <a href= "https://www.youtube.com/watch?v=Bjed-kudYkU" itemprop="full_course">Visit Courses</a> </div> </body> </html>
Producción:
Datos estructurados: La siguiente tabla muestra los datos estructurados del ejemplo anterior.
|
itemscope |
tipo de artículo |
canal |
|
|
articuloprop |
(nombre del artículo) |
(valor del artículo) |
|
|
articuloprop |
tema |
Un ordenador |
|
|
articuloprop |
pila |
Desarrollador web |
|
|
articuloprop |
nombre |
Cursos |
|
|
articuloprop |
curso completo |
Visitar Cursos |
|
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <strong>HTML itemscope Attribute</strong> </center> <div itemscope itemtype= "https://www.youtube.com/channel/UC0RhatS1pyxInC00YKjjBqQ"> <h1 itemprop="name">DSA Courses</h1> <span>Geeksforgeeks: <span itemprop="topic">A Computer</span> Science portal for Geeks </span> <br> <ul> <li> <span itemprop="stack"> Competitive Programming </span> <a href= "https://practice.geeksforgeeks.org/courses/competitive-programming/" itemprop="full_course">Visit Courses</a> </li> <li><span itemprop="stack"> DataStructure & Algorithm </span> <a href= "https://practice.geeksforgeeks.org/courses/dsa-self-paced/" itemprop="course">Visit Courses</a> </li> </ul> </div> </body> </html>
Producción:
Datos estructurados: La siguiente tabla muestra los datos estructurados del ejemplo anterior.
|
itemscope |
tipo de artículo |
canal |
|
|
articuloprop |
(nombre del artículo) |
(valor del artículo) |
|
|
articuloprop |
tema |
Un ordenador |
|
|
articuloprop |
pila |
Programación Competitiva |
|
|
articuloprop |
nombre |
Cursos |
|
|
articuloprop |
curso completo |
Visitar Cursos |
|
|
articuloprop |
pila |
Estructura de datos y algoritmo |
|
|
|
articuloprop |
curso |
Visitar Cursos |
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Mozilla Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA