Mastermind Challenger

Estrutura do AMPHTML com HTML5

OS MELHORES CONTEÚDOS DE DESENVOLVIMENTO WEB AMP E PROGRAMAÇÃO DO MERCADO!

A estutura do amphtml com o html5 entenda de uma vez por todas como é dividido a estrutura de uma pagina amp e como podemos aplicar scripts, CSS e HTML5

Escola de Desenvolvimento Web e Otimização de Sites

Estrutura do AMPHTML com HTML5

Estrutura do AMPHTML com HTML5

Neste post de forma resumida você vai aprender a formatar e a entender o amphtml e o html5 em um documento .html

O amphtml pode-se entender que é um complemento do html5, obviamente que por se tratar de uma tecnologia semelhante ela requer algumas ações exclusivas para que determinados elementos possam ser validados e emulados pelo navegador.

Se você ainda não entendeu o que é o amp você pode consultar o artigo que temos aqui na categoria Genesis mesmo. Afim de simplificar ainda mais a explicação podemos considerar que o amp solicita alguns requisitos como neste mesmo exemplo que já  utilizamos no artigo  ensinando a criar sua primeira pagina amp:

```<!--Fundamental--> <!doctype html>
   <!--Fundamental--> <html amp lang="en">
   <!--Fundamental--> <head>
   <!--Fundamental--> <meta charset="utf-8">
   <!--Fundamental--> <script async src="https://cdn.ampproject.org/v0.js"></script>
   <title>Olá, AMPs</title>
   <!--Fundamental--> <link rel="canonical" href="https://www.seo.emp.br/">
   <!--Fundamental--> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <!--Fundamental--> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <!--Fundamental--> <style amp-custom>
    /* css personalizado*/
    body {
    background-color: white;
    amp-img {
    background-color: gray;
    border: 1px solid black;}
</style> 
  <!--Fundamental--> </head>
  <!--Fundamental--> <body>
    <h1>Bem Vindo ao Mundo Mobile</h1>
  <!--Fundamental--> </body>
  <!--Fundamental--> </html> 
```

No exemplo acima você pode perceber que comentei as tags como <!--Fundamental-->

Mas para descomplicarmos um pouco mais isso tudo note que existem 4 partes que podemos dividir esta formatação da seguinte forma:

  • meta tags e meta links;
  • Scripts Fundamentais;
  • Estilos CSS;
  • Conteúdo.

Assim fica muito mais simples definir os elementos que vamos utilizar, uma vez que você organize na sua mente desta forma você pércebe que simplifica muito a implementação.

html5 no ampthml

Agora que você já entendeu como é uma estrutura amphtml ficou muito mais facil basta olhar para tag body e começar a implementar o seu codigo com html5 e mesclar ele com o amphtml aplicando os elementos do amphtml onde desejar.

Uma vez que você aplicou um elemento amphtml é simplesmente você personaliza-lo com css da maneira que desejar sempre dentro da tag <style amp-custom>  e conferir no  amp validator se o amphtml requer o uso de  script a ser implementado.

HTML5 Hierarquia

Se você já conhece o HTML sabe da importância de estar aplicando uma estrutura hierarquica ao seu projeto, apos as grandes atualizações do algorítimo do Google em 2019-2020 tornou-se um pre-requisito para desenvolvimentos de novos projetos, uma vez que a semântica entre os elementos e conteúdos passou a fazer muito mais sentido para fins de SEO

O HTML5 possui diversos elementos importantes que podemos usar e abusar na implementação de um projeto.

você pode conhecer mais sobre os principais elementos do HTML5 acessando este curso que esta bem completo e em português. Conteúdo HTML em PDF e gratuito Leia vale a pena 😉

Vamos falar um pouco sobre a hierarquia do HTML5 de forma simplificada

sempre que você for desenvolver uma pagina amphtml lembre-se que seu html deve ser desenvolvido dentro da tag Body do arquivo.

 

```HTML
<section>
	<header>
		<h1>Titulo</h1>
		<p>Descrição</p>
	</header>
	<main>
		<article>
			<h2>Subtitulo</h2>
			<p>Content</p>
			<!--Dentro do conteúdo você pode usar titulos hierarquicos como
				h3,h4,h5,h5 e todas as demais meta tags semânticas de acordo com as suas necessidades para enfatizar ainda mais o conteúdo-->
		</article>
		</main>
		<aside>
			<h4>Categorias</h4>
			<ul>
				<li>
					<a href="#">Categoria A</a>
				</li>
				<li>
					<a href="#">Categoria B</a>
				</li>
				<li>
					<a href="#">Categoria C</a>
				</li>
			</ul>
		</aside>
		<footer>
			<h5>Call To Action</h5>
			<p>Descricao</p>
			<a href="#">Botão</a>
		</footer>
</section>
```

Facil não é?

Lembre-se você pode estar utilizando todo o poder do html5 hierarquico e semântico para desenvolver suas estruturas, isso ajuda muito na organização do projeto e te da uma mãozinha extra no quesito SEO .

Pesquise no Site

Navegação do Post

Posts Relacionados
Anuncio

Quer Aprender a criar temas 100% validados pelo Google AMP? Matricule-se e inicie agora mesmo o treinamento mais completo que você vai encontrar na web!

QUERO ME INSCREVER