Explorando los elementos y atributos de HTML: una recopilación

  • Autor Autor andrea709
  • Fecha de inicio Fecha de inicio
A

andrea709

Curioso
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Me gustaría hacer una recopilación de todos los elementos que conformaron este lenguaje hasta la actualidad, antes de empezar un curso presencial de desarrollo web en agosto. Ya había iniciado otro curso a distancia en el que vi muy muy brevemente el lenguaje de marcado, pero siento que al no poder practicar código de la manera adecuada (no tengo PC, sigo ahorrando) no logré aprender mucho.
Pienso que aunque tenemos a disposición en internet diferentes recursos donde consultar, sería útil para los que recién empezamos tener un resumen de todos los elementos, agrupados en categorías que den a entender para qué se usan (o usaron antes, en el caso de los que ya no están admitidos en HTML5). Aportaría un panorama más amplio de un lenguaje que no es tan complicado pero que se presta a confusiones, o por lo menos eso me está pasando a mi.

Aunque el tema se centra en los elementos, muchas veces tienen atributos que cumplen una función importante, también sería bueno anotar el atributo en conjunto.

Podría colocar un comentario al comienzo, que iría editando cada vez que alguien aporte información nueva.

Muchas gracias a cualquiera que ponga su conocimiento a disposición de todos los que todavía no sabemos mucho.
 
Última edición:
Hola Andrea, lamento escuchar que no tengas una PC. Es algo fundamental que cualquier persona debería poder tener junto con acceso a internet, abre muchas puertas al conocimiento. A la izquierda de esta web podés ver todos los "elementos" y lo que permite hacer el html: https://www.w3schools.com/html/

Adicionalmente te informo que no necesitas muchos recursos de pc para diseño web, la pc más económica del mercado te serviría para practicar.
 
Siéntanse libres de corregir cualquier error que vean (en especial con respecto a los nombres de las categorías "•" o qué categorías son relevantes), voy a estar atenta.

Listado de elementos HTML

  • Representa todo el documento HTML. Es el elemento Raíz:
<html lang=es> </html>

  • Conforman los metadatos:
<head></head>
Título de la página
<title></title>
Datos
<meta>
<link>

  • Se ubican en el cuerpo del documento:
<body></body>
Títulos del contenido
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Secciones de página
<header></header>
<footer></footer>
Contenedores
<div></div>
Párrafo
<p></p>
Formatean párrafo
<br> o <br />
 
Última edición:
Hola Andrea, lamento escuchar que no tengas una PC. Es algo fundamental que cualquier persona debería poder tener junto con acceso a internet, abre muchas puertas al conocimiento. A la izquierda de esta web podés ver todos los "elementos" y lo que permite hacer el html: https://www.w3schools.com/html/

Adicionalmente te informo que no necesitas muchos recursos de pc para diseño web, la pc más económica del mercado te serviría para practicar.
Gracias @flowxd , estoy encaminandome a eso ahorrando, planeo conseguir una PC que me permita aprender y practicar. Por ahora tengo una aplicación de celular (SPCK editor) pero recién estoy aprendiendo a usarla. Tengo muy poca práctica, por eso una guía teórica de los que saben ayudaría a sentar bases. Agradezco mucho tu aporte!
 
Siéntanse libres de corregir cualquier error que vean (en especial con respecto a los nombres de las categorías "•" o qué categorías son relevantes), voy a estar atenta.

Listado de elementos HTML

  • Representa todo el documento HTML:
<html lang=es> </html>

  • Representan los metadatos:
<head></head>
<title></title>
<meta>
<link>

  • Representan el cuerpo del documento:
<body></body>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Para el cuerpo podes añadir etiquetas como <footer></footer>, <header></header> (para navbar/menúes por ej), los <div></div> que son totalmente esenciales, ya para textos tenes <p></p>, para generar espacios en el texto tenes la etiqueta <br> y <br />... por lo menos son las más habituales de uso, y ya que estás en Arg te sugiero que busques en fb marketplace una netbook del gobierno (Samsung ó Noblex) y con esas de 4gb de ram que salieron desde el 2015 podes instalar Laragon y probar, no te pide casi nada de recursos
 
Para el cuerpo podes añadir etiquetas como <footer></footer>, <header></header> (para navbar/menúes por ej), los <div></div> que son totalmente esenciales, ya para textos tenes <p></p>, para generar espacios en el texto tenes la etiqueta <br> y <br />... por lo menos son las más habituales de uso, y ya que estás en Arg te sugiero que busques en fb marketplace una netbook del gobierno (Samsung ó Noblex) y con esas de 4gb de ram que salieron desde el 2015 podes instalar Laragon y probar, no te pide casi nada de recursos
Gracias @Berker por el aporte, ahora edito el comentario para agregarlos! Y sobre las notebooks voy a intentar eso también, si no me da desconfianza. Puede ser una buena inversión (hay que tener ojo no más)
 
Gracias @Berker por el aporte, ahora edito el comentario para agregarlos! Y sobre las notebooks voy a intentar eso también, si no me da desconfianza. Puede ser una buena inversión (hay que tener ojo no más)
Tratá de que sea una desbloqueada así te ahorras los dolores de cabeza, y de última siempre podes aumentarles la ram hasta 4gb fácil que con eso te alcanza y sobra para programar y mantener un servidor local sencillo
 
Tratá de que sea una desbloqueada así te ahorras los dolores de cabeza, y de última siempre podes aumentarles la ram hasta 4gb fácil que con eso te alcanza y sobra para programar y mantener un servidor local sencillo
 
Cierto, con que sirva para empezar es suficiente. Al principio me sobre preocupaba en conseguir una computadora de las mejores porque pensaba que era la única forma ( viste, cuando no sabes)
 
Me gustaría hacer una recopilación de todos los elementos que conformaron este lenguaje hasta la actualidad, antes de empezar un curso presencial de desarrollo web en agosto. Ya había iniciado otro curso a distancia en el que vi muy muy brevemente el lenguaje de marcado, pero siento que al no poder practicar código de la manera adecuada (no tengo PC, sigo ahorrando) no logré aprender mucho.
Pienso que aunque tenemos a disposición en internet diferentes recursos donde consultar, sería útil para los que recién empezamos tener un resumen de todos los elementos, agrupados en categorías que den a entender para qué se usan (o usaron antes, en el caso de los que ya no están admitidos en HTML5). Aportaría un panorama más amplio de un lenguaje que no es tan complicado pero que se presta a confusiones, o por lo menos eso me está pasando a mi.

Aunque el tema se centra en los elementos, muchas veces tienen atributos que cumplen una función importante, también sería bueno anotar el atributo en conjunto.

Podría colocar un comentario al comienzo, que iría editando cada vez que alguien aporte información nueva.

Muchas gracias a cualquiera que ponga su conocimiento a disposición de todos los que todavía no sabemos mucho.
estas son la mayor parte de la etiquetas, en realidad son unas 20 a 25 las que mas se utilizan , el resto es mas para casos muy puntuales ...
a esta lista le tenes que agregar una lista de atributos, Y cada etiqueta puede usar o llevar determinados atributos , no se puede usar cualquier atributo en cualquier etiqueta...
<!–…–>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
 
Última edición:
continuando con los atributos segun las etiquetas:

atributos segun etiquetas:

AtributoEtiqueta HTML5Descripción
accept<form>, <input>Tipos de archivos aceptados por el servidor. Puedes definirlos con valores separados por comas, por ejemplo: .doc, .ods, .txt, etc. O también puedes indicarle un conjunto de tipos de archivos, como por ejemplo: «video/*» o «audio/*»
accept-charset<form>Define una lista de caracteres soportados en el formulario. Por ejemplo: accept-charset=»ISO-8859-1″
accesskeyAtributo GlobalPodrás configurar un botón de tu teclado para que se ejecute acción en la página web. Por ejemplo, un enlace hacia la página de contacto o la home.
action<form>El atributo especifica la URL dónde se enviarán los datos recogidos en el formulario, a menudo un archivo .php dentro del mismo servidor.
align<applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr>Especifica el alineamiento horizontal del elemento.
Este atributo sigue funcionando pero no es aconsejable usarlo ya que está en desuso. Lo recomendable es usar reglas CSS en su lugar.
alt<applet>, <area>, <img>, <input>Texto alternativo que se mostrará en el navegador en caso de que la imagen no se pueda mostrar. Muy importante de cara a accesibilidad.
async<script>Indica que el script debe ejecutarse de forma asíncrona.
autocomplete<form>, <input>Indica si los controles en este formulario pueden tener por defecto sus valores completados automáticamente por el navegador.
autofocus<button>, <input>, <keygen>, <select>, <textarea>El elemento debe tener el foco automáticamente una vez se cargue la página web.
autoplay<audio>, <video>Hace que el audio o video comience a reproducirse una vez se cargue la página web.
bgcolor<body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>Te permite añadir un color de fondo al elemento HTML. El color debe ser añadido en el modo de color RGB, por ejemplo #FF00AA.
Este atributo sigue funcionando pero no es aconsejable usarlo ya que está en desuso. Lo recomendable es usar reglas CSS en su lugar.
border<img>, <object>, <table>Permite definir un borde al elemento HTML.
Este atributo sigue funcionando pero no es aconsejable usarlo ya que está en desuso. Lo recomendable es usar reglas CSS en su lugar.
buffered<audio>, <video>Con este atributo podrás definir un rango de tiempo del elemento multimedia que será usado como buffer.
charset<meta>, <script>Atributo necesario par definir la codificación de caracteres de la página o del script.
checked<command>, <input>Usado para definir que un elemento HTML debe estar marcado por defecto al cargar la página web.
cite<blockquote>, <del>, <ins>, <q>Contiene una URL que apunta a la fuente de la cita o cambio. Muy importante de cara a una correcta optimización SEO de la página.
classAtributo GlobalOtorga una clase creada en CSS a un elemento HTML. Se usa principalmente para aplicar estilos a elementos con propiedades en común.
code<applet>Especifica la URL del archivo de tipo applet que será cargado y ejecutado.
color<basefont>, <font>, <hr>Atributo usado para indicar el color del texto de un elemento.
Este atributo sigue funcionando pero no es aconsejable usarlo ya que está en desuso. Lo recomendable es usar reglas CSS en su lugar.
cols<textarea>Dentro de una etiqueta <textarea>, se usa para definir el número de columnas que tendrá el campo de texto.
colspan<td>, <th>Dentro de una tabla, define el número de columnas que una celda debe ocupar.
content<meta>Un atributo que permite definir el contenido de la etiqueta HTML <meta> que acompaña.
contenteditableAtributo GlobalDefine si el contenido del elemento HTML podrá ser editable o no.
contextmenuAtributo GlobalDefine el ID del elemento <menu> que servira como menú de contexto para otro elemento.
controls<audio>, <video>Indica si el navegador debe mostrar los controles multimedia del reproductor integrado al usuario.
coords<area>Un conjunto de valores que especifican las coordenadas dentro de la etiqueta area.
data<object>Especifica la URL, absoluta o relativa del objeto o recurso.
data-*Atributo GlobalPermite asociar atributos presonalizados a un elemento HTML.
datetime<del>, <ins>, <time>Permite definir la fecha y hora asociadas con el elemento.
default<track>Con este atributo podrás definir que por defecto, una pista por ejemplo de subtítulos esté habilitada. Siempre y cuando las preferencias del usuario no indiquen algo diferente.
defer<script>Indica que el código debe ser ejecutado despues de que la página este cargada.
dirAtributo GlobalCon este atributo puedes definir la dirección del texto en un elemento HTML. Los valores permitidos son ltr (Izquierda-a-Derecha) o rtl (Derecha-a-Izquierda).
dirname<input>, <textarea>Similar a la anterior. Indica la dirección del texto asociada con el elemento al momento de enviar el formulario.
disabled<button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea>Permite que un elemento HTML esté deshabilitado y el usuario no pueda interactuar con el.
download<a>, <area>Si este atributo se añade al elemento HTML, el recurso indicado podrá descargarse al dispositivo del usuario.
draggableAtributo GlobalDefine si el elemento puede ser arrastrado.
enctype<form>Define el tipo de contenido del formulario cuando el método del mismo es POST.
for<label>, <output>Atributo usado para asociar o describir elementos que pertenecen a éste.
form<button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea>Atributo para indicar el formulario al que pertenece el elemento.
headers<td>, <th>A través de «ids» indicados en los encabezados de una tabla <th> podrás asociarlos a diferentes elementos de la tabla <td>. Muy útil de cara a la accesibilidad y por lo tanto para el SEO.
height<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>Permite especificar la altura de los elementos HTML indicados.
Este atributo sigue funcionando pero no es aconsejable usarlo ya que está en desuso. Lo recomendable es usar reglas CSS en su lugar.
hiddenAtributo GlobalEste atributo permite indicar que el elemento HTML no debe ser visible. Es habitual usarlo por ejemplo, para ocultar elementos que no deben ser visibles inicialmente pero que después de una acción si deben verse.
high<meter>El atributo especifica el intervalo donde el atributo «value» tomara el valor como alto.
href<a>, <area>, <base>, <link>La URL de un recurso asociado.
hreflang<a>, <area>, <link>Especifica el lenguaje del recurso asociado.
http-equiv<meta>Indica una directiva que puede alterar el comportamiento de la página y como es leída por los exploradores.
idAtributo GlobalUsado para asignar un identificador único a un elemento HTML. Usado generalmente para acceder al mismo desde CSS o Javascript. No pueden existir dos «ids» iguales en una misma página web.
ismap<img>Indica que la imagen es parte de un mapa de imagen del servidor.
itempropAtributo GlobalAtributo que permite dar más información a Google acerca de imágenes o datos dentro de cualquier tipo de etiquetas. Por ejemplo se puede indicar propiedades como: actores , clasificación, género, etc .
label<track>Especifica el título de la pista con un formato legible por el usuario. Usado conjuntamente con el atributo «for»
langAtributo GlobalDefine el lenguaje utilizado en el elemento.
language<script>Define el lenguaje (de programación) utilizado en el script.
list<input>Identifica una serie de valores predefinidos para ser sugeridos al usuario en un menú desplegable.
loop<audio>, <bgsound>, <marquee>, <video>Atributo que habilita al medio a volver a reproducirse desde el principio cuando llega al final.
low<meter>Similar al atributo high, solo que en este caso, permite definir cuando un valor estará en el rango bajo.
max<input>, <meter>, <progress>Define el máximo valor aceptado.
maxlength<input>, <textarea>Define el mayor número de caracteres aceptados.
media<a>, <area>, <link>, <source>, <style>Indica el tipo de medio para el cual el recurso vinculado fue creado.
method<form>Define el método HTTP a emplear para enviar el formulario. Puede ser GET (predeterminado) o POST.
min<input>, <meter>Define el valor mínimo aceptado.
multiple<input>, <select>Atributo que define si se puede introducir múltiples valores.
muted<video>Al reproducir un contenido audiovisual, este atributo indica si el audio será silenciado inicialmente al cargar la página.
name<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>Nombre del elemento. Utilizado a menudo por el servidor para identificar los campos en el envío de formularios.
novalidate<form>Con este atributo indicamos al formulario que no valide el contenido del mismo.
open<details>Indica si los detalles de la página seran mostrados cuando cargue la misma.
optimum<meter>Con este atributo se define el valor numérico óptimo.
pattern<input>Este atributo define una expresión regular con la cual el valor del elemento debe ser validado antes de aceptar el contenido del mismo.
ping<a>, <area>Indica si se enviara un ping o notificacion a la URL del recurso cuando el usuario utlize el vinculo.
placeholder<input>, <textarea>Proporciona una sugerencia al usuario de lo que puede ser introducido en el campo de un formulario por ejemplo. Muy util de cara a la accesibilidad.
poster<video>Atributo que permite añadir una imagen que se mostrará mientras se carga un video en una web. En caso de que la URL del video este «rota», el poster seguirá cargándose consiguiendo con esto no ver un hueco vacio en la web.
preload<audio>, <video>Indica si el recurso o partes del mismo deben ser precargadas.
readonly<input>, <textarea>Con este atributo se define si el elemento puede o no ser editado por el usuario.
rel<a>, <area>, <link>Especifica la relación entre el objeto destino y el objeto enlace. Importante de cara una correcta optimización SEO.
required<input>, <select>, <textarea>Con este atributo hacemos que la etiqueta Html sea, o no, de obligada cumplimentación.
reversed<ol>Con este atributo podemos modificar el comportamiento estándar de una lista ordenada haciendo que se vea listada en orden descendente en lugar de ascendente.
rows<textarea>Define el número de filas en un área de texto.
rowspan<td>, <th>Define el número de filas que una celda de una tabla debe abarcar.
sandbox<iframe>Lista de restricciones a ser desactivadas en el iframe.
scope<th>En una tabla permite definir las celdas que la cabecera deberá ocupar en este elemento.
seamless<iframe>Indica si el iframe debe ser cargado como parte del mismo documento.
selected<option>Define un valor que aparecerá por defecto seleccionado al cargar la página.
size<input>, <select>Define el ancho del elemento (en píxeles). En este caso es mejor por tanto usar reglas CSS. En cambio. si el atributo del elemento es del tipo «text» o «password», entonces es el número de caracteres que se podrán introducir.
span<col>, <colgroup>Indica el número de columnas que se agrupan en una tabla.
spellcheckAtributo GlobalCon este atributo se permite que un texto pueda ser autocorregido ortográficamente, o no.
src<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>La URL del contenido integrable en la etiqueta HTML que lo acompaña.
srcdoc<iframe>Especifica el contenido de la página incluida.
srclang<track>Especifica el lenguaje del contenido de la pista.
srcset<img>Este atributo define diferentes versiones de la imagen para mostrar una o otra según el tipo de pantalla.
start<ol>Define el número inicial de la lista ordenada (si es diferente a 1).
styleAtributo GlobalDefine los estilos CSS que anulan los estilos establecidos previamente. En este caso son llamados estilos en línea ya que se introducen directamente en la etiqueta HTML en cuestión.
target<a>, <area>, <base>, <form>Con este atributo se determina el marco destino en un vínculo.
Valores especiales: «_blank» indica una nueva ventana, «_parent» indica el marco padre del marco que contiene el código fuente, «_self» indica el marco donde está el código fuente y «_top» indica la ventana completa del navegador.
titleAtributo GlobalTexto a ser mostrado cuando el cursor esté sobre el elemento. Muy útil de cara a la usabilidad y para una correcto posicionamiento SEO.
type<button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu>Define el tipo de elemento HTML.
usemap<img>, <input>, <object>Indica la URL parcial de un image map asociado con el elemento.
Note: Este atributo no puede ser usado si el elemento <img> desciende de un <button> o <a>
value<button>, <option>, <input>, <li>, <meter>, <progress>, <param>Define el valor predeterminado a ser mostrado al cargar la página.
width<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>Para los elementos enumerados aquí, esto establece el ancho del elemento. Aunque como en caso anteriores, lo correcto sería usar reglas CSS.
wrap<textarea>Indica la forma en la cual el texto debe ser envuelto.

Con esto ya podes intentar estudiar html , pero sin practica no sirve de mucho, deverias conseguir un pc aunque sea vieja , para poder practicar.
 
Cierto, con que sirva para empezar es suficiente. Al principio me sobre preocupaba en conseguir una computadora de las mejores porque pensaba que era la única forma ( viste, cuando no sabes)
Si, igual pasa que siempre consideramos que lo mejor es lo más eficiente, pero en estos casos podes usar una computadora del año 2002-2004 (unos $2.000 ars usada) sin problemas, ya que vas a correr código/cms en un entorno donde serías el único visitante, ya con eso no te hace falta para nada recursos excesivos, sino hay otra forma más barata pero te convendría = tener una computadora para usarla, mandame priv para esta última ya que si la dejo acá van a quemar el método 🤣
 
continuando con los atributos segun las etiquetas:

atributos segun etiquetas:

AtributoEtiqueta HTML5Descripción
accept<form>, <input>Tipos de archivos aceptados por el servidor. Puedes definirlos con valores separados por comas, por ejemplo: .doc, .ods, .txt, etc. O también puedes indicarle un conjunto de tipos de archivos, como por ejemplo: «video/*» o «audio/*»
accept-charset<form>Define una lista de caracteres soportados en el formulario. Por ejemplo: accept-charset=»ISO-8859-1″
accesskeyAtributo GlobalPodrás configurar un botón de tu teclado para que se ejecute acción en la página web. Por ejemplo, un enlace hacia la página de contacto o la home.
action<form>El atributo especifica la URL dónde se enviarán los datos recogidos en el formulario, a menudo un archivo .php dentro del mismo servidor.
align<applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr>Especifica el alineamiento horizontal del elemento.
Este atributo sigue funcionando pero no es aconsejable usarlo ya que está en desuso. Lo recomendable es usar reglas CSS en su lugar.
alt<applet>, <area>, <img>, <input>Texto alternativo que se mostrará en el navegador en caso de que la imagen no se pueda mostrar. Muy importante de cara a accesibilidad.
async<script>Indica que el script debe ejecutarse de forma asíncrona.
autocomplete<form>, <input>Indica si los controles en este formulario pueden tener por defecto sus valores completados automáticamente por el navegador.
autofocus<button>, <input>, <keygen>, <select>, <textarea>El elemento debe tener el foco automáticamente una vez se cargue la página web.
autoplay<audio>, <video>Hace que el audio o video comience a reproducirse una vez se cargue la página web.
bgcolor<body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>Te permite añadir un color de fondo al elemento HTML. El color debe ser añadido en el modo de color RGB, por ejemplo #FF00AA.
Este atributo sigue funcionando pero no es aconsejable usarlo ya que está en desuso. Lo recomendable es usar reglas CSS en su lugar.
border<img>, <object>, <table>Permite definir un borde al elemento HTML.
Este atributo sigue funcionando pero no es aconsejable usarlo ya que está en desuso. Lo recomendable es usar reglas CSS en su lugar.
buffered<audio>, <video>Con este atributo podrás definir un rango de tiempo del elemento multimedia que será usado como buffer.
charset<meta>, <script>Atributo necesario par definir la codificación de caracteres de la página o del script.
checked<command>, <input>Usado para definir que un elemento HTML debe estar marcado por defecto al cargar la página web.
cite<blockquote>, <del>, <ins>, <q>Contiene una URL que apunta a la fuente de la cita o cambio. Muy importante de cara a una correcta optimización SEO de la página.
classAtributo GlobalOtorga una clase creada en CSS a un elemento HTML. Se usa principalmente para aplicar estilos a elementos con propiedades en común.
code<applet>Especifica la URL del archivo de tipo applet que será cargado y ejecutado.
color<basefont>, <font>, <hr>Atributo usado para indicar el color del texto de un elemento.
Este atributo sigue funcionando pero no es aconsejable usarlo ya que está en desuso. Lo recomendable es usar reglas CSS en su lugar.
cols<textarea>Dentro de una etiqueta <textarea>, se usa para definir el número de columnas que tendrá el campo de texto.
colspan<td>, <th>Dentro de una tabla, define el número de columnas que una celda debe ocupar.
content<meta>Un atributo que permite definir el contenido de la etiqueta HTML <meta> que acompaña.
contenteditableAtributo GlobalDefine si el contenido del elemento HTML podrá ser editable o no.
contextmenuAtributo GlobalDefine el ID del elemento <menu> que servira como menú de contexto para otro elemento.
controls<audio>, <video>Indica si el navegador debe mostrar los controles multimedia del reproductor integrado al usuario.
coords<area>Un conjunto de valores que especifican las coordenadas dentro de la etiqueta area.
data<object>Especifica la URL, absoluta o relativa del objeto o recurso.
data-*Atributo GlobalPermite asociar atributos presonalizados a un elemento HTML.
datetime<del>, <ins>, <time>Permite definir la fecha y hora asociadas con el elemento.
default<track>Con este atributo podrás definir que por defecto, una pista por ejemplo de subtítulos esté habilitada. Siempre y cuando las preferencias del usuario no indiquen algo diferente.
defer<script>Indica que el código debe ser ejecutado despues de que la página este cargada.
dirAtributo GlobalCon este atributo puedes definir la dirección del texto en un elemento HTML. Los valores permitidos son ltr (Izquierda-a-Derecha) o rtl (Derecha-a-Izquierda).
dirname<input>, <textarea>Similar a la anterior. Indica la dirección del texto asociada con el elemento al momento de enviar el formulario.
disabled<button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea>Permite que un elemento HTML esté deshabilitado y el usuario no pueda interactuar con el.
download<a>, <area>Si este atributo se añade al elemento HTML, el recurso indicado podrá descargarse al dispositivo del usuario.
draggableAtributo GlobalDefine si el elemento puede ser arrastrado.
enctype<form>Define el tipo de contenido del formulario cuando el método del mismo es POST.
for<label>, <output>Atributo usado para asociar o describir elementos que pertenecen a éste.
form<button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea>Atributo para indicar el formulario al que pertenece el elemento.
headers<td>, <th>A través de «ids» indicados en los encabezados de una tabla <th> podrás asociarlos a diferentes elementos de la tabla <td>. Muy útil de cara a la accesibilidad y por lo tanto para el SEO.
height<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>Permite especificar la altura de los elementos HTML indicados.
Este atributo sigue funcionando pero no es aconsejable usarlo ya que está en desuso. Lo recomendable es usar reglas CSS en su lugar.
hiddenAtributo GlobalEste atributo permite indicar que el elemento HTML no debe ser visible. Es habitual usarlo por ejemplo, para ocultar elementos que no deben ser visibles inicialmente pero que después de una acción si deben verse.
high<meter>El atributo especifica el intervalo donde el atributo «value» tomara el valor como alto.
href<a>, <area>, <base>, <link>La URL de un recurso asociado.
hreflang<a>, <area>, <link>Especifica el lenguaje del recurso asociado.
http-equiv<meta>Indica una directiva que puede alterar el comportamiento de la página y como es leída por los exploradores.
idAtributo GlobalUsado para asignar un identificador único a un elemento HTML. Usado generalmente para acceder al mismo desde CSS o Javascript. No pueden existir dos «ids» iguales en una misma página web.
ismap<img>Indica que la imagen es parte de un mapa de imagen del servidor.
itempropAtributo GlobalAtributo que permite dar más información a Google acerca de imágenes o datos dentro de cualquier tipo de etiquetas. Por ejemplo se puede indicar propiedades como: actores , clasificación, género, etc .
label<track>Especifica el título de la pista con un formato legible por el usuario. Usado conjuntamente con el atributo «for»
langAtributo GlobalDefine el lenguaje utilizado en el elemento.
language<script>Define el lenguaje (de programación) utilizado en el script.
list<input>Identifica una serie de valores predefinidos para ser sugeridos al usuario en un menú desplegable.
loop<audio>, <bgsound>, <marquee>, <video>Atributo que habilita al medio a volver a reproducirse desde el principio cuando llega al final.
low<meter>Similar al atributo high, solo que en este caso, permite definir cuando un valor estará en el rango bajo.
max<input>, <meter>, <progress>Define el máximo valor aceptado.
maxlength<input>, <textarea>Define el mayor número de caracteres aceptados.
media<a>, <area>, <link>, <source>, <style>Indica el tipo de medio para el cual el recurso vinculado fue creado.
method<form>Define el método HTTP a emplear para enviar el formulario. Puede ser GET (predeterminado) o POST.
min<input>, <meter>Define el valor mínimo aceptado.
multiple<input>, <select>Atributo que define si se puede introducir múltiples valores.
muted<video>Al reproducir un contenido audiovisual, este atributo indica si el audio será silenciado inicialmente al cargar la página.
name<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>Nombre del elemento. Utilizado a menudo por el servidor para identificar los campos en el envío de formularios.
novalidate<form>Con este atributo indicamos al formulario que no valide el contenido del mismo.
open<details>Indica si los detalles de la página seran mostrados cuando cargue la misma.
optimum<meter>Con este atributo se define el valor numérico óptimo.
pattern<input>Este atributo define una expresión regular con la cual el valor del elemento debe ser validado antes de aceptar el contenido del mismo.
ping<a>, <area>Indica si se enviara un ping o notificacion a la URL del recurso cuando el usuario utlize el vinculo.
placeholder<input>, <textarea>Proporciona una sugerencia al usuario de lo que puede ser introducido en el campo de un formulario por ejemplo. Muy util de cara a la accesibilidad.
poster<video>Atributo que permite añadir una imagen que se mostrará mientras se carga un video en una web. En caso de que la URL del video este «rota», el poster seguirá cargándose consiguiendo con esto no ver un hueco vacio en la web.
preload<audio>, <video>Indica si el recurso o partes del mismo deben ser precargadas.
readonly<input>, <textarea>Con este atributo se define si el elemento puede o no ser editado por el usuario.
rel<a>, <area>, <link>Especifica la relación entre el objeto destino y el objeto enlace. Importante de cara una correcta optimización SEO.
required<input>, <select>, <textarea>Con este atributo hacemos que la etiqueta Html sea, o no, de obligada cumplimentación.
reversed<ol>Con este atributo podemos modificar el comportamiento estándar de una lista ordenada haciendo que se vea listada en orden descendente en lugar de ascendente.
rows<textarea>Define el número de filas en un área de texto.
rowspan<td>, <th>Define el número de filas que una celda de una tabla debe abarcar.
sandbox<iframe>Lista de restricciones a ser desactivadas en el iframe.
scope<th>En una tabla permite definir las celdas que la cabecera deberá ocupar en este elemento.
seamless<iframe>Indica si el iframe debe ser cargado como parte del mismo documento.
selected<option>Define un valor que aparecerá por defecto seleccionado al cargar la página.
size<input>, <select>Define el ancho del elemento (en píxeles). En este caso es mejor por tanto usar reglas CSS. En cambio. si el atributo del elemento es del tipo «text» o «password», entonces es el número de caracteres que se podrán introducir.
span<col>, <colgroup>Indica el número de columnas que se agrupan en una tabla.
spellcheckAtributo GlobalCon este atributo se permite que un texto pueda ser autocorregido ortográficamente, o no.
src<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>La URL del contenido integrable en la etiqueta HTML que lo acompaña.
srcdoc<iframe>Especifica el contenido de la página incluida.
srclang<track>Especifica el lenguaje del contenido de la pista.
srcset<img>Este atributo define diferentes versiones de la imagen para mostrar una o otra según el tipo de pantalla.
start<ol>Define el número inicial de la lista ordenada (si es diferente a 1).
styleAtributo GlobalDefine los estilos CSS que anulan los estilos establecidos previamente. En este caso son llamados estilos en línea ya que se introducen directamente en la etiqueta HTML en cuestión.
target<a>, <area>, <base>, <form>Con este atributo se determina el marco destino en un vínculo.
Valores especiales: «_blank» indica una nueva ventana, «_parent» indica el marco padre del marco que contiene el código fuente, «_self» indica el marco donde está el código fuente y «_top» indica la ventana completa del navegador.
titleAtributo GlobalTexto a ser mostrado cuando el cursor esté sobre el elemento. Muy útil de cara a la usabilidad y para una correcto posicionamiento SEO.
type<button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu>Define el tipo de elemento HTML.
usemap<img>, <input>, <object>Indica la URL parcial de un image map asociado con el elemento.
Note: Este atributo no puede ser usado si el elemento <img> desciende de un <button> o <a>
value<button>, <option>, <input>, <li>, <meter>, <progress>, <param>Define el valor predeterminado a ser mostrado al cargar la página.
width<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>Para los elementos enumerados aquí, esto establece el ancho del elemento. Aunque como en caso anteriores, lo correcto sería usar reglas CSS.
wrap<textarea>Indica la forma en la cual el texto debe ser envuelto.

Con esto ya podes intentar estudiar html , pero sin practica no sirve de mucho, deverias conseguir un pc aunque sea vieja , para poder practicar.
Muchísimas gracias también por los atributos, es un cuadro muy claro. Ayuda mucho a organizarse para estudiar y practicar, ya empiezo con los primeros a ver cómo se usan!
 
Si, igual pasa que siempre consideramos que lo mejor es lo más eficiente, pero en estos casos podes usar una computadora del año 2002-2004 (unos $2.000 ars usada) sin problemas, ya que vas a correr código/cms en un entorno donde serías el único visitante, ya con eso no te hace falta para nada recursos excesivos, sino hay otra forma más barata pero te convendría = tener una computadora para usarla, mandame priv para esta última ya que si la dejo acá van a quemar el método 🤣
🤔 Es legal jaja dale, te mando porque cualquier ayuda es buena 😄
 
🤔 Es legal jaja dale, te mando porque cualquier ayuda es buena 😄
Si, totalmente legal y de sobra, pero acá hay mucha gente malintencionada que bueno... hará que empiecen a pedir KYC para brindarlo aunque sea gratis jajajajaja
 
Atrás
Arriba