Tags Básicas do HTML e suas Funções

**Skope** · 1 de Setembro 2014

Bom Galera, hoje estava sem fazer nada, então decidi fazer um tópico sobre a maior parte das tags de HTML e quais as suas funções.

Penso que seja bastante bom para quem esteja a começar na área e espero ajudar todos os membros.

Começando:

Tags:

<!doctype html> - Versão mais recente do HTML

<html> - Esta Tag Indicanos a abertura da linguagem de Programação HTML.

<head> - Head ou o cabeçalho é onde fica todas as informações não vísiveis dentro do site, como javascript, css, title entre outras ligações para outras linguagens de programação.

<body> - Nesta tag é onde fica o corpo vísivel do site, como divs, tabelas, menus etc... Tudo o que o visitante do site irá ver.

<style> - Esta tag serve para colocar css interno dentro da página.

<link> - Esta tag serve para linkar um outro arquivo como por exemplo uma folha de estilo css á página.

<div>- Esta tag serve para criar divs, as divs servem para maior parte das coisas do HTML, como para criar menus, boxes entre muitas outras coisas.

<b> - Esta tag serve para colocar o texto em negrito.

<i>- Esta tag serve para colocar o texto em itálico.

<u> - Esta tag serve para fazer underline.

<a> - Esta tag serve para fazer várias coisas como por exemplo fazer um link ou menús com href.

<h> - Esta tag serve para aumentar o tamanho da letra.

<script> - Para uso de Scripts como por exemplo Javascript, JQuery, Ajax...

<center> - Esta tag serve para centrar o conteúdo.

<br> - Esta tag serve para dar espaços entre conteúdo.

<button> - Esta tag serve para fazer botões.

<form> - Esta tag serve para abrir um formulário

<input> - Esta tag está relacionada com formulários, portanto dá para criar botões de formulário ou campos de texto.

<tr> - Esta tag serve para criar uma tabela.

<img> - Esta tag serve para executar imagens.

<p> - Tag que define um parágrafo

<del> - Tag que deixa um efeito riscado em uma palavra

<table> - Tag que define uma tabéla

<tr> - Tag que define uma linha em uma tabela

<td> - Tag que define uma célula em uma tabela

<th> - Tag que define uma "célula de cabeçalho" em uma tabela

<ol> - Tag usada para se fazer listas ordenadas

<li> - Tag usada para definir um item de uma lista

Espero ter ajudado todos os iniciantes na linguagem de marcação HTML.

Por favor se me esqueci de algumas tags me avisem, para eu editar o tópico e postá-las.

Créditos:

Skope

**rnxn** · 1 de Setembro 2014

<!doctype html> é a versão mais recente.

html não é linguagem de programação e sim de marcação.

Recomendo que leia a respeito das tags <meta> e <head>.

**Skope** · 3 de Setembro 2014

Obrigado por informar, brevemente estarei corrigindo o tópico,

Skope

**guilheerme95** · 11 de Setembro 2014

Muito Abrigado cara.

Mas acredito eu que poderia exemplos no formato que eles geralmente são usados EX:

**NoSlake** · 11 de Setembro 2014

Acho que poderia fazer uma mega lista trazendo também modos de usar as tags. Mas muito bem, está legal !

Thanks :)

**rnxn** · 11 de Setembro 2014

Muito Abrigado cara.

Mas acredito eu que poderia exemplos no formato que eles geralmente são usados EX:

<script type="" src=""></script>

Não é preciso mais usar o atributo "type" em tags <script> e <style> (html5).

Lilligant · 11 de Setembro 2014

<p> - Tag que define um parágrafo

<del> - Tag que deixa um efeito riscado em uma palavra

<table> - Tag que define uma tabéla

<tr> - Tag que define uma linha em uma tabela

<td> - Tag que define uma célula em uma tabela

<th> - Tag que define uma "célula de cabeçalho" em uma tabela

Exemplo de tabela

É necessário se cadastrar para acessar o conteúdo.

<ol> - Tag usada para se fazer listas ordenadas

<li> - Tag usada para definir um item de uma lista

Exemplo de lista ordenada

É necessário se cadastrar para acessar o conteúdo.

**rnxn** · 12 de Setembro 2014

É necessário se cadastrar para acessar o conteúdo.

:o

**Klausx22** · 24 de Setembro 2014

<table> <tr> <td> tambem nao sao funçoes basicas? afinal... é com table que fazemos os sites iniciantes

**rnxn** · 24 de Setembro 2014

<table> <tr> <td> tambem nao sao funçoes basicas? afinal... é com table que fazemos os sites iniciantes

Tem razão, faltaram essas e outras que são usadas juntamente para exibir informações tabulares: <th>, <thead>, <tbody>, <tfoot>.

Mas não é uma boa utilizar tabelas para estruturar o layout de uma página, seja você iniciante ou não.

É necessário se cadastrar para acessar o conteúdo.

Experimente validar um site feito inteiro com tabelas aqui:

É necessário se cadastrar para acessar o conteúdo.

**Owner** · 24 de Setembro 2014

<table> <tr> <td> tambem nao sao funçoes basicas? afinal... é com table que fazemos os sites iniciantes

A lili ressaltou isso no post dela:

<p> - Tag que define um parágrafo
<del> - Tag que deixa um efeito riscado em uma palavra

<table> - Tag que define uma tabéla

<tr> - Tag que define uma linha em uma tabela

<td> - Tag que define uma célula em uma tabela

<th> - Tag que define uma "célula de cabeçalho" em uma tabela

Exemplo de tabela

É necessário se cadastrar para acessar o conteúdo.

Entre

ou

Cadastre-se

<ol> - Tag usada para se fazer listas ordenadas

<li> - Tag usada para definir um item de uma lista

Exemplo de lista ordenada

É necessário se cadastrar para acessar o conteúdo.

Entre

ou

Cadastre-se

O autor do tópico poderia incluir para ficar mais completo.

Pr0gr4m3r · 27 de Setembro 2014

kk Obrigado mano, já salvei aqui caso eu esqueça algum dia

**Skope** · 23 de Novembro 2014

Vou atualizar o tópico com as tags que me esqueci, se me lembrar de mais alguma eu coloco, obrigado a todos.

Skope

**' Noob** · 8 de Dezembro 2014

Desculpe estar ressuscitando o tópico, mas é um tópico que pode ajudar muita gente, e como a plataforma mais utilizada agora é HTML5, eu queria que o tópico fosse atualizado.

Creio que em HTML5, o negrito com <b> e etc não funciona mais.

Seria mais ou menos assim:

É necessário se cadastrar para acessar o conteúdo.

Enfim, vale a pena usar esse tópico em, atualiza ai.

**Dotfile** · 8 de Dezembro 2014

Desculpe estar ressuscitando o tópico, mas é um tópico que pode ajudar muita gente, e como a plataforma mais utilizada agora é HTML5, eu queria que o tópico fosse atualizado.

Creio que em HTML5, o negrito com <b> e etc não funciona mais.

Seria mais ou menos assim:

É necessário se cadastrar para acessar o conteúdo.

Entre

ou

Cadastre-se

Enfim, vale a pena usar esse tópico em, atualiza ai.

Na verdade ainda funciona mas a diferença entre <B> e <STRONG>, <I> e <EM> é seu valor semântico e não simplesmente negrito e itálico.

O STRONG é utilizado para destacar um trecho de importância dentro de seu conteúdo, e o EM é para dar ênfase em um determinado trecho de seu conteúdo e não simplesmente dar um efeito de negrito ou itálico.

Juliana~* · 8 de Dezembro 2014

Muito bom, mas para min ainda falta algo muito importante ... ID, CLASS em DIV e SPAN.

É necessário se cadastrar para acessar o conteúdo.

**Dotfile** · 8 de Dezembro 2014

Muito bom, mas para min ainda falta algo muito importante ... ID, CLASS em DIV e SPAN.

É necessário se cadastrar para acessar o conteúdo.

Entre

ou

Cadastre-se

"Separador de elementos" ?

ID - Identificador único que não pode se repetir, ou seja, somente pode ser aplicado a um elemento.

CLASS - Você pode aplicar a mesma classe para mais de um elemento, e mais de uma classe para um mesmo elemento.

A questão de estilização é indiferente pros dois, a questão é a aplicação onde um pode se repetir e o outro não.

**rnxn** · 9 de Dezembro 2014

As tags <b> e <i> não morreram no HTML5, elas funcionam e continuam com o mesmo propósito. Eu particularmente acho que o uso delas é bem especifico, como trata-se de algo visual apenas (que não tem relevância para página) poderia ser feito com CSS.

Tome cuidado onde vocês usam <strong>!!! Esta tag não é para deixar o conteúdo em negrito (embora deixe) mas sim uma tag para destacar textos importantes na página. Isto tem muita importância no SEO, os mecanismos de busca leem essa tag.

Se você tem um artigo sobre HTML5, use strong nessa palavra. Se você tem uma empresa, coloque a tag strong em volta do nome, etc.

<em> se não me engano é para frases.

Juliana~* · 9 de Dezembro 2014

para min sim, quando crio uma pagina, crio por "elementos", cada elemento tem uma função, cada função uma tarefa e/ou um problema a ser resolvido, bom cada um tem seu jeito...

E sim, um ID pode se repetir, não em um estilo css mas em um documento html sim.

POR EXEMPLO, um site contem duas sidebars, esquerda e direita, ambas igual no estilo diferentes em formatção, não seria preciso criar duas ID com os mesmo códigos css, então simplesmente coloco o mesmo nome, e a formatação fica por contas dos SPAN.

Um elemento HTML é um componente individual de um documento HTML. Documentos HTML são compotos de uma árvore de elementos HTML e outros nós, tais como nós de textos. Cada elemento pode ter determinados atributos. Os elementos podem ter ainda conteúdo, incluindo outros elementos e textos. Elementos HTML representam semântica ou significado. Por exemplo, o elemento title representa o título de um documento.

Wikipedia

Tenho vários elementos em uma pagina: Login,Menu,Cabeçalho,Sidebar,Rodapé. Juntando todos elementos temos uma pagina.

(<div> </div>) não é um elemento ? o que contem numa div não são elementos ? uma div não separa elementos ? DIV LOGIN e MENU são mesmas coisas ? ou elementos diferentes ?

Um elemento pode ser tantas coisas, por exemplo, a diretora da minha escola chamava os alunos de "elementos".

- Elementos, vamos pra sala !!!

**rnxn** · 9 de Dezembro 2014

Juliana, um ID é único.

Você pode criar uma página inteira com <span>, não tem quem crie um site inteiro com tabelas?

Mas aí entra a questão de semântica, usar <footer> ou <span class='footer'> ?

Experimenta pegar um site qualquer e colocá-lo no

É necessário se cadastrar para acessar o conteúdo.

Somente 175 erros e 70 alertas.

Juliana~* · 9 de Dezembro 2014

Caro rnxn,

Eu sei que um ID é único, o que eu quis dizer e que podemos sim DUPLICAR uma ID em HTML e não em CSS. Para ser mais específica, se você utilizar uma função que chame ou mexa em uma ID é obrigatório o uso dela somente uma vez, ao contario, utiliza-a quantas vezes quiser.

Sim eu mesma já fiz vários sites no começo do curso utilizando tabelas, pena que é errado.

Mas enfim, eu comentei aquilo não para ensinar ninguem, mas sim para o autor adicionar ao tópico com suas palavras.

E o que a ver o validador com o tópico ?

**Dotfile** · 9 de Dezembro 2014

Caro rnxn,

Eu sei que um ID é único, o que eu quis dizer e que podemos sim DUPLICAR uma ID em HTML e não em CSS. Para ser mais específica, se você utilizar uma função que chame ou mexa em uma ID é obrigatório o uso dela somente uma vez, ao contario, utiliza-a quantas vezes quiser.

Sim eu mesma já fiz vários sites no começo do curso utilizando tabelas, pena que é errado.

Mas enfim, eu comentei aquilo não para ensinar ninguem, mas sim para o autor adicionar ao tópico com suas palavras.

E o que a ver o validador com o tópico ?

Com o validador ele quis dizer que ao criar um site todo somente fazendo o uso de SPAN ele se torna um código inválido e não semântico.

**Exyle** · 12 de Dezembro 2014

Muito bom, até salvei o post nos favoritos caso eu me esqueça de algo. Merece Fixo! Obrigado.

Aldo FBE · 14 de Dezembro 2014

Cara, muito old ^^ existem várias outras que agora com o HTML 5 tem que ser consideradas básicas que estão faltando, e umas que não são mais usadas, para um web developer no caso, que é a profissão que meche diretamente com o html, muitas destas tags são digamos que, inuteis, ou melhor, ruins que se usada podemos reprovar no conceito da W3C.

mas boa a intenção.

sei que sou novo no fórum para falar o que disse, mas eu sou deste ramo, sou web developer, sou front e back end ^^ trabalho diretamente com C#, css, html, javascript, etc...

**rnxn** · 14 de Dezembro 2014

Cara, muito old ^^ existem várias outras que agora com o HTML 5 tem que ser consideradas básicas que estão faltando, e umas que não são mais usadas, para um web developer no caso, que é a profissão que meche diretamente com o html, muitas destas tags são digamos que, inuteis, ou melhor, ruins que se usada podemos reprovar no conceito da W3C.

mas boa a intenção.

sei que sou novo no fórum para falar o que disse, mas eu sou deste ramo, sou web developer, sou front e back end ^^ trabalho diretamente com C#, css, html, javascript, etc...

Qual ali não é usada mais?

Entrar

Quem está por aqui 0 membros estão online

Tags Básicas do HTML e suas Funções

Posts Recomendados

Skope 2

Link para o comentário

Compartilhar em outros sites

rnxn 2

Link para o comentário

Compartilhar em outros sites

Skope 2

Link para o comentário

Compartilhar em outros sites

guilheerme95 0

Link para o comentário

Compartilhar em outros sites

NoSlake 56

Link para o comentário

Compartilhar em outros sites

rnxn 2

Link para o comentário

Compartilhar em outros sites

Lilligant 0

Link para o comentário

Compartilhar em outros sites

rnxn 2

Link para o comentário

Compartilhar em outros sites

Klausx22 0

Link para o comentário

Compartilhar em outros sites

rnxn 2

Link para o comentário

Compartilhar em outros sites

Owner 7

Link para o comentário

Compartilhar em outros sites

Pr0gr4m3r 2

Link para o comentário

Compartilhar em outros sites

Skope 2

Link para o comentário

Compartilhar em outros sites

' Noob 0

Link para o comentário

Compartilhar em outros sites

Dotfile 0

Link para o comentário

Compartilhar em outros sites

Juliana~* 26

Link para o comentário

Compartilhar em outros sites

Dotfile 0

Link para o comentário

Compartilhar em outros sites

rnxn 2

Link para o comentário

Compartilhar em outros sites

Juliana~* 26

Link para o comentário

Compartilhar em outros sites

rnxn 2

Link para o comentário

Compartilhar em outros sites

Juliana~* 26

Link para o comentário

Compartilhar em outros sites

Dotfile 0

Link para o comentário

Compartilhar em outros sites

Exyle 0

Link para o comentário

Compartilhar em outros sites

Aldo FBE 0

Link para o comentário

Compartilhar em outros sites

rnxn 2

Link para o comentário

Compartilhar em outros sites

Informação Importante