Ir para conteúdo
Faça parte da equipe! (2024) ×

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

Skope

Por ,
em Desenvolvimento Web

 Compartilhar

Posts Recomendados

Skope Novato

Skope 2

Postado
Denunciar
Postado

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

Agradece se te ajudei ;)

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
  • 2 semanas atrás...
Participativo

NoSlake 53

Postado
Denunciar
Postado

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

Thanks :)

Membro - Bronze - Geek - Bronze - Tech - Mod - Coord - Co-Admin - Platinum

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
Novato

Lilligant 0

Postado
Denunciar
Postado

<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.

~ Assinatura em construção ~

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
  • 2 semanas atrás...
rnxn Novato

rnxn 2

Postado
Denunciar
Postado
<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.

 

Tableless – Wikipédia, a enciclopédia livre

css - Why not use tables for layout in HTML? - Stack Overflow

 

Experimente validar um site feito inteiro com tabelas aqui: Validation Results - W3C Markup Validator

:slow:

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
Novato

Owner 3

Postado
Denunciar
Postado
<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.

 

<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.

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

4I1ShmNRGyg2k.webp

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
  • 1 mês depois...
  • 3 semanas atrás...
' Noob Novato

' Noob 0

Postado
Denunciar
Postado

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.

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
Dotfile Novato

Dotfile 0

Postado
Denunciar
Postado
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.

 

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.

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
Juliana~* Novato

Juliana~* 26

Postado
Denunciar
Postado

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.

"Queridos Edward e Jacob,

Adoro vocês dois, mas vou passar o fim de semana com Jace."

 

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
Dotfile Novato

Dotfile 0

Postado
Denunciar
Postado

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.

 

"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.

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
rnxn Novato

rnxn 2

Postado
Denunciar
Postado

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.

:slow:

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
Juliana~* Novato

Juliana~* 26

Postado
Denunciar
Postado

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 !!!

"Queridos Edward e Jacob,

Adoro vocês dois, mas vou passar o fim de semana com Jace."

 

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
rnxn Novato

rnxn 2

Postado
Denunciar
Postado

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 W3C Validator

 

Olha que beleza a validação da página do webcheats

Somente 175 erros e 70 alertas.

:slow:

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
Juliana~* Novato

Juliana~* 26

Postado
Denunciar
Postado

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 ?

"Queridos Edward e Jacob,

Adoro vocês dois, mas vou passar o fim de semana com Jace."

 

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
Dotfile Novato

Dotfile 0

Postado
Denunciar
Postado
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.

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
Aldo FBE Novato

Aldo FBE 0

Postado
Denunciar
Postado

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...

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
rnxn Novato

rnxn 2

Postado
Denunciar
Postado
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?

:slow:

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
Este tópico está impedido de receber novos posts.
 Compartilhar
Ir para a lista de tópicos

  • Quem Está Navegando   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.
×
×
  • Criar Novo...

Informação Importante

Nós fazemos uso de cookies no seu dispositivo para ajudar a tornar este site melhor. Você pode ajustar suas configurações de cookies , caso contrário, vamos supor que você está bem para continuar.

 Accept Cookies  Reject Cookies