Etiquetas básicas de HTML son fragmentos de texto que se usan para dar propiedades específicas al texto cuando escribimos en código html.
Ahora que entendemos el concepto de etiquetas, necesitamos poder identificarlas.
Éstas se caracterizan porque van dentro de los caracteres menor que <
y mayor que «>"
, como en este ejemplo: <Aquí dentro va el nombre de la etiqueta>
Debido a que deben tener un inicio y un fin, el inicio de una etiqueta es normal, en otras palabras lleva los dos caracteres mencionados y dentro de estos se encuentra el nombre, sin embargo, existe una diferencia para el fin de la etiqueta ya que antes de escribir el nombre de la etiqueta debemos escribir una diagonal "/"
. Como en este ejemplo:
<Inicio de la etiqueta>
</Fin de la etiqueta>
Existen ciertas excepciones con el fin de las etiquetas, ya que algunas usualmente sólo se utilizan con el inicio de la etiqueta, ejemplos de esto son las etiquetas BR (salto de línea), IMG (etiqueta para poner una imagen), entre otras.
También es muy importante la estructura de un código de HTML, nuestro código siempre debe iniciar con la etiqueta HTML.
Ejemplo de la estructura del código HTML en un pequeño ejemplo del cuerpo de un código de HTML con algunos efectos en el texto como cursiva, subrayado, negrita.
Finalmente, sólo nos falta saber dónde escribir código en HTML y para ello es necesario un editor de texto como el bloc de notas, pero siempre es mejor una aplicación dedicada a esto como Sublime Text debido a que facilita la escritura de código HTML.
¿HTML es fácil de escribir? no hay mayor obstáculo en el aprendizaje que tus propias ganas de aprender, además del hecho de que desde niños hemos aprendido a distinguir y clasificar todo a nuestro alrededor y es básicamente de lo que se encarga HTML
Algunas etiquetas más básicas de HTML
El elemento raíz
<html> Concreta el contenedor principal
Metadatos del documento
<head> Determina el encabezado del documento
<title> Concreta el título del documento
<base> Define la base de la URL para los URL relativos
<link> Fija Información relacional para el documento
<meta> Precisa Variable para el documento
<style> Delimita Atributos presentacionales
Secciones
<body> Detalla El cuerpo del documento
<article> Especifica Contenido redistribuible
<section> Define una sección
<nav> Concreta Sección de navegación
<aside> Determina Contenido sólo ligeramente relacionado
<h1> Fija Encabezado de nivel 1
<h2> Delimita Encabezado de nivel 2
<h3> Precisa Encabezado de nivel 3
<h4> Concreta Encabezado de nivel 4
<h5> Aclara Encabezado de nivel 5
<h6> Destaca Encabezado de nivel 6
<hgroup> Agrupa encabezados consecutivos
<header> Define El encabezado de una sección
<footer> Fija El pie de una sección
<address> Describe Información de contacto del autor
Agrupación de contenido
<p> Párrafo
<hr> Separador de contenido
<pre> Bloque de texto preformateado
<blockquote> Cita en forma de bloque
<ol> Lista ordenada
<ul> Lista no ordenada
<menu> Inserta una barra de menú
<li> Ítem de una lista
<dl> Lista de descripciones
<dt> Término en una lista de descripciones
<dd> Descripción en una lista de descripciones
<figure> Información autocontenida
<figcaption> Título para una figura
<main> Contenido principal de una sección
<div> Contenedor genérico para bloques de texto
Agrupación de contenido
<p> Párrafo
<hr> Separador de contenido
<pre> Bloque de texto preformateado
<blockquote> Cita en forma de bloque
<ol> Lista ordenada
<ul> Lista no ordenada
<menu> Inserta una barra de menú
<li> Ítem de una lista
<dl> Lista de descripciones
<dt> Término en una lista de descripciones
<dd> Descripción en una lista de descripciones
<figure> Información autocontenida
<figcaption> Título para una figura
<main> Contenido principal de una sección
<div> Contenedor genérico para bloques de texto
Semántica de texto
<a> Hypervínculo
<em> Texto con énfasis
<strong> Texto con énfasis fuerte
<small> Comentario secundario
<s> Contenido que ya no es preciso o relevante
<cite> Cita o referencia
<q> Cita en forma de línea
<dfn> Término definido en el texto circundante
<abbr> Término abreviado
<ruby> Texto con anotaciones Ruby
<data>Información apta para programas