Marca HTML <principal>

Neste post falaremos sobre Tag main com exemplos . Aspiramos a atender às demandas de aprendizagem.

A tag HTML <main> é usada para definir o conteúdo principal de uma página da web. Deve conter o conteúdo principal do documento, como artigos, seções ou qualquer outro conteúdo diretamente relacionado ao objetivo principal da página.

A tag <main> faz parte da especificação HTML5 e deve ser usada para substituir o uso da tag <div> para o conteúdo principal. Essa tag não possui um estilo visual específico, mas fornece significado semântico ao documento, o que pode melhorar a acessibilidade e a otimização do mecanismo de busca (SEO).

Descreva o conteúdo principal do documento:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<body>
<main>
<h1>Most Famous Companies in the World</h1>
<p>ServiceNow, Tesla, and Netflix are the most popular companies today.</p>
<article>
<h2>ServiceNow</h2>
<p>ServiceNow, Inc. engages in the provision of enterprise cloud computing solutions. The company was founded by Frederic B. Luddy in June 2004 and is headquartered in Santa Clara, CA.</p>
</article>
<article>
<h2>Tesla</h2>
<p>Tesla, Inc. engages in the design, development, manufacture, and sale of fully electric vehicles, energy generation, and storage systems. Jeffrey B. Straubel founded the company with Elon Reeve Musk, Martin Eberhard, and Marc Tarpenning on July 1, 2003, </p>
</article>
<article>
<h2>Netflix</h2>
<p>Netflix, Inc. is a streaming entertainment service company that provides subscription services for streaming movies and television episodes over the Internet and sending DVDs by mail. The company was founded by Marc Randolph and Wilmot Reed Hastings Jr. on August 29, 1997, </p>
</article>
</main>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você também pode estilizar o elemento <main> com CSS:

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
<!DOCTYPE html>
<html>
<head>
<style>
.companies {
margin: 0;
padding: 8px;
background-color: lightblue;
}
.companies{
margin: 10px;
padding: 8px;
}
</style>
</head>
<body>
<article class="companies">
<h1>Most
Popular Companies</h1>
<article class="companies">
<h2>ServiceNow</h2>
<p>ServiceNow, Inc. engages in the provision of enterprise cloud computing solutions. The company was founded by Frederic B. Luddy in June 2004 and is headquartered in Santa Clara, CA.</p>
</article>
<article class="companies">
<h2>Tesla</h2>
<p>Tesla, Inc. engages in the design, development, manufacture, and sale of fully electric vehicles, energy generation, and storage systems. Jeffrey B. Straubel founded the company Elon Reeve Musk, Martin Eberhard, and Marc Tarpenning on July 1, 2003, </p>
</article>
<article class="companies">
<h2>Netflix</h2>
<p>Netflix, Inc. is a streaming entertainment service company that provides subscription services for streaming movies and television episodes over the Internet and sending DVDs by mail. The company was founded by Marc Randolph and Wilmot Reed Hastings Jr. on August 29, 1997.</p>
</article>
</article></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de tag <main> com algumas outras tags:

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
<!DOCTYPE html>
<html>
<body>
<header>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Us</h2>
<p>We are a team of experienced web developers, designers and digital marketers who are passionate about creating beautiful, functional and user-friendly websites. We have a proven track record of delivering high-quality projects on time and within budget.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<ul>
<li>Website Design and Development</li>
<li>E-commerce Solutions</li>
<li>Search Engine Optimization</li>
<li>Social Media Marketing</li>
<li>Pay-per-click Advertising</li>
</ul>
</section>
<section id="portfolio">
<h2>Our Portfolio</h2>
<ul>
<li><a href="https://www.example1.com">Example 1</a></li>
<li><a href="https://www.example2.com">Example 2</a></li>
<li><a href="https://www.example3.com">Example 3</a></li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="Send">
</form>
</section>
</main>
<footer>
<p>Copyright 2023 Mr Examples</p>
</footer>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está como você pode estilizar o código acima:

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f5f5f5;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
text-decoration: none;
color: black;
}
main {
margin: 20px;
}
section {
margin-bottom: 20px;
}
section#about {
background-color: #f5f5f5;
padding: 20px;
}
section#services ul {
list-style: none;
margin: 0;
padding: 0;
}
section#services li {
margin-bottom: 10px;
}
section#portfolio ul {
list-style: none;
margin: 0;
padding: 0;
}
section#portfolio li {
margin-bottom: 10px;
}
section#contact form {
margin-top: 20px;
}
section#contact label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
section#contact input[type="text"], section#contact input[type="email"], section#contact textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
box-sizing: border-box;
}
footer {
background-color: #f5f5f5;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Us</h2>
<p>We are a team of experienced web developers, designers and digital marketers who are passionate about creating beautiful, functional and user-friendly websites. We have a proven track record of delivering high-quality projects on time and within budget.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<ul>
<li>Website Design and Development</li>
<li>E-commerce Solutions</li>
<li>Search Engine Optimization</li>
<li>Social Media Marketing</li>
<li>Pay-per-click Advertising</li>
</ul>
</section>
<section id="portfolio">
<h2>Our Portfolio</h2>
<ul>
<li><a href="https://www.example1.com">Example 1</a></li>
<li><a href="https://www.example2.com">Example 2</a></li>
<li><a href="https://www.example3.com">Example 3</a></li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="Send">
</form>
</section>
</main>
<footer>
<p>Copyright 2023 Mr Examples</p>
</footer>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Índice-

Uso principal da etiqueta

A Tag main <main> indica o conteúdo principal do documento.

No elemento <main> , o conteúdo deve ser autêntico ao documento. Nenhum conteúdo duplicado deve aparecer nele, por exemplo, barras laterais, links de navegação, detalhes de direitos autorais , logotipos de sites e formulários de pesquisa.

IMPORTANTE: Não é permitido ter mais de um elemento <main> em um documento. O elemento principal Tag <main> não pode ser subordinado a um elemento <article> , <aside> , <footer> , <header> ou <nav> .

A tag <main> é útil por vários motivos:

  • Ao usar a tag <main> , você fornece significado semântico ao seu documento HTML. Isso ajuda os mecanismos de pesquisa e outras ferramentas a entender a estrutura da sua página e pode melhorar a acessibilidade para usuários com deficiências que usam leitores de tela.
  • Usar a tag <main> permite que você organize sua página de forma mais eficaz. Ele ajuda a separar o conteúdo principal de outros elementos, como cabeçalhos e rodapés, e facilita a aplicação de estilos apenas ao conteúdo principal.
  • A tag <main> pode ajudar a melhorar a acessibilidade para usuários com deficiências que usam leitores de tela. Ao definir claramente o conteúdo principal da página, fica mais fácil para esses usuários navegar pelo conteúdo e entender sua estrutura.

Uso diário da tag principal HTML

Aqui estão alguns cenários em que usar a tag <main> pode facilitar seus esforços:

  • Em uma postagem de blog, você pode usar a tag <main> para conter o conteúdo do artigo.
  • Em um site de comércio eletrônico, você pode usar a tag <main> para conter as listas de produtos.
  • Em um site de notícias, você pode usar a tag <main> para conter os artigos ou notícias.

Atributos

Global

A Tag <main> também é compatível com Atributos Globais em HTML.

Evento

Em HTML, o Tag <main> também aceita Atributos de Evento .

Compatibilidade do navegador

Os números da tabela indicam a versão inicial do navegador que aceita o elemento.

Elemento
<principal> 26,0 12,0 21,0 7,0 16,0

Benefícios da tag HTML <main>

A tag HTML <main> fornece vários benefícios quando usada em uma página da web:

  • A tag <main> ajuda a definir claramente o conteúdo principal da página da web, fornecendo significado semântico ao documento. Isso pode melhorar a acessibilidade, o SEO e a estrutura geral da página.
  • A tag <main> ajuda a melhorar a acessibilidade, fornecendo uma maneira clara e consistente de identificar o conteúdo principal de uma página para usuários que dependem de tecnologias assistivas, como leitores de tela.
  • Ao usar a tag <main> para envolver o conteúdo principal de uma página, você pode tornar o conteúdo mais legível e fácil de entender para os usuários. Isso ajuda a separar o conteúdo principal de outras partes da página, como navegação ou rodapés.
  • A tag <main> ajuda a organizar melhor a estrutura da página web. Ele separa o conteúdo principal de outras partes da página, como cabeçalhos e rodapés, e facilita a aplicação de estilos especificamente ao conteúdo principal.
  • A tag <main> faz parte da especificação HTML5, o que significa que é uma maneira padrão de definir o conteúdo principal de uma página da web. Ao usá-lo, você está preparando seu código para o futuro e tornando mais fácil para outros desenvolvedores entender e trabalhar com seu código.
Se este artigo foi informativo o suficiente para atender aos seus desejos educacionais, compartilhe essas informações significativas com seus amigos também clicando nos links abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.