Marca <resumo> em HTML
Hoje abordaremos exemplos de resumo de tags . Ao usar exemplos , antecipamos o cumprimento dos objetivos de aprendizagem.
A tag <summary> é um elemento HTML5 usado para definir um cabeçalho visível para um elemento <details> , que pode ser expandido ou recolhido. Os elementos <details> e <summary> geralmente são usados juntos para criar seções recolhíveis de conteúdo em uma página da web.
A tag <summary> indica um cabeçalho proeminente para a tag <details> .
Informações detalhadas podem ser visualizadas ou ocultadas clicando no título .
Aqui está o exemplo de tag <summary> :
Example:
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
Click here to see more information
Additional information goes here.
Aqui está um exemplo da tag <summary> em detalhes:
Example:
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
Learn more about the history of the Eiffel Tower
The Eiffel Tower was built by Gustave Eiffel as the entrance arch to the 1889 World's Fair, which was held in Paris to celebrate the 100th anniversary of the French Revolution.
Construction of the tower began in 1887 and was completed in 1889, taking a total of two years to build. The Eiffel Tower was the tallest man-made structure in the world at the time of its completion, measuring 300 meters tall.
Aqui está outro exemplo detalhado de uso das tags <summary> e <details> :
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
Ingredients and instructions for making a simple chocolate cake
Ingredients:
1 1/2 cups all-purpose flour
3/4 cup granulated sugar
1/2 cup unsweetened cocoa powder
1 teaspoon baking powder
1/2 teaspoon baking soda
1/2 teaspoon salt
1/2 cup milk
1/2 cup vegetable oil
2 eggs
1 teaspoon vanilla extract
Instructions:
Preheat the oven to 350°F (175°C). Grease and flour an 8-inch (20cm) round cake pan.
In a large mixing bowl, combine the flour, sugar, cocoa powder, baking powder, baking soda, and salt.
In a separate bowl, mix together the milk, vegetable oil, eggs, and vanilla extract.
Add the wet ingredients to the dry ingredients and mix until just combined.
Pour the batter into the prepared pan and bake for 25-30 minutes, or until a toothpick inserted into the center comes out clean.
Allow the cake to cool for 10 minutes before removing it from the pan and allowing it to cool completely on a wire rack.
O CSS também pode ser aplicado às tags <summary> e <details> . Veja o exemplo abaixo:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
details {
border: 1px solid gray;
padding: 10px;
margin-bottom: 20px;
}
summary {
font-weight: bold;
cursor: pointer;
}
summary::-webkit-details-marker {
color: maroon;
font-size: 0.8em;
}
ul {
list-style-type: square;
margin-left: 20px;
}
ol {
list-style-type: decimal;
margin-left: 20px;
}
Ingredients and instructions for making a simple chocolate cake
Ingredients:
1 1/2 cups all-purpose flour
3/4 cup granulated sugar
1/2 cup unsweetened cocoa powder
1 teaspoon baking powder
1/2 teaspoon baking soda
1/2 teaspoon salt
1/2 cup milk
1/2 cup vegetable oil
2 eggs
1 teaspoon vanilla extract
Instructions:
Preheat the oven to 350°F (175°C). Grease and flour an 8-inch (20cm) round cake pan.
In a large mixing bowl, combine the flour, sugar, cocoa powder, baking powder, baking soda, and salt.
In a separate bowl, mix together the milk, vegetable oil, eggs, and vanilla extract.
Add the wet ingredients to the dry ingredients and mix until just combined.
Pour the batter into the prepared pan and bake for 25-30 minutes, or until a toothpick inserted into the center comes out clean.
Allow the cake to cool for 10 minutes before removing it from the pan and allowing it to cool completely on a wire rack.
IMPORTANTE: No caso da tag <details> , a tag <summary> deve ser a primeira tag filha.
Índice-
Usos de resumo de tags
A tag <summary> é usada principalmente em conjunto com a tag <details> para criar seções recolhíveis de conteúdo em uma página da web. Aqui estão alguns dos usos comuns da tag <summary> :
- Quando usada com a tag <details> , a tag <summary> fornece um cabeçalho visível para a seção recolhível. Isso permite que o usuário expanda ou reduza o conteúdo da seção clicando no título. Isso é útil para apresentar grandes quantidades de conteúdo de forma compacta e organizada.
- A tag <summary> também pode ser usada para criar menus sanfonados, que são uma série de seções recolhíveis que permitem ao usuário expandir ou recolher o conteúdo conforme necessário. Os menus sanfonados são comumente usados na navegação de sites para apresentar um grande número de opções de maneira amigável.
- A tag <summary> também pode ser usada para fornecer contexto para o conteúdo em uma seção recolhível. Ao usar um cabeçalho descritivo, você pode deixar claro para o usuário quais informações estão contidas na seção e ajudá-lo a encontrar rapidamente as informações de que precisa.
- O uso da tag <summary> também pode ajudar a melhorar a acessibilidade do seu site, pois permite que os usuários com leitores de tela identifiquem e naveguem rapidamente para o conteúdo de que precisam. Quando usada corretamente, a tag <summary> pode tornar seu site mais fácil de usar e acessível a uma ampla gama de usuários.
Atributos
Global
O resumo da tag <summary> lida de forma semelhante com os atributos globais em HTML.
Evento
A Tag <summary> também aceita os Atributos do Evento em HTML.
Compatibilidade do navegador
Na tabela a seguir, os números indicam a versão do navegador compatível com o Tag Summary .
| Elemento |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <resumo> | 12,0 | 79,0 | 49,0 | 6.0 | 15,0 |
CSS predefinido
O elemento tag <summary> é frequentemente gerado com os valores padrão fornecidos:
summary {
display: block;
}
Vantagens do resumo da tag HTML
Aqui estão algumas das principais vantagens de usar a tag <summary> :
- A tag <summary> pode ajudar a tornar seu site mais fácil de usar, permitindo que você apresente grandes quantidades de conteúdo de forma compacta e organizada. Ao fornecer um cabeçalho visível para as seções recolhíveis, os usuários podem digitalizar rapidamente a página para encontrar as informações de que precisam, sem serem sobrecarregados por muito conteúdo de uma só vez.
- O uso da tag <summary> também pode melhorar a acessibilidade do seu site, tornando mais fácil para os usuários com leitores de tela navegar e entender seu conteúdo. Ao usar cabeçalhos descritivos na tag <summary>, você pode fornecer contexto para o conteúdo na seção recolhível, o que pode tornar mais fácil para os usuários com deficiência encontrarem as informações de que precisam.
- Ao usar seções recolhíveis de conteúdo, você pode economizar um espaço valioso em sua página da web. Isso é particularmente útil para dispositivos móveis, onde o espaço na tela é limitado. Ao usar a tag <summary> para criar seções recolhíveis, você pode tornar seu conteúdo mais acessível e fácil de navegar, sem sacrificar o valioso espaço na tela.
- A tag <summary> é fácil de implementar e pode ser adicionada a qualquer página da Web com apenas algumas linhas de código HTML. Isso o torna uma maneira simples e eficaz de melhorar a experiência do usuário em seu site, sem exigir muitos recursos ou conhecimentos técnicos.
Se este artigo foi informativo o suficiente para atender aos seus desejos educacionais, compartilhe informações significativas com seus amigos clicando nos links abaixo.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
