Estructura básica
Partes de una etiqueta
Etiqueta
Atributos en HTML
Los atributos HTML proporcionan información adicional a los elementos HTML sobre cómo se debe procesar o mostrar el contenido.
HTML align Attribute
Syntax
Valores
| Left | izquierda |
| Center | |
| Right | |
| Justify |
Atributos universales clásicos
Los atributos universales clásicos están contemplados en la mayoría de las etiquetas HTML. Estos son los más conocidos:
| Atributo HTML | Descripción | Ejemplo |
| id | Sirve para identificar de forma individual a cada elemento HTML. | id=»ejemplo» |
| class | Permite asignar un elemento a una o varias clases. | class=»coches» |
| style | Define el estilo de un elemento HTML y puede determinar, por ejemplo, su color, fuente o tamaño. | style=»color: blue; font-size: 2em» |
| title | Contiene información adicional sobre el contenido de un elemento; se muestra, por ejemplo, en una ventana separada cuando se pasa el ratón por encima del elemento en cuestión. | title=»texto de ejemplo» |
| lang | Establece el idioma base de un documento. | <html lang=»es»> |
| dir | Define el sentido de lectura de un texto, bien sea de izquierda a derecha o viceversa. | <html dir=»ltr»>ejemplo</html> |
Atributos HTML específicos
Existen numerosos atributos HTML específicos para definir elementos concretos. Estos son los más utilizados:
| Atributo HTML | Descripción | Ejemplo |
| alt | Muestra un texto alternativo si no se puede cargar o mostrar una imagen. | <img src=»https://www.ionos.es/digitalguide/cocherojo.jpg» alt=»Coche deportivo rojo en un semáforo.»> |
| height | Establece la altura de un elemento en px. | <img alt=»el coche rojo» height=»220″> |
| width | Establece el ancho de un elemento en px. | <img alt=»el coche rojo» width=»220″> |
| href | Define la URL de un enlace. | <a href=»https://www.paginaejemplo.es» title=»Más información»> |
| hreflang | Establece el idioma del documento vinculado. | <a href=»https://www.paginaejemplo.es» lang=»es» hreflang=»en»>Información en inglés</a> |
| target | Define dónde se debe abrir un enlace. | <a href=»https://www.paginaejemplo.es» target=»_blank»> |
| rel | Define la relación entre el documento target y su vínculo. | <a rel=»nofollow» href=»https://www.paginaejemplo.es/»>pagina de ejemplo</a> |
| src | Define el origen de un elemento. | <img src=»https://www.ionos.es/digitalguide/cocherojo.jpg» alt=»el coche rojo»> |
| autoplay | Garantiza que un determinado contenido multimedia se reproduzca automáticamente; sin embargo, la mayoría de los navegadores pueden anular esta configuración. | <reproducción automática de vídeo> |
| poster | Define una imagen que previsualizar cuando se inserta un vídeo en HTML. | <video controls poster=»previsualización.png»> |
Anclaje
etiqueta de anclaje (<a>) junto con el atributo id para el título y el atributo href para crear un enlace que lleve al título cuando sea clickeado.Ejemplo
<h4 id="RadicalTransformation">Ranking Cambio / Radical Transformation / Brecha </h4>
Usos prácticos:
Puedes crear un índice en la parte superior de la página con enlaces que apunten a este título.
También puedes aplicar estilos únicos a este encabezado usando CSS, basándote en su id.Nuevos atributos desde HTML5
Desde la introducción de HTML5 y HTML 5.1 hay algunos atributos HTML de nueva incorporación. Entre ellos se encuentran los siguientes:
| Atributo HTML | Descripción | Ejemplo |
| contenteditable | Define si el contenido de un elemento puede ser editado; sus posibles valores son true y false. | <p contenteditable=»false»> |
| hidden | Atributo universal que puede ocultar un elemento. | <p hidden>Este texto quedará oculto</p> |
| dropzone | Define si en el proceso de arrastrar y soltar el elemento este se copia (copy), se enlaza (link) o se mueve (move). | <p dropzone=»move»> |
| draggable | Atributo universal que define si el contenido de un elemento puede ser arrastrado y soltado; sus posibles valores son true, false y auto. | <p draggable=»false»> |
| loading | Establece cómo se cargan los medios externos; los valores permitidos son auto, eager y lazy. | <img src=»https://www.ionos.es/digitalguide/cocherojo.jpg» alt=»el coche rojo» loading=»lazy» |
| spellcheck | Determina si se debe activar un corrector ortográfico; los valores permitidos son true y false. | <p contenteditable=»true» spellcheck=»false»> |
Atributos de evento
Hay muchos atributos HTML diferentes, que activan eventos en un navegador. Los siguientes atributos HTML son, por lo tanto, solo una pequeña selección de diferentes eventos que pueden ser activados a través del JavaScript incluido en HTML.
| Atributo HTML | Descripción | Ejemplo |
| onclick | Activa un evento en JavaScript con un clic de ratón. | <button onclick=»Ejemplo de función ( ) «>Haz clic aquí</button> |
| onscroll | Se activa al mover la rueda del ratón sobre él. | <div onscroll=»Ejemplo de función ( ) «> |
| onkeydown | Se activa cuando se pulsa una tecla. | <input type=»text» onkeydown=»Ejemplo de función ( ) «> |
| onsearch | Activa un JavaScript en cuanto se introduce una búsqueda en la ventana de búsqueda. | <input type=»búsqueda» onsearch=»Ejemplo de función ( ) «> |
| onerror | Puede ejecutar un JavaScript en caso de error. | <img src=»https://www.ionos.es/digitalguide/cocherojo.jpg» onerror=»Ejemplo de función ( ) «> |
| oncopy | Se activa cuando se copia un texto. | <input type=»text» oncopy=»Ejemplo de función ( ) » value=»Copia este texto»> |
| onselect | Activa un JavaScript en cuanto se selecciona un elemento del input. | <input type=»text» onselect=»Ejemplo de función ( ) » value=»Texto de ejemplo»> |
Atributos de datos
Además de los atributos HTML mencionados anteriormente, existen otra serie de atributos que solo pueden evaluarse a través de un script o utilizarse con CSS. De esta manera se puede proporcionar información que no se va a mostrar de forma visual. Estos atributos HTML siempre comienzan con data-. Puedes definirlos con setAttribute y leerlos con getAttribute. Los motores de búsqueda tampoco analizan estos atributos HTML. Para los atributos de datos solo se permiten letras minúsculas, números, guiones, puntos y dobles puntos.
Valor
Contenido de la etiqueta
Cierre de la etiqueta
Etiquetas semánticas de maquetación
HTML «block-level» elements
List of all HTML «block-level» elements.
Here are the block-level elements in HTML (Lista de elementos HTML)
| <p> | Paragraphs / parrafos |
| <hr> – Horizontal rule | |
| <address> – Address information | |
| <article> – Article content | |
| <aside> – Sidebar content | |
| <blockquote> – Block quotations | |
| <canvas> – Drawing area | |
| <dd> – Description in a description list | |
| <div> – Generic container | |
| <dl> – Description list | |
| <dt> – Term in a description list | |
| <fieldset> – Group of related form elements | |
| <figcaption> – Caption for a figure | |
| <figure> – Image or media with a caption | |
| <footer> – Footer of a section or page | |
| <header> – Header of a section or page | |
| <main> – Main content of a document | |
| <nav> – Navigation links | |
| <noscript> | Alternate content when JavaScript is not enabled |
| <ol> – Ordered list | |
| <ul> – Unordered list | |
| <pre> – Preformatted text | |
| <section> – Standalone section in a document | |
| <table> – Table | |
| <video> – Video content |
| Etiqueta | Descripción |
|---|---|
| <!–…–> | Define un comentario. Cualquier información que se ponga dentro de las etiquetas <!– y –> dentro del cuerpo de la página, será ignorados por el navegador. |
| <!DOCTYPE> | Define el tipo de documento |
| <a> | Principalmente utilizado como hipervínculo. |
| <abbr> | Define una abreviación |
| <acronym> | Permite a los autores indicar claramente una sequencia de caracteres que componen un acrónimo o abreviación de una palabra. No soportado en HTML5. |
| <address> | Define información de contacto del propietario del documento |
| <applet> | Esta etiqueta define un applet embebido dentro del documento. No soportado en HTML5. Declarado en desuso en HTML 4.01. |
| <area> | Esta etiqueta define un área dentro de un mapa de imagen |
| <article>* | Define una composición independiente dentro de un documento, página, aplicación o web, que puede ser distribuida independientemente o reutilizada. |
| <aside>* | Define contenido secundario al contenido de la página. |
| <audio>* | Se utiliza para representar contenido de audio en los documentos. Añadido en HTML5, puede contener diferentes fuentes de audio, representadas utilizando el atributo «src» o el elemento <source>. |
| <b> | Este elemento indica que el texto englobado tiene que ser mostrado en negrita. |
| <base> | Define cuál es la URL absoluta para todos aquellos enlaces que sean relativos en la página |
| <basefont> | Especifica un color, tamaño y fuente por defecto, para todo el texto del documento. No soportado en HTML5. Declarado en desuso en HTML 4.01 |
| <bdi>* | Aisla una parte del texto que puede tener un formato diferente del texto principal. |
| <bdo> | Este elemento es utilizado para sobreescribir la dirección del texto. |
| <big> | Este elemento define texto grande. No soportado en HTML5. |
| <blockquote> | Este elemento se utiliza para designar una cita de texto larga. Normalmente, se puede reconocer porque está identado. |
| <body> | Este elemento es utilizado para definir el cuerpo del documento. |
| <br> | Define un salto de línea. |
| <canvas>* | Utilizada para dibujar gráficos, mediante scripts. (normalmente JavaScript) |
| <caption> | Defines el título de una tabla |
| <center> | Este elemento hace que el texto englobado esté centrado dentro de los márgenes. No soportado en HTML5. Declarado en desuso en HTML 4.01. |
| <cite> | Especifica una cita o referecia a otro lugar |
| <code> | Indica que el texto englobado es código de programación. |
| <col> | Define una columna dentro de una tabla y se utiliza para agrupar y alinear. |
| <colgroup> | Especifica un grupo de una o más columnas de una tabla para darles formato. |
| <command>* | Define un botón comando al que el usuario puede llamar. |
| <datalist>* | Especifica una lista de opciones predefinidas para una caja de texto input |
| <dd> | Define una descripción de un item en una lista de definición |
| <del> | Define texto que ha sido eliminado de un documento. |
| <details>* | Define detalles adicionales que el usuario puede ver o esconder. |
| <dfn> | Define un término de una definición. |
| <dialog>* | Define una caja de diálogo o ventana. |
| <dir> | Define una lista directorio. No soportado en HTML5. Declarado en desuso en HTML 4.01. |
| <div> | Define una sección en un documento. |
| <dl> | Define una lista de definición. |
| <dt> | Define un término (un item) dentro de una lista de definición. |
| <em> | Define énfasis en un texto. |
| <embed>* | Se utiliza para declarar un contenedor para una aplicación externa (no- HTML) |
| <fieldset> | Agrupa elementos relacionados en un formulario. |
| <figcaption>* | Define un título para un elemento <figure> |
| <figure>* | Especifica contenido independiente. |
| <font> | Define fuente, color y tamaño para un texto. No soportado en HTML5. |
| <footer>* | Define un footer para un documento o sección. |
| <form> | Define un formulario HTML para datos del usuario. |
| <frame> | Define una ventana dentro de un frameset. No soportado en HTML5. |
| <frameset> | Define un conjunto de «frames». No soportado en HTML5. |
| <h1> -<h6> | Define encabezados en HTML (Headings) |
| <head> | Define información sobre el documento |
| <header>* | Define un encabezado para un documento o sección |
| <hgroup> | Agrupa elementos del encabezado (<h1> -<h6>) |
| <hr> | Define un cambio temático en el contenido |
| <html> | Define la raiz de un documento HTML |
| <i> | Este elemento se usa para representar un texto con un estilo de fuente en itálica |
| <iframe> | Define un documento HTML dentro de otro documento HTML |
| <img> | Define una imagen |
| <input> | Este elemento se utiliza para ingresar datos por parte del usuario |
| <ins> | Define el texto que ha sido insertado dentro del documento |
| <kbd> | Este elemento se utiliza para avisar al usuario que tiene que introducir datos por teclado |
| <keygen>* | Define un campo generador de claves en formularios |
| <label> | Define una etiqueta para un elemento <input> |
| <legend> | Este elemento define un título para un elemento <fieldset>, <figure> o <details> |
| <li> | Define un item de una lista |
| <link> | Este elemento define la relación entre el documento y un recurso externo (normalmente utilizado con hojas de estilo) |
| <main>* | Especifica el contenido principal del documento |
| <map> | Define un mapa de imagen en el lado del cliente |
| <mark>* | Define un texto resaltado en el documento |
| <menu> | Define un menu |
| <meta> | Define metadata de un documento HTML |
| <meter>* | Define una medida escalar dentro de un rango determinado |
| <nav>* | Define links de navegación |
| <noframes> | Especifica el contenido alternativo para los navegadores que no soportan frames. No soportado por HTML5. |
| <noscript> | Especifica un contenido alternativo para navegadores que no soportan scripts. |
| <object> | Define un objeto embebido |
| <ol> | Este elemento especifica una lista ordenada |
| <optgroup> | Especifica un grupo de opciones en una lista desplegable. |
| <option> | Este elemento define una opción en una lista desplegable. |
| <output>* | Especifica el resultado de un cálculo |
| <p> | Especifica un párrafo |
| <param> | Este elemento especifica un parámetro para un objeto |
| <pre> | Define un texto con formato previo |
| <progress>* | Representa el progreso de una tarea |
| <q> | Define una cita de texto corta(en una línea) |
| <rp>* | Define que mostrar en los navegadores que no soportan anotaciones ruby |
| <rt>* | Este elemento define la pronunciación de caracteres (para tipografía del este asiático) |
| <ruby>* | Define una anotación ruby (para tipografía del este asiático) |
| <s> | Esta etiqueta define texto con un estilo de fuente tachado |
| <samp> | Muestra un mensaje de un programa o script |
| <script> | Define un script dentro del documento |
| <section>* | Define una sección en un documento |
| <select> | Muestra varias opciones al usuario y permite que elija entre ellas una o más en una lista desplegable |
| <small> | Se utiliza para presentar un texto con un estilo de fuente pequeña |
| <source>* | Define las fuentes para los elementos multimedia como video y audio. |
| <span> | Agrupa varios elementos en línea seguidos dentro de un mismo bloque, para después darles formato con la hoja de estilo. |
| <strike> | Este elemento se utiliza para representar un texto con un estilo de fuente tachado. No soportado en HTML5. Declarado en desuso en HTML 4.01. |
| <strong> | Se utiliza para representar texto importante |
| <style> | Este elemento define el estilo del documento |
| <sub> | Representa un subíndice |
| <summary>* | Define un encabezado para el elemento <details> |
| <sup> | Representa un superíndice |
| <table> | Define una tabla |
| <tbody> | Agrupa el contenido del body de una tabla |
| <td> | Define una célda de una tabla |
| <textarea> | Este elemento especifica una área para escribir texto |
| <tfoot> | Agrupa el contenido del footer de una tabla |
| <th> | Representa la celda del encabezado de una tabla |
| <thead> | Agrupa el contenido del encabezado de una tabla |
| <time>* | Define la fecha y hora |
| <title> | Define el título de un documento |
| <tr> | Define una fila dentro de una tabla |
| <track>* | Define determinadas características para las pistas de texto de elementos multimedia como; vídeos o audios. |
| <tt> | Define texto con un estilo de fuente en teletipo. No soportado en HTML5. |
| <u> | Define texto con un estilo de fuente subrayado. |
| <ul> | Define una lista no ordenada |
| <var> | Define una variable |
| <video>* | Define un video o película |
| <wbr>* | Define donde un texto se puede romper para cambios de línea |
* Etiqueta añadida en HTML5
HTML «Inline» elements
En HTML, el elemento <br> sirve para crear un salto de línea dentro de un texto. Este recurso se puede añadir en cualquier lugar de un párrafo para terminar una línea y continuar en la que sigue.
Tablas
se utilizan para organizar y presentar datos en un formato tabular, compuesto por filas y columnas.
Descripción de los Elementos
<table>: Define el inicio de una tabla.<tr>: Define una fila en la tabla.<th>: Define una celda de encabezado en la tabla (se utiliza para los títulos de las columnas).<td>: Define una celda de datos en la tabla.border: Atributo utilizado para agregar un borde a la tabla. En el ejemplo avanzado, se utilizan estilos CSS para esto.colspan: Atributo que permite fusionar varias columnas en una sola celda.
Ejemplo Avanzado con Celdas Fusionadas y Estilos
Formularios
Listas
imput
select
Imagenes
CSS Paso a paso
html step by step tutorial
html step by step process
html step by step form
html step by step template
learn html step by step