Todo lo que se ve en el mundo de la informática está compuesto por extensas líneas de código que el usuario final no llega a ver. Estas líneas conforman lo que es la imagen que se muestra.
La programación es fundamental para poder llevar a cabo cualquier tarea en el mundo de la informática, y en lo que a contenido web se refiere HTML es uno de los lenguajes de programación más importantes, junto con PHP y Java/JavaScript.
Qué es HTML
¿Te preguntas qué es HTML? HyperText Mark Lenguage (HTML) es un lenguaje de programación que se utiliza exclusivamente para la creación de webs y su contenido. Se trata de un lenguaje de programación que se centra en realizar marcas para poder organizar el contenido de una página web. Se trata del esqueleto del sitio, pero no sirve para añadir funciones especiales ni para definir el diseño de la web. Esas funciones son llevadas a cabo por otros lenguajes de programación como CSS (para el diseño), PHP y JavaScript (para funciones adicionales), entre otros.
Cómo funciona HTML
Ahora que sabes qué es HTML vamos a explicar un poco el funcionamiento de este lenguaje de marcado. Como su nombre lo indica, se encarga de marcar el contenido de una web haciendo uso de etiquetas. Las etiquetas HTML siempre se abrirán irán dentro de los caracteres menor que ‘<’ y mayor que ‘>’, haciendo que una etiqueta tenga este formato:
<Nombre de la etiqueta>
Si bien todas las etiquetas se colocan dentro de estos símbolos, es imperativo que tengan un inicio y un final, de esta forma tiene que existir una etiqueta que abra el contenido y otra idéntica que lo cierre, haciendo uso de la barra para indicar que es el final de la etiqueta. De esta forma una etiqueta con principio y final sería:
<Comienzo de la etiqueta>
</Final de la etiqueta>
Claro que existen algunas excepciones donde las etiquetas no requieren de un final, puesto que hay algunas que tienen un fin único. Por ejemplo para añadir imágenes haciendo uso de la etiqueta IMG o para añadir saltos de línea, haciendo uso de la etiqueta BR.
Ahora que sabes qué es HTML y cómo funciona este lenguaje de marcado, todo lo que te falta saber es dónde se escribe. Si bien los lenguajes de programación se pueden escribir en cualquier documento de texto, existen editores de código con funciones muy útiles que facilitan el trabajo a los programadores, tanto novatos como avanzados. Ya hablamos de algunos de los mejores editores de código en otro artículo, siendo Sublime Text, Brackets y Atom las opciones preferidas por los programadores.
Cuáles son las etiquetas HTML
HTML tiene muchas etiquetas distintas, cada una con sus propósitos y distintas formas de utilizarse. Aquí tienes una lista con las más utilizadas:
| Etiqueta | Función |
| <!–…–> | Determina un comentario |
| <!DOCTYPE> | Determina el tipo de documento |
| <a> | Determina un hiper-vínculo |
| <abbr> | Determina una abreviación |
| <address> | Determina la información de contacto del autor / propietario del documento |
| <area> | Determina un área dentro de un mapa de imagen |
| <article> | Determina un artículo |
| <aside> | Determina el contenido lateral del contenedor de una página |
| <audio> | Determina contenido de sonido |
| <b> | Determina 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> | Sobrescribe la dirección del texto |
| <blockquote> | Determina una sección que tiene otra fuente |
| <body> | Determina el cuerpo del documento |
| <br> | Determina un salto de línea |
| <button> | Determina un botón cliqueable |
| <canvas> | Se usa para dibujar gráficos en pantalla |
| <caption> | Determina el título de una tabla |
| <cite> | Determina el título de un trabajo |
| <code> | Determina 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> | Determina un botón command al que un usuario puede invocar |
| <datalist> | Especifica en un input una lista pre-definida de opciones |
| <dd> | Determina la descripción de un ítem en una lista de definición |
| <del> | Determina un texto que ha sido eliminado en un documento |
| <details> | Determina detalles adicionales que el usuario puede ver o esconder |
| <dfn> | Determina el término de una definición |
| <dialog> | Determina una caja o ventana de dialogo |
| <div> | Determina una sección en un documento |
| <dl> | Determina una lista de definición |
| <dt> | Determina un término (un ítem) en una lista de definición |
| <em> | Determina énfasis en un texto |
| <embed> | Determina el contenedor de una aplicación externa (no html) |
| <fieldset> | Grupo de elementos relacionados en un formulario |
| <figcaption> | Determina el título para una figura <figure> |
| <figure> | Especifica auto-contenido |
| <footer> | Determina el pie de página de un documento |
| <form> | Determina un formulario html |
| <h1> a <h6> | Determina encabezados o títulos |
| <head> | Determina información hacerca del documento |
| <header> | Determina la sección de encabezado del documento |
| <hgroup> | Grupo de encabezado (<h1> a <6>) |
| <hr> | Determina un cambio de temática a partir de una línea dibujada |
| <html> | Determina la raíz del documento |
| <i> | Determina una parte del texto de modo alternativo |
| <iframe> | Determina un cuadro en línea |
| <img> | Determina una imagen |
| <input> | Determina un control de entrada de texto |
| <ins> | Determina texto que ha sido insertado en un documento |
| <kbd> | Determina entrada del teclado |
| <keygen> | Determina un campo generador de claves para formularios |
| <label> | Determina el rótulo para un elemento <input> |
| <legend> | Determina un título para los elementos <fieldset>, <figure>, <details> |
| <li> | Determina un ítem de una lista |
| <link> | Determina la relación entre un documento y un recurso externo (generalmente con hojas de estilo) |
| <map> | Determina un mapa de imagen del cliente |
| <mark> | Determina texto resaltado o marcado |
| <menu> | Determina la lista de un menú |
| <meta> | Determina el metadato de un documento |
| <meter> | Determina una medida escalar en un rango conocido |
| <nav> | Determina un enlace de navegación |
| <noscript> | Determina un contenido alternativo para los usuarios que no soportan scripts del cliente |
| <objet> | Determina un objeto embebido |
| <ol> | Determina una lista ordenada |
| <optgroup> | Determina un grupo de opciones relacionadas en una lista desplegable |
| <option> | Determina una opción en una lista desplegable |
| <output> | Determina el resultado de un cálculo |
| <p> | Determina un párrafo |
| <param> | Determina un parámetro para un objeto |
| <pre> | Determina texto pre-formateado |
| <progress> | Representa el progreso de una tarea en una barra |
| <q> | Determina una cita corta |
| <rp> | Determina que debe mostrar en navegadores que no soportan scripts de Ruby |
| <rt> | Determina una pronunciación de caracteres |
| <ruby> | Determina una notación de Ruby |
| <s> | Determina texto que no es correcto |
| <samp> | Determina un ejemplo de salida de un programa |
| <script> | Determina un script del lado cliente |
| <section> | Determina una sección de un documento |
| <select> | Determina un lista de cascada |
| <small> | Determina texto pequeño |
| <source> | Determina los recursos para elementos multimedia |
| <span> | Determina una pequeña sección de un documento |
| <strong> | Determina un texto en negrita |
| <style> | Determina un estilo para la información de un documento |
| <sub> | Determina un texto que es subíndice |
| <summary> | Determina un encabezado visible para el elemento <details> |
| <sup> | Determina un texto que es superíndice |
| <table> | Determina una tabla |
| <tbody> | Determina el cuerpo de una tabla |
| <td> | Determina una celda en una tabla |
| <textarea> | Determina un control de entrada de múltiples líneas |
| <tfoot> | Agrupa los contenidos del pié de pagina en una tabla |
| <th> | Determina una celda de encabezado en una tabla |
| <thead> | Agrupa los encabezados de una tabla |
| <time> | Determina fecha / hora |
| <title> | Determina un título para el documento |
| <tr> | Determina una fila en una tabla |
| <track> | Determina las pistas de texto para elementos multimedia |
| <ul> | Determina una lista desordenada |
| <var> | Determina una variable |
| <video> | Determina un vídeo |
| <wbr> | Determina un posible salto de linea |
Webs para aprender HTML
HTML es el comienzo para muchas personas que quieren comenzar en el mundo de la programación o simplemente crear su propia página web. El lenguaje de marcado requiere de la compañía de otros lenguajes como CSS y PHP para poder crear una página web completa con todo tipo de funcionalidades, pero es el punto de partida de toda aquella persona para crear su primera web.
Existe documentación a montones en internet para poder conocer todas las etiquetas, como utilizarlas y cómo han de combinarse con otros lenguajes de programación. Si bien puede parecer algo tedioso, afortunadamente existen muchas plataformas, tanto en español como en inglés, que permiten aprender a programar una página web haciendo uso de HTML de una forma muy intuitiva y sencilla.
Devcode
Devcode es un sitio web que ofrece decenas de lecciones para aprender a programar de forma completamente gratuita, amén de muchos cursos de pago con funciones específicas o para aprender lenguajes de programación avanzados.
El método de enseñanza de esta web se basa en lecciones de vídeo acompañadas de archivos prácticos que te permitirán entender el funcionamiento del lenguaje y te mostrarán cómo utilizar las etiquetas.
Codecademy
Para los entendidos en inglés, Codecademy también hace uso de lecciones en vídeo, muy detalladas, junto con lecciones escritas, en las que podrás aprender a utilizar todas las etiquetas y a estructurar correctamente una página web en cuestión de pocas horas.
Esta plataforma es gratuita pero también cuenta con cursos de pago para seguir aprendiendo y complementar los conocimientos de HTML si es necesario una vez que hayas terminado con el curso.
W3Schools
Quizás la más sencilla de todas pero de las mejores plataformas para aprender a programar en HTML. Se trata de un sitio web en inglés que ofrece ejercicios de forma escrita y muy sencilla. Las explicaciones del funcionamiento de las etiquetas, así como de cómo se ha de estructurar el documento son simples y directas al grano.
Para enseñar, W3Schools introduce en todo momento ejercicios prácticos para que puedas aprender el funcionamiento de las etiquetas haciendo uso de la razón y pensando en cómo se pueden aplicar. La mejor forma de entender rápidamente cómo utilizar HTML y conseguir que se quede grabado en tu mente.