Index de site é o índice que cada endereço da web tem em mecanismos de busca. Nesse registro, são catalogadas informações sobre os assuntos abordados naquele site e com quais temas ele se relaciona. Por isso, toda vez que um novo site é colocado no ar, é realizado um processo de indexação. Assim, é feita uma catalogação e ele passa a ser encontrado por meio de palavras-chaves relacionadas. É como se esse site e suas páginas pudessem ser categorizados. Por exemplo, se sua página fala de Marketing Digital, ele aparecerá na SERP de pesquisas de termos relacionados a esse assunto¹.
Estrutura Básica do HTML
O documento HTML sempre inicia com o que chamamos de estrutura básica. Esta estrutura é quase que imutável. Geralmente os editores como o Sublime Text já tem atalhos para iniciar os documentos HTMLs com essa estrutura, logo, você não precisa se preocupar em decorá-la, mas é bom que faça. Veja abaixo como ela se inicia:
É possível compreender o documento em HTML de uma maneira muito simples, através de uma divisão de blocos das tags essenciais, conforme seguinte estrutura:
Head, Title e Body
A grande maioria das tags existem em pares, indicando onde deve iniciar e terminar um tipo de marcação. A tag de início é somente o comando entre <>, já a tag de término, possui o símbolo / após >. Veja:
Tag de início: < nome do comando >
Tag de término: < / nome do comando >
Note que o nome do comando deverá sempre ser o mesmo. Assim, o que estiver entre essas duas tags, o navegador irá interpretar da maneira que você ordenou através de seu código HTML³.
Exemplos de Tags:
< i > < /i > :Ítalico
< strong > < / strong > :Negrito
< u > < /u > :Sublinhado
< mark > < /mark > : Marca texto
< sup > < /sup > :Sobrescrito
< input /> : Não possui Tag de fechamento, ela mesma se fecha. Exemplo: < input type="text" />: Cria um campo de digitação ->
< img />: Utilizado para inserir imagens. Também se auto fecha.
Os atributos são usados para personalizar tags. O que isso significa? De alguma maneira, algum dia você quer redimencionar uma imagem ou tabela ou mudar a cor da fonte. Tudo isso é possível com a ajuda de atibutos.
Exemplos de Atributos de Tags
id: < strong id="titulo"> < /strong>
O id é a identificação da atribuição que irá ser inserido em uma tag. Por exemplo, se eu quiser linkar um item do índice a um título no texto, posso fazer:
< h3 id= "palavra"> < /h3 > ou em uma lista < li id="palavra">< /li> e etc. Serve para que seja possível identificar no Javascript qual elemento você irá mexer.
Exemplo .Será utilizado no CSS. CSS é um sistema capaz de formatar o HTML, são comandos predefinidos que farão que o navegador "olhe" para o elemento e formate da forma desejada. O Style coloca comando CSS direto no elemento.
Também voltado para o CSS, é possível padronizar um formato predefinido.
Type: < input type="number" />
O type é um atributo do input para definir o caractere que será utilizado no campo de texto. Como no exemplo, o number definiu que será apenas aceito números.
src: < img src="http://site.com" ou < img src="imagem.png".
Exemplo url:
Exemplo imagem do pc:
Width: Serve para redimencionar a largura da imagem. Exemplo: < img width="150" src="imagem.jpg"
align: < h2 align="center">Título centrado.< /h2> É um atributo de alinhamento. Outros exemplos: left e right
As heading tags, pode-se entender que existe uma escala de 1 a 6 (h1 a h6), onde a h1 predomina sobre as demais por representar o título principal, afinal, todo texto tem ao menos 1 título. As demais tags são utilizadas conforme os subtítulos inseridos, como no exemplo do sumário automático do Word, sendo assim, a h1 deve ser vista como a mais importante e a h6 a menos importante.
Ao contrário do que para muitos pode parecer, é completamente dispensável a utilização de todas as heading tags em um texto. Suponhamos que seu conteúdo possua 2 capítulos com 2 subcapítulos no primeiro e 1 subcapitulo no último, além do próprio título principal em h1, veremos como ficaria seu formato no ponto de vista ideal para SEO (Search Engine Optimization "otimização de mecanismos de busca"):
Título Principal
Capítulo 1
Subcapítulo 1
Subcapítulo 2
Capítulo 2
Subcapítulo 3
Utilizar seis tipos de heading tags é algo difícil de imaginar, até porque, conforme explicado acima, a hierarquia envolve relevância.
Portanto, quanto maior o número da heading menor será sua relevância, assim prejudicando o SEO da página 4
Teste h1
Teste h2
Teste h3
Teste h4
Teste h5
Teste h6
A Tag P: < p> < /p> É utilizada em cada parágrafo.
blockquote: < blockquote> É utilizado para fazer citações no texto, como por exemplo, citar textos de outro autor, ou uma explicação especifica no texto e etc.
Lista de ingredientes, lista de pessoas, passo-a-passo enumerado de um tutorial...listas e mais listas. Listas são elementos textuais muito importantes e são de suma importância na criação de sites, para uma boa experiência do usuário e até para o SEO (otimização de sites para buscadores), As listas mais comuns são:
Listas não ordenadas (que somente apresentam aquelas bolinhas ao lado, chamadas de bullets): Representado pela tag < ul > < /ul >.
Listas ordenadas (que mostram uma sequência numérica): Representado pela tag < ol > < /ol >.
A tag < li > o li é de list item, do inglês. Usamos essas tags < li > e < /li > para cada um dos itens de uma lista 5.
Desde a origem da internet, o que torna a web o que ela é hoje é justamente a possibilidade de vincular um documento a qualquer outro documento ou recurso. Essa função é chamada de hiperlink ou link. Mas afinal de contas, o que são os links HTML?
O link HTML, nada mais é que uma função do HTML que permite inserir os hiperlinks em diversos elementos, como textos e imagens. Um link precisa sempre apontar para uma URL (endereço) existente em seu site. Caso contrário, você poderá obter uma mensagem de erro 404.
A tag link do HTML está presente desde a primeira versão, criada por Tim Berners-Lee.
< a href="index.html"> Texto< /a>: É possível linkar para outras páginas no mesmo site.
target: atributo da Tag a que te da opções de formas para abrir o link.
self: abre o link na mesma aba.
blank: abre o link em uma nova aba.
Title: atributo que coloca um texto no "balãozinho" quando for clicar no link.
Obervação: É recomendado que o usuário abra os links na mesma página, não abrir sempre uma nova aba, apenas quando necessario utilizando links externos.
