path: root/files/es/learn/html/introduction_to_html/getting_started/index.html

---
title: Empezar con HTML
slug: Learn/HTML/Introduction_to_HTML/Getting_started
tags:
  - Atributos
  - Elemento
  - Guía
  - HTML
  - Principiante
  - comentários
translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
original_slug: Learn/HTML/Introduccion_a_HTML/iniciar
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary">En este artículo vamos a exponer lo más básico del HTML. Para comenzar definiremos elementos, atributos y el resto de términos importantes que quizá ya te suenen y qué función cumplen dentro del lenguaje. También explica dónde encajan estos en HTML. Aprenderás cómo se estructuran los elementos HTML, cómo se estructura una página HTML típica y otras características básicas importantes del lenguaje. Por el camino, también iremos practicando con algo de HTML.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerrequisitos:</th>
   <td>Conocimientos básicos de informática, {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "tener instalado el software básico")}} y conocimientos básicos de cómo {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "trabajar con archivos")}}.</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Familiarizarte con el lenguaje HTML, y adquirir algo de práctica escribiendo unos pocos elementos HTML.</td>
  </tr>
 </tbody>
</table>

<h2 id="¿Qué_es_el_HTML">¿Qué es el HTML?</h2>

<p>{{Glossary("HTML")}} ("<em>Hypertext Markup Language</em>") no es un lenguaje de programación. Es un <em>lenguaje de marcado</em> que le dice a los navegadores web cómo estructurar las páginas web que estás visitando. Puede ser tan complejo o tan simple como desee el desarrollador web. El HTML consiste en una serie de {{Glossary("Element", "elementos")}}, que puedes utilizar para encerrar, delimitar o <em>marcar</em> diferentes partes del contenido para hacer que aparezcan de una cierta manera, o actúen de determinada forma. Las {{Glossary("Tag", "etiquetas")}} que delimitan un fragmento de contenido pueden hacer que dicho contenido enlace con otra página, ponga una palabra en cursiva, etcétera. Por ejemplo, dada la siguiente línea de contenido:</p>

<pre class="brush: bash notranslate">Mi gato es muy gruñón</pre>

<p>Si queremos que la línea sea independiente de otras, podemos especificar que es un párrafo encerrándola con una etiqueta de elemento de párrafo ({{htmlelement("p")}}):</p>

<pre class="brush: html notranslate">&lt;p&gt;Mi gato es muy gruñón&lt;/p&gt;</pre>

<div class="note">
<p><strong>Nota</strong>: Las etiquetas en HTML no distinguen entre mayúsculas y minúsculas. Así que se pueden escribir tanto en mayúsculas como en minúsculas. Por ejemplo, una etiqueta {{htmlelement("title")}} se puede escribir como <code>&lt;title&gt;</code>, <code>&lt;TITLE&gt;</code>, <code>&lt;Title&gt;</code>, <code>&lt;TiTle&gt;</code>, etc., y funcionará correctamente. La mejor práctica, sin embargo, es escribir todas las etiquetas en minúsculas para mantener la coherencia y legibilidad, entre otros motivos.</p>
</div>

<h2 id="Anatomía_de_un_elemento_HTML">Anatomía de un elemento HTML</h2>

<p>Exploremos un poco el elemento párrafo:</p>

<p><img alt="Anatomía de los elementos HTML" src="https://mdn.mozillademos.org/files/11913/htmlexp.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>

<p>Las principales partes de nuestro elemento son:</p>

<ul>
 <li>La <strong>etiqueta de apertura</strong>: consiste en el nombre del elemento (en este caso, <code>p</code>), encerrado entre <strong>paréntesis angulares</strong> de apertura y cierre. Esta etiqueta de apertura marca dónde comienza el elemento o comienza a tener efecto. En este ejemplo, precede al comienzo del texto del párrafo.</li>
 <li>El <strong>contenido</strong>: Este es el contenido del elemento. En este ejemplo, es el texto del párrafo.</li>
 <li>La <strong>etiqueta de cierre</strong>: Es lo mismo que la etiqueta de apertura, excepto que incluye una barra diagonal antes del nombre del elemento. Esto indica dónde termina el elemento; en este caso, dónde finaliza el párrafo. No incluir una etiqueta de cierre es un error común de principiante, y puede conducir a extraños resultados.</li>
</ul>

<p>El <strong>elemento</strong> lo conforman la etiqueta de apertura, seguida del contenido, seguido de la etiqueta de cierre.</p>

<h3 id="Aprendizaje_activo_crear_tu_primer_elemento_HTML">Aprendizaje activo: crear tu primer elemento HTML</h3>

<p>Edita la siguiente línea en el área <em>Entrada</em> envolviéndola con las etiquetas <code>&lt;em&gt;</code> y <code>&lt;/em&gt;</code>. Para <em>abrir el elemento</em>, coloca la etiqueta de apertura <code>&lt;em&gt;</code> al principio de la línea. Para <em>cerrar el elemento</em>, coloca la etiqueta de cierre <code>&lt;/em&gt;</code> al final de la línea. ¡Obtienes una línea en cursiva! Puedes ver tus cambios actualizados automáticamente en la caja de texto de <em>Salida</em>.</p>

<p>Si te equivocas, siempre puedes volver al código anterior mediante el botón <em>Restablecer</em>. Si te quedas realmente atascado, pulsa el botón <em>Mostrar la solución</em> para ver la solución.</p>

<div class="hidden">
<h6 id="Código_reproducible">Código reproducible</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;Código editable&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;

&lt;textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"&gt;
  Este es mi texto.
&lt;/textarea&gt;

&lt;div class="controls"&gt;
  &lt;input id="reset" type="button" value="Restablecer" /&gt;
  &lt;input id="solution" type="button" value="Mostrar solución" /&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">html {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
</pre>

<pre class="brush: js notranslate">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Mostrar solución';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Mostrar solución') {
    textarea.value = solutionEntry;
    solution.value = 'Ocultar solución';
  } else {
    textarea.value = userEntry;
    solution.value = 'Mostrar solución';
  }
  updateCode();
});

var htmlSolution = '&lt;em&gt;Este es mi texto.&lt;/em&gt;';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// captura la tecla de tabulación en el área de texto y en su lugar
// hace que se escriba una tabulación en la posición del cursor

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto

textarea.onkeyup = function(){
  // Solo queremos guardar el estado cuando se muestra el código de usuario,
  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
  if(solution.value === 'Mostrar solución') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Código_reproducible', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="Elementos_anidados">Elementos anidados</h3>

<p>Se pueden poner elementos dentro de otros elementos. Esto se llama <strong>anidamiento</strong>. Si quisiéramos decir que nuestro gato es <strong>muy</strong> gruñón, podríamos encerrar la palabra <em>muy</em> en un elemento {{htmlelement("strong")}} para que aparezca destacada.</p>

<pre class="brush: html notranslate">&lt;p&gt;Mi gato es &lt;strong&gt;muy&lt;/strong&gt; gruñón.&lt;/p&gt;</pre>

<p>Hay una forma correcta e incorrecta de anidar. En el ejemplo anterior, primero abrimos el elemento <code>p</code>, luego abrimos el elemento <code>strong</code>. Para un anidamiento adecuado, primero debemos cerrar el elemento <code>strong</code>, antes de cerrar el <code>p</code>.</p>

<p>El siguiente es un ejemplo de la forma <em>incorrecta</em> de anidar:</p>

<pre class="example-bad brush: html notranslate">&lt;p&gt;Mi gato es &lt;strong&gt;muy gruñón.&lt;/p&gt;&lt;/strong&gt;</pre>

<p>Los elementos tienen que abrirse y cerrarse correctamente para que estén claramente dentro o fuera el uno del otro. Con el tipo de superposición en el ejemplo anterior, el navegador tiene que adivinar tu intención. Este tipo de adivinanzas puede producir resultados inesperados.</p>

<h3 id="Elementos_de_bloque_y_elementos_en_línea">Elementos de bloque y elementos en línea</h3>

<p>Hay dos categorías importantes de elementos en HTML — Estos son los elementos de bloque y los elementos en línea.</p>

<ul>
 <li>Los elementos de bloque forman un bloque visible en la página. Aparecerán en una línea nueva después de cualquier contenido anterior. Cualquier contenido que vaya después también aparecerá en una línea nueva. Los elementos a nivel de bloque suelen ser elementos estructurales de la página. Por ejemplo, un elemento a nivel de bloque puede representar encabezados, párrafos, listas, menús de navegación o pies de página. Un elemento a nivel de bloque no estaría anidado dentro de un elemento en línea, pero podría estar anidado dentro de otro elemento a nivel de bloque.</li>
 <li>Los elementos en línea están contenidos dentro de elementos de bloque y delimitan solo pequeñas partes del contenido del documento; (no párrafos enteros o agrupaciones de contenido) Un elemento en línea no hará que aparezca una nueva línea en el documento. Suele utilizarse con texto. Por ejemplo es el caso de un elemento {{htmlelement("a")}} (hipervínculo) o elementos de énfasis como {{htmlelement("em")}} o {{htmlelement("strong")}}.</li>
</ul>

<p>Considera el siguiente ejemplo:</p>

<pre class="brush: html notranslate">&lt;em&gt;primero&lt;/em&gt;&lt;em&gt;segundo&lt;/em&gt;&lt;em&gt;tercero&lt;/em&gt;

&lt;p&gt;cuarto&lt;/p&gt;&lt;p&gt;quinto&lt;/p&gt;&lt;p&gt;sexto&lt;/p&gt;
</pre>

<p>{{htmlelement("em")}} es un elemento en línea. Así, como puedes observar, los tres primeros elementos se sitúan en la misma línea, uno tras otro sin espacio entre ellos. Por otro lado, {{htmlelement("p")}} es un elemento a nivel de bloque. Cada elemento <em>p</em> aparece en una nueva línea, con un espacio arriba y abajo. (El espaciado se debe al {{web.link("/es/docs/Learn/CSS/Introduction_to_CSS", "estilo CSS")}} predeterminado que el navegador aplica a los párrafos).</p>

<p>{{ EmbedLiveSample('Elementos_de_bloque_y_elementos_en_línea', 700, 200, "", "") }}</p>

<div class="note">
<p><strong>Nota</strong>: HTML5 redefinió las categorías de elementos: consulta <a href="https://html.spec.whatwg.org/multipage/indices.html#element-content-categories">Categorías de contenido de elementos</a>. Si bien estas definiciones son más precisas y menos ambiguas que sus predecesoras, las nuevas definiciones son mucho más complicadas de entender que <em>block</em> e <em>inline </em>. Este artículo seguirá con estos dos términos.</p>
</div>

<div class="note">
<p><strong>Nota</strong>: Los términos «en bloque» (block) y «en línea» (inline), tal como se usan en este tema, no se deberían confundir con {{web.link("/es/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes", "los tipos de casillas de CSS")}} que se conocen con el mismo nombre. Aunque de manera predeterminada están relacionados, el hecho de cambiar el tipo de aspecto visual del CSS no cambia la categoría del elemento ni afecta a aquellos elementos que pueda contener. Una de las razones por las que HTML5 abandonó el uso de estos términos fue para evitar este tipo de confusión.</p>
</div>

<div class="note">
<p><strong>Nota</strong>: Puedes encontrar referencias útiles que incluyen listas de elementos de bloque y elementos en línea. Consulta {{web.link("/es/docs/Web/HTML/Block-level_elements", "Elementos en bloque")}} y {{web.link("/es/docs/Web/HTML/Elementos_en_línea", "Elementos en línea")}}.</p>
</div>

<h3 id="Elementos_vacíos">Elementos vacíos</h3>

<p>No todos los elementos siguen el patrón de etiqueta de apertura, contenido y etiqueta de cierre. Algunos elementos consisten solo en una etiqueta única, que se utiliza generalmente para insertar/incrustar algo en el documento en el lugar donde se le quiere incluir. Por ejemplo, el elemento {{htmlelement("img")}} inserta una imagen en la página:</p>

<pre class="brush: html notranslate">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>

<p>Este texto mostrará lo siguiente en tu página:</p>

<p>{{ EmbedLiveSample('Elementos_vacíos', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>

<div class="note">
<p><strong>Nota</strong>: Los elementos vacíos en ocasiones también se llaman elementos <em>nulos</em> o <em>vanos</em> (<em>void elements</em>).</p>
</div>

<h2 id="Atributos">Atributos</h2>

<p>Los elementos también pueden tener atributos. Los atributos tienen este aspecto:</p>

<p><img alt="atributo html" src="https://mdn.mozillademos.org/files/11915/htmlatributos.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>

<p>Los atributos contienen información extra sobre el elemento que no se mostrará en el contenido. En este caso, el atributo <code>class</code> asigna al elemento un identificador que se puede utilizar para dotarlo de información de estilo.</p>

<p>Un atributo debería tener:</p>

<ul>
 <li>Un espacio entre este y el nombre del elemento. (Para un elemento con más de un atributo, los atributos también deben estar separados por espacios).</li>
 <li>El nombre del atributo, seguido por un signo igual.</li>
 <li>Un valor del atributo, rodeado de comillas de apertura y cierre.</li>
</ul>

<h3 id="Aprendizaje_activo_Añadir_atributos_a_un_elemento">Aprendizaje activo: Añadir atributos a un elemento</h3>

<p>Otro ejemplo de un elemento es {{htmlelement("a")}}. Esto significa <em>ancla</em>. Una ancla puede convertir el texto que encierra en un hipervínculo. Las anclas pueden tener varios atributos, pero varios son como sigue:</p>

<ul>
 <li><strong><code>href</code></strong>: El valor de este atributo indica la dirección web a la que se quiere que apunte el enlace, que será hacia donde nos lleve el navegador cuando se haga clic sobre el elemento. Por ejemplo, <code>href="https://www.mozilla.org/"</code>.</li>
 <li><strong><code>title</code></strong>: El atributo <code>title</code> añade información adicional sobre el enlace, como puede ser el título de la página que vinculas. Por ejemplo, <code>title="La página de inicio de Mozilla"</code>. Esta información aparecerá cuando se le pase el ratón por encima.</li>
 <li><strong><code>target</code></strong>: El atributo <code>target</code> especifica el contexto de navegación que va a usar para mostrar el enlace. Por ejemplo, <code>target="_blank"</code> abrirá el enlace en una nueva pestaña. Si quieres mostrar el enlace en la pestaña activa, simplemente omite este atributo.</li>
</ul>

<p>Edita la línea de abajo en el área de <em>Entrada</em> para convertirlo en un enlace a tu sitio web favorito.</p>

<ol>
 <li>Añade el elemento <code>&lt;a&gt;</code>.</li>
 <li>Añade el atributo <code>href</code> y el atributo <code>title</code>.</li>
 <li>Especifica el atributo <code>target</code> para abrir el enlace en una nueva pestaña.</li>
</ol>

<p>Los cambios se actualizarán inmediatamente en la zona de <em>Salida</em>. Deberías ver un enlace que mostrará el contenido del atributo <code>title</code> cuando pases el ratón encima, y que te llevará a la dirección web indicada por el atributo <code>href</code> cuando hagas clic. Recuerda que debes incluir un espacio entre el nombre del elemento y cada atributo.</p>

<p>Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si te quedas realmente atascado, pulsa el botón <em>Mostrar la solución</em> para ver la solución.</p>

<div class="hidden">
<h6 id="Código_reproducible_2">Código reproducible 2</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;

&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;Código editable&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;

&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
  &amp;lt;p&amp;gt;Un enlace a mi sitio web favorito.&amp;lt;/p&amp;gt;
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Restablecer"&gt;
  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
&lt;/div&gt;</pre>

<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js notranslate">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Mostrar solución';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Mostrar solución') {
    textarea.value = solutionEntry;
    solution.value = 'Ocultar solución';
  } else {
    textarea.value = userEntry;
    solution.value = 'Mostrar solución';
  }
  updateCode();
});

var htmlSolution = '&lt;p&gt;Un enlace a mi &lt;a href="https://www.mozilla.org/" title="La página de inicio de Mozilla" target="_blank"&gt;sitio web favorito&lt;/a&gt;.&lt;/p&gt;';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// captura la tecla de tabulación en el área de texto y en su lugar
// hace que se escriba una tabulación en la posición del cursor

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto

textarea.onkeyup = function(){
  // Solo queremos guardar el estado cuando se muestra el código de usuario,
  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
  if(solution.value === 'Mostrar solución') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Código_reproducible_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="Atributos_booleanos">Atributos booleanos</h3>

<p>En ocasiones puedes ver atributos escritos sin valor. Esto está permitido. Estos se denominan atributos booleanos. Los atributos booleanos solo pueden tener un valor, que generalmente es el mismo que el nombre del atributo. Por ejemplo, considera el atributo {{htmlattrxref("disabled", "input")}}, que puedes asignar a los elementos de entrada del formulario. (Usa esto para <em>deshabilitar</em> los elementos de entrada del formulario para que el usuario no pueda realizar entradas. Los elementos desactivados suelen tener una apariencia atenuada). Por ejemplo:</p>

<pre class="brush: bash notranslate">&lt;input type="text" disabled="disabled"&gt;</pre>

<p>De manera abreviada, también es posible escribirlo como se describe a continuación (además, se ha incluido un elemento de entrada de formulario no desactivado como referencia, para dar una idea más precisa de lo que sucede):</p>

<pre class="brush: html notranslate">&lt;!-- el uso del atributo deshabilitado evita que el usuario final introduzca texto en el cuadro de entrada --&gt;
&lt;input type="text" disabled&gt;

&lt;!-- se permite la entrada de texto, ya que no contiene el atributo deshabilitado --&gt;
&lt;input type="text"&gt;
</pre>

<p>Como referencia, el ejemplo anterior también incluye un elemento de entrada de formulario no deshabilitado. El HTML del ejemplo anterior produce este resultado:</p>

<p>{{ EmbedLiveSample('Atributos_booleanos', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="Omitir_comillas_en_valores_de_atributos">Omitir comillas en valores de atributos</h3>

<p>Cuando observas diferentes páginas web, puedes encontrarte con todo tipo de estilos de etiquetado extraños, que incluyen valores de atributos sin comillas. Esto se permite en ciertas circunstancias, pero interrumpirá la edición en otras. Por ejemplo, si volvemos a revisar el ejemplo del enlace, sería posible escribir una versión básica con solo el atributo <code>href</code>, así:</p>

<pre class="brush: html notranslate">&lt;a href=https://www.mozilla.org/&gt;mi sitio web favorito&lt;/a&gt;</pre>

<p>Sin embargo, las cosas no funcionarán cuando a este estilo se añada el atributo <code>title</code>:</p>

<pre class="example-bad brush: html notranslate">&lt;a href=https://www.mozilla.org/ title=The Mozilla homepage&gt;mi sitio web favorito&lt;/a&gt;</pre>

<p>En este punto el navegador interpretará mal el cambio y pensará que el atributo <code>title</code> corresponde a tres atributos: un atributo <code>title</code> con el valor <em>The</em> y dos atributos booleanos: <code>Mozilla</code> y <code>homepage</code>. ¡Obviamente, esta no es la intensión! Causará errores o comportamientos inesperados, como puedes ver en el ejemplo en vivo a continuación. ¡Intenta colocar el cursor sobre el enlace para ver el texto del título!</p>

<p>{{ EmbedLiveSample('Omitir_comillas_en_valores_de_atributos', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>

<p>Incluye <strong>siempre</strong> las comillas de atributos. Evita tales problemas y da como resultado un código más legible.</p>

<h3 id="¿Comillas_simples_o_dobles">¿Comillas simples o dobles?</h3>

<p>En este artículo todos los atributos se han incluido en comillas dobles. Sin embargo, se pueden ver comillas simples en algún código HTML. Es una cuestión de estilo. Puedes elegir libremente cuál prefieres. Ambas líneas de código son equivalentes:</p>

<pre class="brush: html notranslate">&lt;a href="http://www.ejemplo.com"&gt;Un enlace a mi ejemplo.&lt;/a&gt;

&lt;a href='http://www.ejemplo.com'&gt;Un enlace a mi ejemplo.&lt;/a&gt;</pre>

<p>Asegúrate de no mezclar ambos tipos de comillas. El siguiente ejemplo muestra un tipo de mezcla de comillas que saldrá mal:</p>

<pre class="example-bad brush: html notranslate">&lt;a href="http://www.ejemplo.com'&gt;Un enlace a mi ejemplo.&lt;/a&gt;</pre>

<p>Si utilizas un tipo de comillas en tu documento HTML, puedes incluir el otro tipo de comillas para tus valores de atributo sin que esto te cause problemas:</p>

<pre class="brush: html notranslate">&lt;a href="http://www.ejemplo.com" title="¿A que es 'divertido'"&gt;Un enlace a mi ejemplo.&lt;/a&gt;</pre>

<p>Sin embargo, si deseas anidar unas comillas dentro de otras del mismo tipo (ya sea simples o dobles), tendrás que utilizar entidades HTML para las comillas. Por ejemplo, el siguiente código no va a funcionar:</p>

<pre class="example-bad brush: html notranslate">&lt;a href='http://www.ejemplo.com' title='¿A que es 'divertido'?'&gt;Un enlace a mi ejemplo.&lt;/a&gt;</pre>

<p>Así que tendrás que hacer esto:</p>

<pre class="brush: html notranslate">&lt;a href='http://www.ejemplo.com' title='¿A que es &amp;apos;divertido&amp;apos;?'&gt;Un enlace a mi ejemplo.&lt;/a&gt;</pre>

<h2 id="Anatomía_de_un_documento_HTML">Anatomía de un documento HTML</h2>

<p>Los elementos HTML no son muy útiles por sí mismos. Ahora veremos cómo combinar los elementos individuales para formar una página HTML completa:</p>

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Mi página de prueba&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Esta es mi página&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>Aquí tenemos:</p>

<ol>
 <li><code>&lt;!DOCTYPE html&gt;</code>: El elemento <em>doctype</em>. En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los <em>doctypes</em> servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML. Un elemento <em>doctype</em> de aquella época podía parecerse a esto:

  <pre class="brush: bash notranslate">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
  En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente. <code>&lt;!DOCTYPE html&gt;</code> es la secuencia de caracteres más corta que se acepta como elemento <em>doctype</em> válido. Eso es lo único que realmente necesitas saber.</li>
 <li><code>&lt;html&gt;&lt;/html&gt;</code>: El elemento <code>&lt;html&gt;</code>. Este elemento envuelve todo el contenido de la página. A veces se lo conoce como el elemento raíz.</li>
 <li><code>&lt;head&gt;&lt;/head&gt;</code>: El elemento <code>&lt;{{htmlelement("head")}}&gt;</code> (cabecera). Este elemento actúa como contenedor para todos los parámetros que quieras incluir en el documento HTML que <em>no serán</em> visibles a los visitantes de la página. Incluye cosas como palabras clave y la descripción de la página que quieras mostrar en los resultados de búsqueda, así como la hoja de estilo para formatear nuestro contenido, declaraciones de codificación de caracteres y más. Aprenderás más acerca de esto en el siguiente artículo de la serie.</li>
 <li><code>&lt;meta charset="utf-8"&gt;</code>: Este elemento establece que tu documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos. En resumen: puede gestionar cualquier contenido textual que pongas en tu documento. No hay razón para no configurar este valor y te puede ayudar a evitar problemas más adelante.</li>
 <li><code>&lt;title&gt;&lt;/title&gt;</code>: El elemento {{htmlelement("title")}}. Este establece el título de la página, que es el título que aparece en la pestaña del navegador en la que se carga la página. El título de la página también se utiliza para describir la página cuando se marca como favorita.</li>
 <li><code>&lt;body&gt;&lt;/body&gt;</code>: El elemento <code>&lt;body&gt;</code>. Contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa.</li>
</ol>

<h3 id="Aprendizaje_activo_Añadir_algunas_características_a_un_documento_HTML">Aprendizaje activo: Añadir algunas características a un documento HTML</h3>

<p>Si quieres escribir algo de HTML en tu ordenador local para experimentar, puedes:</p>

<ol>
 <li>Copiar el ejemplo de la página HTML del punto anterior.</li>
 <li>Crear un archivo nuevo en un editor de texto.</li>
 <li>Pegar el código en el nuevo archivo de texto.</li>
 <li>Guardar el archivo como <code>index.html</code>.</li>
</ol>

<div class="note">
<p><strong>Nota</strong>: También puedes encontrar esta plantilla básica de HTML en el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">repositorio GitHub del Área MDN Learning</a>.</p>
</div>

<p>Ahora puedes abrir este archivo en un navegador web para ver cómo se ve el código renderizado. Edita el código y actualiza el navegador para ver cuál es el resultado. En principio se verá algo así:</p>

<p><img alt="Una sencilla página HTML que dice esta es mi página" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">En este ejercicio, puedes editar el código en tu ordenador como se indica arriba, o puedes editarlo en la ventana editable que tienes a continuación (la ventana editable representa solo el contenido del elemento {{htmlelement("body")}}, en este caso). Intenta reproducir los siguientes pasos:</p>

<ul>
 <li>Justo debajo de la etiqueta de apertura {{htmlelement("body")}}, añade un título principal para el documento. Este deberá estar dentro de una etiqueta de apertura <code>&lt;h1&gt;</code> y una etiqueta de cierre <code>&lt;/h1&gt;</code>.</li>
 <li>Edita el contenido del párrafo e incluye algún texto sobre algo que te interese.</li>
 <li>Pon las palabras importantes dentro de etiquetas <code>&lt;strong&gt;</code> de apertura y <code>&lt;/strong&gt;</code> de cierre para que destaquen en negrita.</li>
 <li>Añade un enlace a tu párrafo, como se ha explicado {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element", "anteriormente en este mismo artículo")}}.</li>
 <li>Agrega una imagen a tu documento. Colócala debajo del párrafo, como {{web.link("/es/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements", "se explicó anteriormente en el artículo")}}. Ganarás puntos extra si consigues enlazar a una imagen diferente (de tu propio ordenador o de cualquier otro lugar de la web).</li>
</ul>

<p>Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si te quedas realmente atascado, pulsa el botón <em>Mostrar la solución</em> para ver la solución.</p>

<div class="hidden">
<h6 id="Código_reproducible_3">Código reproducible 3</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;

&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;Código editable&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;

&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
  &amp;lt;p&amp;gt;Esta es mi página&amp;lt;/p&amp;gt;
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Restablecer"&gt;
  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
&lt;/div&gt;</pre>

<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}

h1 {
 color: blue;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

img {
  max-width: 100%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js notranslate">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Mostrar solución';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Mostrar solución') {
    textarea.value = solutionEntry;
    solution.value = 'Ocultar solución';
  } else {
    textarea.value = userEntry;
    solution.value = 'Mostrar solución';
  }
  updateCode();
});

var htmlSolution = '&lt;h1&gt;Un poco de música&lt;/h1&gt;&lt;p&gt;Realmente disfruto &lt;strong&gt;tocar la batería&lt;/strong&gt;. Uno de mis bateristas favoritos es Neal Peart, que toca en la banda &lt;a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="artículo de Wikipedia de"&gt;Rush&lt;/a&gt;.\ Mi álbum favorito de Rush actualmente es &lt;a href="http://www.deezer.com/album/942295"&gt;Fotografías de la película&lt;/a&gt;.&lt;/p&gt;\ &lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// captura la tecla de tabulación en el área de texto y en su lugar
// hace que se escriba una tabulación en la posición del cursor

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto

textarea.onkeyup = function(){
  // Solo queremos guardar el estado cuando se muestra el código de usuario,
  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
  if(solution.value === 'Mostrar solución') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Código_reproducible_3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="Los_espacios_en_blanco_en_HTML">Los espacios en blanco en HTML</h3>

<p>En los ejemplos anteriores se han incluido espacios en blanco y saltos de línea en el código. Esto realmente no es necesario. Los dos siguientes fragmentos de código son equivalentes:</p>

<pre class="brush: html notranslate">&lt;p&gt;Los perros son tontos.&lt;/p&gt;

&lt;p&gt;Los    perros        son
         tontos.&lt;/p&gt;</pre>

<p>No importa cuántos espacios en blanco se utilicen (incluye tanto caracteres de espacio como saltos de línea) el intérprete de HTML reduce cada secuencia de espacio en blanco a un único espacio al interpretar el código. Entonces, ¿por qué utilizar espacios en blanco? La respuesta está en la legibilidad.<br>
 <br>
 Es más fácil comprender lo que está sucediendo en tu código si lo tienes bien formateado. En nuestro HTML cada elemento anidado está sangrado dos espacios más con respecto al exterior. Depende de ti qué estilo de formato utilizas (cuántos espacios para cada nivel de sangría, por ejemplo) pero debes plantearte el uso de algún tipo de formato.</p>

<h2 id="Referencias_a_entidades_Inclusión_de_caracteres_especiales_en_HTML">Referencias a entidades: Inclusión de caracteres especiales en HTML</h2>

<p>En HTML, los caracteres <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> y <code>&amp;</code> son caracteres especiales. Forman parte de la sintaxis HTML. Entonces, ¿cómo incluye uno de estos caracteres especiales en tu texto? Por ejemplo, si deseas utilizar un signo comercial o menor que, y no hacer que se interprete como código.</p>

<p>Haces esto con referencias de caracteres. Estos son códigos especiales que representan caracteres, para ser usados en estas circunstancias exactas. Cada referencia de caracter comienza con un signo de ampersand (&amp;) y finaliza con un punto y coma (;).</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Caracter literal</th>
   <th scope="col">Equivalente de referencia de caracteres</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>&lt;</td>
   <td>&amp;lt;</td>
  </tr>
  <tr>
   <td>&gt;</td>
   <td>&amp;gt;</td>
  </tr>
  <tr>
   <td>"</td>
   <td>&amp;quot;</td>
  </tr>
  <tr>
   <td>'</td>
   <td>&amp;apos;</td>
  </tr>
  <tr>
   <td>&amp;</td>
   <td>&amp;amp;</td>
  </tr>
 </tbody>
</table>

<p>El equivalente de referencia de caracter podría recordarse fácilmente porque el texto que utiliza se puede ver como menor que para '&amp;lt;' , cita para ' &amp;quot; ' y de manera similar para otros. Para obtener más información sobre la referencia de entidad, consulta {{interwiki("wikipedia", "Anexo:Referencias a entidades de caracteres XML y HTML")}} en (Wikipedia).<br>
 <br>
 Considera los dos siguientes párrafos:</p>

<pre class="brush: html notranslate">&lt;p&gt;En HTML, defines un párrafo con el elemento &lt;p&gt;.&lt;/p&gt;

&lt;p&gt;En HTML, defines un párrafo con el elemento &amp;lt;p&amp;gt;.&lt;/p&gt;</pre>

<p>En la salida en vivo de abajo, puedes ver que el primer párrafo salió mal. El navegador interpreta la segunda instancia de <code>&lt;p&gt;</code> como el inicio de un nuevo párrafo. El segundo párrafo se ve bien porque hemos remplazado <code>&lt;</code> y <code>&gt;</code> por sus referencias correspondientes.</p>

<p>{{ EmbedLiveSample('Referencias_a_entidades_Inclusión_de_caracteres_especiales_en_HTML', 700, 200) }}</p>

<div class="note">
<p><strong>Nota</strong>: En la Wikipedia se puede localizar un listado de todas las referencias de entidades de caracteres HTML disponibles: {{interwiki("wikipedia", "Anexo:Referencias a entidades de caracteres XML y HTML")}}. Observa que no necesitas usar ninguna referencia de entidad más para ningún otro de estos símbolos porque los navegadores modernos gestionan estos símbolos correctamente siempre y cuando en tu HTML hayas {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "establecido la codificación de el juego de caracteres universal UTF-8", "#Specifying_your_document's_character_encoding")}}.</p>
</div>

<h2 id="Comentarios_HTML">Comentarios HTML</h2>

<p>En HTML hay un mecanismo para escribir comentarios en el código. Los comentarios son ignorados por el navegador y, por tanto, son invisibles para el usuario. El propósito de los comentarios es permitirte incluir notas en el código para explicar tu lógica o codificación. Esto es muy útil si regresas a un código base después de estar ausente el tiempo suficiente como para no recordarlo por completo. Del mismo modo, los comentarios son invaluables ya que diferentes personas están realizando cambios y actualizaciones.</p>

<p>Para convertir en un comentario una sección de contenido de tu archivo HTML, debes delimitarlo con los marcadores especiales <code>&lt;!--</code> y <code>--&gt;</code>. Por ejemplo:</p>

<pre class="brush: html notranslate">&lt;p&gt;No soy un comentario&lt;/p&gt;

&lt;!-- &lt;p&gt;¡Yo sí!&lt;/p&gt; --&gt;</pre>

<p>Como puedes ver a continuación, el primer párrafo aparece, pero el segundo no.</p>

<p>{{ EmbedLiveSample('Comentarios_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="Resumen">Resumen</h2>

<p>Has llegado al final del artículo. Espero que hayas disfrutado del recorrido los conceptos básicos del HTML.<br>
 En este punto ya deberías entender el lenguaje, cómo funciona en un nivel básico y deberías poder escribir algunos elementos y atributos. También deberías poder escribir algunos elementos y atributos. Los artículos posteriores de este módulo profundizan en algunos de los temas aquí presentados, además de presentar otros conceptos del lenguaje.</p>

<div class="note">
<p><strong>Nota</strong>: En este punto, a medida que empieces a aprender más sobre HTML, es posible que también desees comenzar a explorar los conceptos básicos de las Hojas de estilo en cascada (<em>Cascading style sheets</em>) o {{web.link("/es/docs/Learn/CSS", "CSS")}}. CSS, es el lenguaje utilizado para estilizar páginas web. (por ejemplo, cambiar fuentes o colores, o alterar el diseño de la página) HTML y CSS funcionan bien juntos, como pronto descubrirás.</p>
</div>

<h2 id="Ve_también">Ve también</h2>

<ul>
 <li>{{web.link("/es/docs/Web/HTML/Applying_color", "Aplicación de color a elementos HTML mediante CSS")}}</li>
</ul>

<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>

<div></div>

<h2 id="En_este_módulo">En este módulo</h2>

<ul>
 <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Empezar con HTML</a></li>
 <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">¿Qué hay en la cabecera? Metadatos en HTML</a></li>
 <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fundamentos de texto HTML</a></li>
 <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creando hipervínculos</a></li>
 <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formateo de texto avanzado</a></li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li>
 <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Depurar HTML</a></li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcando para una carta")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li>
</ul>