Etiquetas y sus atributos

Clase 8 de 41 • Curso de HTML y CSS 2019

Resumen

Las Etiquetas son fragmentos de texto rodeados por corchetes angulares (< y >) con funciones y usos específicos:

<html>Contenido</html>

Los Atributos afectan a los elementos por su presencia o enriquecen la definición de la misma. Por ejemplo, el atributo lang en la etiqueta html indica que el contenido de esta página esta en un idioma específico:

<html lang=""es"">Contenido en Español</html>

Las etiquetas meta (meta tags) son etiquetas que se incorporan en el encabezado de una página web y son invisibles para los usuarios normales, sin embargo, son de gran utilidad para navegadores u otros programas que pueden valerse de esta información:

<head>
        <meta name=""description"" content=""Descripción de nuestra página"">
</head>

También encontramos etiquetas comunes como <footer> para agrupar el contenido del pie de página, <span> para guardar texto genérico y sin reglas de espaciado o tamaño predeterminadas, <img src=""imagen-url.png""> para incluir imágenes, entre otras.

Jehaann Manzanares

student•

Metadatos del documento

Seccionamiento del contenido

Organizar bloques o secciones de contenido(Es importante para la accessibility y el SEO)

Walter Chocoj

student•

gracias por la información

Luis Gustavo García Aguilar

student•

gracias por el dato

Cristobal Nyram

student•

<!–…–> Define un comentario

<!DOCTYPE> Define el tipo de docuemento

<a> Define un hipervínculo <abbr> Define una abreviación

<address> Define la información de contacto del autor / propietario del documento <area> Define un área dentro de un mapa de imagen <article> Define un artículo <aside> Define el contenido lateral del contenedor de una página <audio> Define contenido de sonido <b> Define texto en negrita <base> Especifica la base donde se abrirán todas las URL del documento <bdi> Aísla una parte del texto que puede tener un formato diferente del texto externo <bdo> Sobreescribe la dirección del texto <blockquote> Define una sección que tiene otra fuente <body> Define el cuerpo del documento <br> Define un salto de línea <button> Define un botón clickeable <canvas> Se usa para dibujar gráficos en pantalla <caption> Define el título de una tabla <cite> Define el título de un trabajo <code> Define un trozo de código de programación <col> Especifica las propiedades de la columna para cada columna del elemento <colgroup> <colgroup> Especifica un grupo de una o más columnas de una tabla <command> Define un botón command al que un usuario puede invocar <datalist> Especifica en un input una lista pre-definida de opciones <dd> Define la descripción de un ítem en una lista de definición <del> Define un texto que ha sido definido en un Mdocument <details> Define detalles adicionales que el usuario puede ver o esconder <dfn> Define el término de una definición <dialog> Define una caja o ventana de dialogo <div> Define una sección en un documento <dl> Define una lista de definición <dt> Define un término (un ítem) en una lista de definición <em> Define énfasis en un texto <embed> Define el contenedor de una aplicación externa (no html) <fieldset> Grupo de elementos relacionados en un formulario <figcaption> Define el título para una figura <figure> <figure> Especifica auto-contenido <footer> Define el pie de página de un documento <form> Define un formulario html <h1> a <h6> Define encabezados o títulos <head> Define información hacerca del documento <header> Define la sección de encabezado del docuemnto <hgroup> Grupo de encabezado (<h1> a <6>) <hr> Define un cámbio de temática a partir de una línea dibujada <html> Define la raíz del documento <i> Define una parte del texto de modo alternativo <iframe> Define un frame en línea <img> Define una imagen <input> Define un control de entrada de texto <ins> Define texto que ha sido insertado en un documento <kbd> Define entrada del teclado <keygen> Define un campo generador de claves para formularios <label> Define el rótulo para un elemento <input> <legend> Define un título para los elementos <fieldset>, <figure>, <details> <li> Define un ítem de una lista <link> Define la relación entre un documento y un recurso externo (generalmente con hojas de estilo) <map> Define un mapa de imagen del cliente <mark> Define texto resaltado o marcado <menu> Define la lista de un menú <meta> Define un metadato de un documento <meter> Define una medida escalar en un rango conocido <nav> Define un link de navegación <noscript> Define un contenido alternativo para los usuarios que no soportan scripts del cliente <objet> Define un objeto embebido <ol> Define una lista ordenada <optgroup> Define un grupo de opciones relacionadas en una lista desplegable <option> Define una opción en una lista desplegable <output> Define el resultado de un cálculo <p> Define un párrafo <param> Define un parámetro para un objeto <pre> Define texto pre-formateado <progress> Representa el progreso de una tarea en una barra <q> Define una cita corta <rp> Define que debe mostrar en navegadores que no soportan scripts de ruby <rt> Define una pronunciación de caracteres <ruby> Define una notación de ruby <s> Define texto que no es correcto <samp> Define un ejemplo de salida de un programa <script> Define un script del lado cliente <section> Define una sección de un documento <select> Define un drop-down list <small> Define texto pequeño <source> Define los recursos para elementos multimedia <span> Define una pequeña sección de un documento <strong> Define un texto en negrita <style> Define un estilo para la información de un documento <sub> Define un texto que es subíndice <summary> Define un encabezado visible para el elemento <details> <sup> Define un texto que es superíndice <table> Define una tabla <tbody> Define el cuerpo de una tabla <td> Define una celda en una tabla <textarea> Define un control de entrada de múltiples líneas <tfoot> Agrupa los footer contenidos en una tabla <th> Define una celda de encabezado en una tabla <thead> Agrupa los encabezados de una tabla <time> Define fecha / hora <title> Define un título para el documento <tr> Define una fila en una tabla <track> Define texto de la pista para elementos multimedia (vídeo y audio) <ul> Define una lista desordenada <var> Define una variable <video> Define un vídeo o película <wbr> Define un posible salto de linea

https://www.brandominus.com/todas-etiquetas-html5/

Joel Dominguez Merino

student•

Muchas gracias por compartir este recurso!

juan manuel alvarado pallares

student•

gracias

Beatriz Pérez Santana

student•

Lista de etiquetas html con su significado:

https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos

Pablo Andres

student•

Buena referencia, gracias.

Laura Isabel Montoya

student•

gracias

Oditza Alison Gaete Sepúlveda

student•

META TAGS MÁS UTILIZADOS Y RELEVANTES

<meta charset="utf-8"/>

Charset: Define el tilo de codificación de caracteres a utilizar. UTF-8 permite el uso de caracteres especiales como Ñ, tildes, entre otros.

<meta name="description" content="descripcion breve"/>

Description: Permite describir brevemente de qué trata el contenido de la página, ayudando a los buscadores a indexar correctamente el sitio web.

<meta name="keywords" content="palabra clave 1, palabra clave 2"/>

Keywords: Permite definir las palabras claves segun el contenido de la página. Ayuda a los buscadores a indexar correctamente el sitio web.

meta name="author" content="Nombre del autor" />

Author: Permite definir al autor del sitio web. Es importante que en las distintas páginas que componen nuestro sitio tengan todas el mismo autor.

*Si bien existen muchos meta tags estos son los más utilizados para el posicionamiento de nuestra página web en los buscadores

Beatriz Pérez Santana

student•

Para poner la estructura básica de html en el editor de código, a parte de utilizar html:5 + Tab, también se puede usar ! + Tab

John Steven Bernal Gonzalez

student•

Buen aporte es mas sencillo!

David Barreto

student•

Excelente aporte, lo usare de ahora en adelante

Yuri Añorga

student•

Si desean más información respecto de las etiquetas y atributos, Mozilla Developer es una gran fuente a la que podemos acudir siempre, ya que tiene información actualizado y muy precisa.

MDN

Antonio Caro Guerrero

student•

https://www.w3schools.com/html/default.asp si necesitan saber mas a fondo de los usos de cada etiqueta :D

Jhonatan Celis Rincón

student•

En schema.org/ podemos ver todos los meta tags que usan los buscadores, con su descripción.

Samuel Santa

student•

Rulótico es Fan de los Gifs (Por si no lo habian notado hasta ahora)

Cristian Henao

student•

Para rellenar texto de prueba puede usar escribir " lorem# " # siendo la cantidad de palabras que necesitas, y oprimiendo tab o enter.

Franc Cosp Meya

student•

Hola buenas no me deja reproducir la imagen i en la consola me sale un error junto a la imagen mi código es bien sencillo, guarde una carpeta den el escritorio, llamada "images" i guarde una imagen con .jpeg

<html>
<head>
</head>
<body>
<h1>Mi imagen</h1>
<img src="images/linux.jpeg">
</body>

</html>

escrito así supongo que debería funcionar, muchas gracia
s.

Luis Lira

student•

Tienes que asegurarte que tu archivo html también esté en el escritorio y que la extensión de archivo es la correcta.

Eduardo Pérez

student•

Hola Frank, si el codigo lo tienes como lo muestras aquí fijate que el tag img está pegado al atributo src, debería ser:

<img src="images/linux.jpeg">

Si no lo tienes así por favor muéstranos el árbol de directorios de tu proyecto y una captura del error que te sale

Oscar Armando Del Angel Casillas

student•

porque el link de la etiqueta a no salio abajo de la imagen ?

Erik Elyager

student•

El link sale a un lado porque la etiqueta <a> es un elemento con su propiedad CSS display del tipo inline que hace se posiciones justo enseguida del último elemento declarado en el HTML.

En cambio etiquetas como <img>son del tipo block que si toman todo el ancho de la página.

Puedes leer más sobre la propiedad display aquí.

Carlos José González Juan

student•

Cuando pones un link, el elemento adquiere la propiedad de ser un link. Si es una imagen no te sale texto, es la imagen la que es linkeable. Si es texto, es el texto que el link, que lo ves porque sale azul y subrayado. Ejemplo: <a><imagen.........></imagen></a> Aquí el link es la imagen. No sale texto.

PINEROS PINEROS MARTHA CECILIA

student•

Me agrada la terminología sencilla para explicar temas complejos. Los temas han sido claros para mi que no tengo experiencia con html.

Gutierrez Diego

student•

Si, realmente tiene buena forma.de enseñar

Enrique Gutierrez

student•

me gusta mucho como explica Rulotico.

Lucas Ramirez

student•

Sin duda reforzar los conceptos nunca viene mal, se aprende algo que siempre pasamos por alto .

Diana Clabel

student•

excelente!!:)

Karen Gómez

student•

span es span y ya

Pablo Colqui

student•

En el minuto 1:10 aparece la etiqueta <meta> dentro de <header>, en realidad va dentro de la etiqueta <head>

Edna Cardenas

Team Platzi•

¡Hola! muchas gracias por reportarlo, ya quedó resuelto.

Juan David Gustin Andino

student•

Jorge Alejandro Falcon Alvarez

teacher•

Mis dudas: ¿Qué significa el alt="" en la etiqueta Imagen que utilizó el profesor?

Mis apuntes en el html.

<!DOCTYPE html> <!--Se invoca con html:5 y tab-->
<html lang="es"><!-- Inicio etiqueta HTML -->
<!--La mayoría de las etiquetas tienen como regla un inicio y un fin-->
<!--Lo atributos afectan las etiquetas donde están, por ejemplo lang="es" indica que el contenido del HTML será en español-->

    <head>
        <!--La etiqueta meta se utiliza para incorporar a tu página web información que es consumida y utilizada por programas (como google)-->
        <meta name="description" content="Sitio generado para el curso de HTML y CSS de Platzi">
        <!--El atributo charset con valor en UTF-8 se utiliza principalmente para indicar que el texto de tu página web puede tener acentos.-->
        <meta charset="UTF-8">
        <title>Sitio web del Curso HTML & CSS - Platzi</title>
    </head>
    <body>
        <div> <!--Los Div son bloques, contenedores o agrupadores de contenido dentro de nuestro sitio web-->
            <!--Los h1 al h6 se utilizan para indicar títulos en nuestros textos-->
            <h1>Hola desde el h1</h1>
            <h2>Hola desde el h2</h2>
            <h3>Hola desde el h3</h3>
            <h4>Hola desde el h4</h4>
            <h5>Hola desde el h5</h5>
            <h6>Hola desde el h6</h6>
        </div>

        <!--La etiqueta P se utiliza para contener texto en estilo de párrafo dentro de tu sitio web-->
        <p>Hola, este es un párrafo.</p>

        <span>
            <!--Contenedor de información que no tendrá ningún formato, SPAN no tiene formato nativo-->
        </span>
        
        <!--Esta etiqueta se utiliza para crear hyperlinks, vinculos a otras páginas
        href indica el link a donde viajará el usuario al dar clic en este hyper link-->
        <a href="http://www.platzi.com" target="_blank">Ir a Platzi</a>

        <!--Es un salto de línea en tu página (dar un enter)-->
        <br><br>

        <!--La etiquea img nos ayuda a colocar imágenes dentro de nuestra página-->
        <img src="images/imagen.jpg" alt="">

        <footer>
            <!--El footer es una sección para la parte final de nuestra página.-->
        </footer>
    </body>
</html> <!-- Fin etiqueta HTML -->

Miguel García

student•

alt se refiere a alternative / alternativa. Esto quiere decir que si no sale una foto o un vídeo, salga el mensaje descriptivo

Jorge Alejandro Falcon Alvarez

teacher•

Gracias por la aclaración.

Etiquetas y sus atributos

Internet

¿Dónde aprender HTML y CSS modernos?

Pasos para aprender HTML y CSS

¿Qué conocimientos necesito para tomar este curso?

¿Cómo se construye la tecnología web?

¿Cómo instalar ATOM?

Comprendamos Internet

Los básicos del web

¿Cómo funciona HTML?

Etiquetas y sus atributos

Reto 1: crea tu fiesta de gifs

¿Cómo funciona CSS?

¿Cómo funciona JavaScript?

Hola mundo y estructura del proyecto

Listado de las etiquetas más usadas

Construcción de un producto digital

Paper wireframe

¿Cómo instalar XD?

Diseño de interfaces

Maquetación de la NavBar

Maquetación de main_section y agregando estilos CSS

Maquetación de tarjetas de producto

Fuentes personalizadas y variables de CSS

Categorizando etiquetas según nuestra estructura en HTML

Reto 2: Maquetar el home del producto digital

Reglas responsive

Animaciones y transiciones

Integrando otras herramientas

Atributos especiales de las etiquetas para mejorar el funcionamiento de nuestros formularios

Librería vs Framework

Sistema de Grillas

Completando el Sistema de Grillas

Reto 3: implementación del sistema de grillas

Maquetación del formulario

Creación de formulario: inputs

Creación de formulario: botones

¿Cómo crear tu cuenta en Paypal?

Configuración del botón de pago con Paypal

Autofill del formulario de PayPal

Maquetación de pantalla de éxito y error

Deploy

Testing con el Navegador

Cómo crear tu cuenta en Github

Subiendo nuestro proyecto a Internet con Github

Conclusión

Conclusiones

Bonus

Librería vs Framework