Solicitamos su permiso para obtener datos estadísticos de su navegación en esta web, en cumplimiento del Real Decreto-ley 13/2012. Si continúa navegando consideramos que acepta el uso de cookies.

Aceptar Más información
WINTXCODERS Terminal
[[email protected] ~]:$ Bienvenido a la comunidad
Recuerda que puedes participar en nuestra comunidad registrándote

Autor Tema: [APORTE] Etiquetas HTML5 + Su función  (Leído 519 veces)

0 Usuarios y 1 Visitante están viendo este tema.

WHAMA

  • Avanzado
  • Desconectado
  • *
  • 120
    250
    2
  • Texto personal
    Revolution of mind
    • Ver Perfil
[APORTE] Etiquetas HTML5 + Su función
« en: Julio 21, 2015, 10:31:22 pm »
La mayoría de vosotros sabréis de sobra html5 pero aquí os dejo un aporte que hace poco estuve buscando yo. Es sencillo y si te interesa aprender html5 puedes aprovecharlo bien, si el significado de cada una no te queda claro puedes probarlo tú mismo.

ELEMENTO RAÍZ

Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<html> Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento.

METADATOS DEL DOCUMENTO

Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<head> Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<title> Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<base> Define la URL base para las URLs relativas en la página.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<link> Usada para enlazar JavaScript y CSS externos con el documento HTML actual.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<meta> Define los metadatos que no pueden ser definidos usando otro elemento HTML.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<style> Etiqueta de estilo usada para escribir CSS en línea.

SCRIPTING

Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<script> Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<noscript> Define una contenido alternativo a mostrar cuando el navegador no soporta scripting.

SECCIONES

Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<body> Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un documento.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<section> Define una sección en un documento.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<nav> Define una sección que solamente contiene enlaces de navegación
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<article> Define contenido autónomo que podría existir independientemente del resto del contenido.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<aside> Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Los elementos de cabecera  implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor impotancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<header> Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<footer> Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar información de retroalimentación.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<address> Define una sección que contiene información de contacto.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<main> Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento.

AGRUPACIÓN DE CONTENIDO

Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<p> Define una parte que debe mostrarse como un párrafo.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<hr> Representa un quiebre temático entre parrafos de una sección o articulo o cualquier contenido.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<pre> Indica que su contenido esta preformateado y que este formato debe ser preservado.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<blockquote> Representa una contenido citado desde otra fuente.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<ol> Define una lista ordenada de artículos.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<ul> Define una lista de artículos sin orden.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<li> Define un artículo de una lista ennumerada.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<dl> Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<dt> Representa un término definido por el siguiente <dd>.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<dd> Representa la definición de los terminos listados antes que él.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<figure> Representa una figura ilustrada como parte  del documento.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<figcaption> Representa la leyenda de una figura.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<div> Representa un contenedor genérico sin ningún significado especial.

SEMÁNTICA A NIVEL DE TEXTO

Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<a> Representa un  hiperenlace , enlazando a otro recurso.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<em> Representa un texto  enfatizado , como un acento de intensidad.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<strong> Representa un texto especialmente  importante .
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<small> Representa un  comentario aparte , es decir, textos como un descargo de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<s> Representa contenido que ya  no es exacto o relevante .
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<cite> Representa el  título de una obra .
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<q> Representa una  cita textual  inline.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<dfn> Representa un término cuya  definición  está contenida en su contenido ancestro más próximo.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<abbr> Representa una  abreviación  o un  acrónimo ; la expansión de la abreviatura puede ser representada por el atributo title.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<data> Asocia un equivalente legible por máquina a sus contenidos. (Este elemento está sólamente en la versión de la  WHATWG del estandar HTML, y no en la versión de la W3C de HTML5).
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<time> Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<code> Representa un código de  ordenador .
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<var> Representa a una variable, es decir, una expresión matemática o contexto de programación, un identificador que represente a una constante, un símbolo que identifica una cantidad física, un parámetro de una función o un marcador de posición en prosa .
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<samp> Representa la salida de un programa o un ordenador.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<kbd> Representa la entrada de usuario o usuaria, por lo general desde un teclado, pero no necesariamente, este puede representar otras formas de entrada de usuario o usuaria, como comandos de voz transcritos.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<sub>, <sup> Representan un subíndice y un superíndice, respectivamente.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<i> Representa un texto en una voz o estado de ánimo alterno, o por lo menos de diferente calidad, como una designación taxonómica, un término técnico, una frase idiomática, un pensamiento o el nombre de un barco.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<b> Representa un texto hacia el cual se llama la atención para  propósitos utilitaros.  No confiere ninguna importancia adicional y no implica una voz alterna.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<u> Representa una anotación no textual sin-articular, como etiquetar un texto como mal escrito o etiquetar un nombre propio en texto en Chino.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<mark> Representa texto resaltado con propósitos de referencia, es decir por su relevancia en otro contexto.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<ruby> Representa contenidos a ser marcados con anotaciones ruby,  recorridos cortos de texto presentados junto al texto. Estos son utilizados con regularidad en conjunto a lenguajes de Asia del Este, donde las anotaciones actúan como una guía para la pronunciación, como el furigana Japonés.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<rt> Representa el  texto de una anotación ruby .
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<rp> Representa los paréntesis alrededor de una anotación ruby, usada para mostrar la anotación de manera alterna por los navegadores que no soporten despliegue estandar para las anotaciones.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<bdi> Representa un texto que debe ser aislado de sus alrededores para el formateado bidireccional del texto.  Permite incrustar un fragmento de texto con una direccionalidad diferente o desconocida.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<bdo> Representa la direccionalidad de sus descendientes con el fin de anular de forma explícita al algoritmo bidireccional Unicode.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<span> Representa texto sin un significado específico.  Este debe ser usado cuando ningún otro elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales como class, lang, o dir.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<br> Representa un salto de línea.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<wbr> Representa una oportunidad de salto de línea, es decir, un punto sugerido de envoltura donde el texto de múltiples líneas puede ser dividido para mejorar su legibilidad.

EDICIONES

Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<ins> Define una adición en el documento.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<del> Define una remoción del documento.

CONTENIDO INCRUSTADO

Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<img> Representa una imagen.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<iframe> Representa un contexto anidado de navegación, es decir, un documento HTML embebido.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<embed> Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<object> Representa un recurso externo, que será tratado como una imagen, un sub-documento HTML o un recurso externo a ser procesado por un  plugin.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<param> Define parámetros para el uso por los plugins invocados por los elementos <object>.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<video> Representa un  video , y sus archivos de audio y capciones asociadas, con la interfaz necesaria para reproducirlos.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<audio> Representa un sonido o stream de audio.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<source> Permite a autores o autoras especificar recursos multimedia alternativos para los elementos multimedia como  <video> o <audio>.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<track> Permite a autores o autoras especificar una pista de texto temporizado para elementos multimedia como <video> o   <audio>.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<canvas> Representa un  área de mapa de bits  en el que se pueden utilizar scripts para renderizar gráficos como gráficas, gráficas de juegos o cualquier imagen visual al vuelo.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<map> En conjunto con <area>, define un mapa de imagen.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<area> En conjunto con  <map>, define un mapa de imagen.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<svg> Define una imagen vectorial embebida.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<math> Define una fórmula matemática.

DATOS TABULARES

Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<table> Representa datos con más de una dimensión.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<caption> Representa el título de una tabla.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<colgroup> Representa un conjunto de una o más columnas de una tabla.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<col> Representa una columna de una tabla.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<tbody> Representa el bloque de filas que describen los  datos contretos  de una tabla.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<thead> Representa el bloque de filas que describen las etiquetas de columna de una tabla.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<tfoot> Representa los bloques de filas que describen los  resúmenes de columna  de una tabla.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<tr> Representa una fila de celdas en una tabla.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<td> Representa una celda de datos en una tabla.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<th> Representa una celda encabezado en una tabla.

FORMULARIOS

Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<form> Representa un formulario, consistendo de controles que puede ser enviado a un servidor para procesamiento.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<fieldset> Representa un conjunto de controles.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<legend> Representa el título de un <fieldset>.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<label> Representa el título de un control de formulario.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<input> Representa un campo de datos escrito que permite al usuario o usuaria editar los datos.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<button> Representa un  botón .
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<select> Representa un control que permite la selección entre un conjunto de opciones.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<datalist> Representa un conjunto de opciones predefinidas para otros controles.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<optgroup> Representa un conjunto de opciones, agrupadas lógicamente.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<option> Representa una opción en un elemento <select>, o una sugerencia de un elemento <datalist>.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<textarea> Representa un control de edición de texto multi-línea.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<keygen> Representa un control de par generador de llaves.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<output> Representa el resultado de un cálculo.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<progress> Representa el progreso de finalización de una tarea.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<meter> Representa la medida escalar (o el valor fraccionario) dentro de un rango conocido.

ELEMENTOS INTERACTIVOS

Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<details> Representa un widget desde el que un usuario o usuaria puede obtener información o controles adicionales.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<summary> Representa un resumen, título o leyenda para un elemento  <details> dado.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<command> Representa un comando que un usuario o usuaria puede invocar.
Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<menu> Representa una lista de comandos .

ESTRUCTURA BÁSICA HTML

Código:
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

Es posible que haya algún error o me falte alguna etiqueta si se me ha olvidado o pasado algo decírmelo por aquí y lo arreglaré.
Aaron Swartz
Esa persona que utilizó su talento como programador y tecnólogo no para enriquecerse, sino para hacer de Internet un lugar más justo y mejor.

DoneteRVL

  • Visitante
  • Desconectado
  • *
  • 7
    18
    0
    • Ver Perfil
Re:Etiquetas HTML5 + Su función
« Respuesta #1 en: Julio 21, 2015, 11:23:38 pm »
Esta muy bueno, esto puede servir a gente que aun no puede saber las etiquetas que hay  ;)

WIитX

  • Administrador
  • Conectado
  • *
  • 1370
    7478
    72
  • Texto personal
    I'm not a hacker I'm security professional.
    • Ver Perfil
    • WINTXCODERS.COM
Re:Etiquetas HTML5 + Su función
« Respuesta #2 en: Julio 21, 2015, 11:56:18 pm »
Gracias Reseat lo fijo
Entrar a la web
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]
"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
Dudas / Sugerencias: [email protected]

Wintx Hack

  • Visitante
  • Desconectado
  • *
  • 34
    92
    0
    • Ver Perfil
Re:Etiquetas HTML5 + Su función
« Respuesta #3 en: Noviembre 05, 2015, 05:05:47 pm »
Muy muy bueno el post la verdad ... Habia etiquetas que conocia pero su significado o su uso como se pueda decir no lo sabia al 100%. RT

Clark

  • Visitante
  • Desconectado
  • *
  • 1
    2
    1
    • Ver Perfil
Re:Etiquetas HTML5 + Su función
« Respuesta #4 en: Abril 02, 2017, 02:07:37 pm »
Sirve de gran ayuda, MUCHAS GRACIAS! :)

Foggy25

  • Visitante
  • Desconectado
  • *
  • 5
    14
    0
  • Texto personal
    [email protected]
    • Ver Perfil
Re:Etiquetas HTML5 + Su función
« Respuesta #5 en: Febrero 28, 2018, 08:10:25 pm »
Muy bueno el aporte para todos los que quieran comenzar a aprender HTML5. :) En la pagina de Developer Mozilla tienen un apartado de HTML5 para los que quieran profundizar mas y deseen ver algunas referencias de las etiquetas ;)
Para poder ver los links necesitas estar [• Registrado •]
[• Iniciar Sesión •]

 

Powered by Advanced Topic Prefix Pro