Por onde começar a estrutura de uma página HTML? O chatGPT responde :)
A primeira preocupação que devo ter quando construo uma página HTML é definir as landmarks. Há 3 landmarks que todas as páginas HTML, hoje em dia, devem ter. E devem ter apenas 1 landmark destas e elas não devem estar dentro de outros elementos semânticos. Eles devem ocupar o primeiro nível da página.
Pedi, em inglês, ao chat GPT:
A resposta do chat GPT foi rápida:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Landmarks Page</title>
</head>
<body>
<header>
<h1>My Landmarks Page</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Landmark 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod lorem eu eros lobortis, quis lobortis odio pellentesque. Nam euismod eleifend risus, at lobortis orci rhoncus eu. Suspendisse ac sodales tellus. Nullam elementum tellus in lectus commodo, sit amet dictum tellus luctus.</p>
</section>
<section>
<h2>Landmark 2</h2>
<p>Phasellus hendrerit suscipit elit. Fusce fringilla hendrerit mauris, in auctor metus convallis nec. Nunc vel nunc augue. Quisque aliquet, est eget dictum rhoncus, augue lacus hendrerit urna, vel auctor odio nunc eget nunc.</p>
</section>
<section>
<h2>Landmark 3</h2>
<p>Praesent nec semper tellus. Vivamus elementum mollis purus, ut blandit neque mattis vel. Pellentesque sit amet nibh tellus. Nullam sed est lobortis, interdum velit vitae, lacinia mauris. Aliquam erat volutpat.</p>
</section>
</main>
<footer>
<p>© 2023 My Landmarks Page. All rights reserved.</p>
</footer>
</body>
</html>E ainda adicionou:
In this example, the header element contains the page title, a h1 element, and a navigation menu using an unordered list (ul) and list items (li). The main element contains three sections, each with a h2 element for the landmark title and a p element for the landmark description. The footer element contains a copyright notice.
E, já agora, faz o mesmo mas em português:
E a resposta, passou para:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Minha Página de Pontos Turísticos</title>
</head>
<body>
<header>
<h1>Minha Página de Pontos Turísticos</h1>
<nav>
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Ponto Turístico 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod lorem eu eros lobortis, quis lobortis odio pellentesque. Nam euismod eleifend risus, at lobortis orci rhoncus eu. Suspendisse ac sodales tellus. Nullam elementum tellus in lectus commodo, sit amet dictum tellus luctus.</p>
</section>
<section>
<h2>Ponto Turístico 2</h2>
<p>Phasellus hendrerit suscipit elit. Fusce fringilla hendrerit mauris, in auctor metus convallis nec. Nunc vel nunc augue. Quisque aliquet, est eget dictum rhoncus, augue lacus hendrerit urna, vel auctor odio nunc eget nunc.</p>
</section>
<section>
<h2>Ponto Turístico 3</h2>
<p>Praesent nec semper tellus. Vivamus elementum mollis purus, ut blandit neque mattis vel. Pellentesque sit amet nibh tellus. Nullam sed est lobortis, interdum velit vitae, lacinia mauris. Aliquam erat volutpat.</p>
</section>
</main>
<footer>
<p>© 2023 Minha Página de Pontos Turísticos. Todos os direitos reservados.</p>
</footer>
</body>
</html>E adicionou o chat GPT:
Neste exemplo, o elemento header contém o título da página, um elemento h1 e um menu de navegação utilizando uma lista não ordenada (ul) e itens de lista (li). O elemento main contém três seções, cada uma com um elemento h2 para o título do ponto turístico e um elemento p para a descrição do ponto turístico. O elemento footer contém um aviso de direitos autorais.
Não contente ainda com o resultado :), solicitei ao GPT que usasse a variante português de Portugal.
Aqui está a resposta:
E o código corrigido. De notar a regra de acessibilidade "marcar o idioma principal da página" que passou para html lang="pt-PT":
<!DOCTYPE html>
<html lang="pt-PT">
<head>
<meta charset="UTF-8">
<title>Minha Página de Pontos Turísticos</title>
</head>
<body>
<header>
<h1>Minha Página de Pontos Turísticos</h1>
<nav>
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Ponto Turístico 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod lorem eu eros lobortis, quis lobortis odio pellentesque. Nam euismod eleifend risus, at lobortis orci rhoncus eu. Suspendisse ac sodales tellus. Nullam elementum tellus in lectus commodo, sit amet dictum tellus luctus.</p>
</section>
<section>
<h2>Ponto Turístico 2</h2>
<p>Phasellus hendrerit suscipit elit. Fusce fringilla hendrerit mauris, in auctor metus convallis nec. Nunc vel nunc augue. Quisque aliquet, est eget dictum rhoncus, augue lacus hendrerit urna, vel auctor odio nunc eget nunc.</p>
</section>
<section>
<h2>Ponto Turístico 3</h2>
<p>Praesent nec semper tellus. Vivamus elementum mollis purus, ut blandit neque mattis vel. Pellentesque sit amet nibh tellus. Nullam sed est lobortis, interdum velit vitae, lacinia mauris. Aliquam erat volutpat.</p>
</section>
</main>
<footer>
<p>© 2023 Minha Página de Pontos Turísticos. Todos os direitos reservados.</p>
</footer>
</body>
</html>E a nota adicional do chat GPT:
Neste exemplo, o elemento header contém o título da página, um elemento h1 e um menu de navegação utilizando uma lista não ordenada (ul) e itens de lista (li). O elemento main contém três seções, cada uma com um elemento h2 para o título do ponto turístico e um elemento p para a descrição do ponto turístico. O elemento footer contém um aviso de direitos autorais. Note que em português de Portugal, a palavra "Contato" é substituída por "Contacto".