# data[].attributes.body
Al finalizar esta lección, seréis capaces de comprender los fundamentos de HTML y aplicarlos para diseñar y crear su propia página web, utilizando diferentes elementos y etiquetas HTML.

# data[].attributes.body
Este vídeo debe cubrir la historia, la importancia y los fundamentos del HTML.

# data[].attributes.attachment_link.title
Curso Básico de HTML desde 0 - Introducción

# data[].attributes.body
Construye una estructura de página web simple, enfocándose en el uso de etiquetas comunes de HTML.

# data[].attributes.attachment_link.readable_text
Estructura básica de una página en HTML5

En HTM la estructura interna básica de una página web se ha simplificado, reduciendo el código innecesario hasta quedarse con el esqueleto básico, que sería el siguiente:

 <!doctype html>
 <html>

<head>
<head> <meta charset="utf-8"/> <title>Título de la web</title> </head>

<body>
<body> Contenido de la web </body>
</html>

Cada fichero HTML está compuesto de dos partes: el <head> y el <body>

¿Qué es y qué contiene el <head>?

El <head> es una parte de la web donde colocamos todas aquellas etiquetas (que no se van a visualizar), pero que sirven para indicar todas las características que el navegador necesita, como por ejemplo:

La etiqueta charset es una de las impriscindibles, ya que indica la codificación que tendrá la página. Con un valor de utf-8 se mostrarán símbolos como la "ñ", "ç" o los acentos correctamente.

El texto indicado dentro de la etiqueta <title> se mostrará en la pestaña del navegador. Además ser el que se muestre en las búsquedas de los diferentes buscadores y es un elemento importante (a nivel de SEO) para el posicionamiento de la página.

Dentro del atributo content=" " escribiremos el texto que queremos que aparezca como descripcion de nuestra página cuando ésta aparezca dentro de los resultados de búsqueda de los buscadores. No influye en el posicionamiento, pero si puede condicionar a que los usuarios hagan clic y accedan en un mayor número a nuestra página.

La longitud idónea no debe ser superior a 156 carácteres, para que el buscador no lo corte por donde más le convenga.

Dentro de estas etiquetas style ubicaremos el código CSS que única y exclusivamente afectará a los elementos de este mismo fichero HTML (tratado en el tema: Introducción a CSS).

En el atributo href=" " indicaremos la ruta donde está ubicado al fichero CSS externo (código que afectará a todos los elementos de todas las páginas HTML donde se coloque esta etiqueta).

En el caso de que una página tenga estas dos últimas etiquetas se ejecutarán las dos. Si tienen las mismas propiedades, tendrá más valor la que se indique en último lugar (tratado en el tema: Introducción a CSS).

Dentro de esta etiqueta script escribiremos el código de javaScript (en el caso de que exista) que única y exclusivamente afectará y se ejecutará dentro este mismo fichero HTML.

El valor viewport únicamente será leído por móviles, tablets y dispositivos conectados a internet en general, en los que el tamaño de su navegador esté supeditado al tamaño de la pantalla del dispositivo (osea todos).

En este ejemplo (que está ampliado en el tema: Responsive design) se indica que el ancho del contenido se adaptará al ancho de la pantalla del dispositivo y que el zoom (tamaño) inicial del contenido será del 100% (para que el contenido no tenga que ampliarse por el usuario nada más acceder a la web y sea legible sin esfuerzo).

Las etiquetas semánticas de HTML5

El <body> es donde se colocan todos los elementos que sí se van a mostrar y que forman el contenido de la página. Habitualmente todo este contenido deberá estar dentro de cajas.

Con la versión anterior de HTML sólo existía un tipo de caja <div>, por lo que una caja podía contener cualquier tipo de contenido.

Una de las novedades de HTML5, aparte de disponer de esta misma caja genérica <div>, tenemos diferentes tipos de cajas destinadas cada una a un tipo de contenido concreto <main>, <header>, <nav>, <section>, <article>, <aside> y <footer>. De esta manera el navegador puede entender qué contiene cada una de estas cajas, sin necesidad de tener que entender el idioma utilizado y sin tener que leer ni analizar el texto que contiene.

<div> es el tipo de caja genérica, que aunque no identifica qué tipo de contenido contiene, sigue siendo la más utilizada. No obstante suele estar ubicada dentro de cajas que sí tienen un significado semántico concreto como las que siguen...

<main> es la caja que contiene todo el contenido principal de la página, con las siguientes características:

Sólo puede existir un único <main> por página.

No puede estar dentro de ninguna otra caja.

Dentro contendrá aquel contenido que no se repita en cada página (conteniendo <div>, <section>, <article> o incluso <aside>), pero nunca cajas como <header>, <nav> o <footer>).

Dentro de la caja <header> ubicamos el contenido que estaría destinado al encabezado de la página. Normalmente contiene el logo y el nombre de la página y suele estar ubicado al inicio.

La caja <footer> contiene la información que figura al pie de la página (normalmente es la última caja de todas) y es donde se ubica el ©, e información como el mapa de la página, autor, fecha y otros datos finales.

Actualmente existe la tendencia de hacer <footer> enormes donde figura todo lo que se puede encontrar en el sitio.

La caja <nav> contiene todos los enlaces de la página, ya sea a otras secciones de nuestro mismo sitio web o a páginas externas. Por ello, en algunos casos pueden existir varios <nav>, como por ejemplo el del principio de la página y otro final ubicado dentro del <footer>

Las cajas <section> contienen el contenido genérico de la página.

Se pueden utilizar varios <section> al mismo tiempo en la misma página.

Pueden contener múltiples <div> y otras cajas relacionadas, como <article>.

Normalmente se utilizan para grandes cantidades o secciones de información de tipo similar.

Las cajas <article> también están destinadas a contener el contenido de la página, aunque normalmente suelen utilizarse para mostrar información más reducida y concreta y que puede ser independiente del resto.

Dentro de las cajas de tipo <aside> se ubican los contenidos que no tienen relación directa con el contenido, como por ejemplo información sobre vacunas o pasaportes en una web de viajes, calendario de eventos de una entidad, publicidad o la biografía del autor de un blog.

Aunque <figure> no tiene las mismas funcionalidades ni características que el resto de cajas, tiene como objetivo contener imágenes que opcionalmente pueden tener vinculadas un pie de imágen (información más detallada en el tema figure y figcaption).

Ejemplo de una estructura HTML5 más compleja
Una estructura HTML5 con todo lo explicado hasta el momento sería la siguiente:

 <!doctype html>
 <html>

   <head>
      <meta charset="utf-8"/>
      <meta name="description" content="Resumen del contenido de la página">
      <title>Título de la página</title>
      <link rel="stylesheet" href="css/estilo.css" type="text/css"/>
      <style type="text/css">
      	  código CSS
      	  código CSS
      </style>
      <script type="text/javascript">
      	  código javaScript
      	  código javaScript
      </script>
      <script type="text/javascript" src="js/codigo.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>

   <body>
   	<header>cabecera</header>
   	<nav>
   	    enlace1
   	    enlace2
   	</nav>
   	<main>
   	   <section>
   	  	<article> contenido </article>
   	  	<article> contenido </article>
   	   </section>
   	</main>
   	<footer> &copy pie de la página </footer>
   </body>

 </html>

# data[].attributes.attachment_link.description
Estructura básica de una página en HTML5 En HTM la estructura interna básica de una página web se ha simplificado, reduciendo el código innecesario hasta quedarse con el esqueleto básico, que sería el siguiente: Título de la web Contenido de la web Cada fichero HTML está compuesto de dos partes: el y el ¿Qué es y qué contiene el ?

# data[].attributes.body
Incluye multimedia y formularios en tu página web.

# data[].attributes.attachment_link.title
12 etiquetas básicas para formularios y multimedia en HTML

# data[].attributes.attachment_link.description
A lo largo de este artículo te presentamos 12 etiquetas básicas para formularios y multimedia en HTML que podrán resultarte muy útiles.

# data[].attributes.attachment_link.readable_text
Puede incrustar contenido SVG y MathML directamente en documentos HTML, usando los elementos y { {MathMLElement("math")}}.

El elemento svg es un contenedor que define un nuevo sistema de coordenadas y viewport (en-US). Es usado como el elemento más externo de cualquier documento SVG, pero también puede ser usado para agregar un fragmento de un SVG dentro de un documento SVG o HTML.

<math> es el elemento superior en MathML. Cada instancia válida de MathML debe estar rodeada de etiquetas <math>. Además, no debes anidar un segundo elemento <math> dentro de un primero, pero puedes tener un número arbitrario de otros elementos hijos en él.

# data[].attributes.attachment_link.title
Referencia de Elementos HTML - HTML: Lenguaje de etiquetas de hipertexto | MDN

# data[].attributes.attachment_link.description
Esta página lista todos los elementos HTML. Están agrupados por funciones para ayudarte a encontrar lo que tienes en mente con facilidad. Aunque esta guía está escrita para aquellos que son nuevos escribiendo código, se pretende que sea una referencia útil para cualquiera.

# data[].attributes.attachment_link.readable_text
El aprendizaje de HTML y CSS es esencial para cualquier desarrollador web. Estos lenguajes permiten crear y dar estilo a páginas web, lo que resulta fundamental en la creación de sitios web atractivos y funcionales. Para mejorar tus habilidades en HTML y CSS, es importante practicar regularmente. A continuación, te presentamos algunos ejercicios que puedes realizar para fortalecer tus conocimientos en estos lenguajes.

Ejercicio 1: Crear una página de inicio

El objetivo de este ejercicio es crear una página de inicio básica utilizando HTML y CSS. Crea una estructura HTML con un encabezado, un menú de navegación, un contenido principal y un pie de página. Utiliza CSS para dar estilo a cada sección de la página, cambiando colores, fuentes y tamaños de texto según tus preferencias.

Ejercicio 2: Diseñar una galería de imágenes

En este ejercicio, crea una galería de imágenes utilizando HTML y CSS. Utiliza etiquetas HTML para mostrar una serie de imágenes en una cuadrícula y aplica estilos CSS para darles un aspecto atractivo. Puedes agregar efectos de transición o animación para mejorar la experiencia del usuario.

Ejercicio 3: Crear un formulario de contacto

Un formulario de contacto es una parte fundamental de muchos sitios web. En este ejercicio, crea un formulario de contacto utilizando HTML y CSS. Utiliza etiquetas HTML para definir los campos del formulario, como nombre, correo electrónico y mensaje, y aplica estilos CSS para que el formulario se vea elegante y fácil de usar.

Ejercicio 4: Diseñar una página de perfil

En este ejercicio, crea una página de perfil utilizando HTML y CSS. Diseña una estructura HTML que muestre información sobre una persona, como su nombre, foto, biografía y enlaces a sus redes sociales. Utiliza CSS para dar estilo a cada sección de la página y asegúrate de que se vea atractiva y profesional.

Ejercicio 5: Construir un menú desplegable

Los menús desplegables son una característica común en muchos sitios web. En este ejercicio, crea un menú desplegable utilizando HTML y CSS. Utiliza etiquetas HTML para definir los elementos del menú y aplica estilos CSS para que el menú se despliegue correctamente cuando el usuario haga clic en él.

Conclusión

La práctica constante es clave para mejorar tus habilidades en HTML y CSS. Los ejercicios mencionados anteriormente son solo algunos ejemplos de lo que puedes hacer para practicar. Recuerda que la documentación oficial de HTML y CSS es una excelente fuente de referencia y aprendizaje. Además, considera consultar cursos de programación en línea o asistir a talleres para seguir mejorando tus habilidades. ¡No te detengas y sigue practicando!

# data[].attributes.attachment_link.description
El aprendizaje de HTML y CSS es esencial para cualquier desarrollador web. Estos lenguajes permiten crear y dar estilo a páginas web, lo que resulta fundamental en la creación de sitios web atractivos y funcionales. Para mejorar tus habilidades en HTML y CSS, es importante practicar regularmente.

# data[].attributes.body
Ejemplos básicos utilizando etiquetas HTML.

Usa Padlet como espacio colaborativo donde compartir y revisar el trabajo de otros.

# data[].attributes.attachment_link.title
Ejercicios - HTML & CSS: Curso práctico avanzado

# data[].attributes.attachment_link.description
Ejercicios del libro ‘HTML & CSS: Curso práctico avanzado’ por Sergio Luján Mora.

# data[].attributes.body
es el sitio web oficial de Mozilla para la documentación de estándares web y de los proyectos de Mozilla.

# data[].attributes.attachment_link.readable_text
Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.

Mandala
../../ ../../ ../../ ../../ ../../ ../../ ../../

Featured articles

See the latest updates to the MDN reference pages about JavaScript regular expressions, including new sections on sub-features and browser compatibility information.

Learn what HTML landmark roles are, how they improve accessibility, and how you can include them on your website effectively.

Web APIs
The Performance API is a group of standards used to measure the performance of web applications.

CSS
The CSS nesting module defines a syntax for nesting selectors, providing the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule.

Latest news

Recent contributions

Contributor Spotlight
Yuji
MDN Web Docs has the most up-to-date and accurate information and the content is presented in an easy-to-understand manner. I also like that it's available in many languages (very important!).
Get involved →

Mandala
../../ ../../ ../../ ../../ ../../ ../../ ../../

# data[].attributes.attachment_link.description
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

# data[].attributes.attachment_link.description
Black-belt your web development skills. Over 2000 free programming tutorial videos about: - Modern JavaScript (beginner to advanced)
- Node.js
- React
- Vue.js
- Firebase
- MongoDB
- HTML & CSS
- PHP & MySQL
- Laravel
- React Native
- Flutter
- Open AI
- SolidJS ...And many more topics as well :)

# data[].attributes.headline
Practica elementos de programación en HTML

# data[].attributes.subject
Practica elementos de programación en HTML

# data[].attributes.attachment_link.title
HTML/JS: hacer páginas web interactivas | Khan Academy

# data[].attributes.attachment_link.description
Aprende gratuitamente sobre matemáticas, arte, programación, economía, física, química, biología, medicina, finanzas, historia y más. Khan Academy es una organización sin fines de lucro, con la misión de proveer una educación gratuita de clase mundial, para cualquier persona en cualquier lugar.

# data[].attributes.body
Atom es una útil herramienta gratuita ideada para programadores de código que permite trabajar de una manera colaborativa y en tiempo real.

# data[].attributes.attachment_link.readable_text
Atom and all repositories under Atom will be archived on December 15, 2022. Learn more in our official statement.

Teletype for Atom

Great things happen when developers work together-from teaching and sharing knowledge to building better software. Teletype for Atom makes collaborating on code just as easy as it is to code alone, right from your editor.

Share your workspace and edit code together in real time. To start collaborating, open Teletype in Atom and install the package.

Learn more

GitHub for Atom

A text editor is at the core of a developer's toolbox, but it doesn't usually work alone. Work with Git and GitHub directly from Atom with the GitHub package.

Create new branches, stage and commit, push and pull, resolve merge conflicts, view pull requests and more-all from within your editor. The GitHub package is already bundled with Atom, so you're ready to go!

Learn more

Everything you would expect

Make it your editor

Packages

Choose from thousands of open source packages that add new features and functionality to Atom, or build a package from scratch and publish it for everyone else to use.

Themes

Atom comes pre-installed with four UI and eight syntax themes in both dark and light colors. Can't find what you're looking for? Install themes created by the Atom community or create your own.

Customization

It's easy to customize and style Atom. Tweak the look and feel of your UI with CSS/Less, and add major features with HTML and JavaScript.

See how to set up Atom

Under the hood

Atom is a desktop application built with HTML, JavaScript, CSS, and Node.js integration. It runs on Electron, a framework for building cross platform apps using web technologies.

Open source

Atom is open source. Be part of the Atom community or help improve your favorite text editor.

Fork on GitHub

# data[].attributes.attachment_link.title
A hackable text editor for the 21st Century

# data[].attributes.attachment_link.description
At GitHub, we're building the text editor we've always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can't wait to see what you build with it.

# data[].attributes.attachment_link.title
Visual Studio: IDE and Code Editor for Software Developers and Teams

# data[].attributes.attachment_link.description
Visual Studio dev tools & services make app development easy for any developer, on any platform & language. Develop with our code editor or IDE anywhere for free.

# data[].attributes.attachment_link.readable_text
Take control of HTML, CSS, and JavaScript in a visual canvas. Webflow generates clean, semantic code that's ready to publish or hand to developers.

Creative power that goes beyond templates

You design, we generate the code - for everything from fully custom layouts to complex animations.

Trusted by 200,000+
leading organizations

A platform
designed for growth

Tools to help you scale your site with your business.

Webflow Apps

Connect your site to the tools your team uses every day - plus find and launch apps in the Webflow Designer.

Supercharge your site with Apps

Connect powerful tools to your site

I feel like there is too much whitespace here. What else could we add here from our components?

Let's try our alternate description copy here.

https://FacilisiEtiam.com

Same as SEO meta description

Make sure your images are at least 1200px by 630px and have a 1.91:1 aspect ration.

We just raised a Series B

Unlock the power of data-driven insights, tailored for a rapidly

evolving digital landscape. Lead in today's dynamic market.

Webflow Enterprise

Webflow Enterprise gives your teams the power to build, ship, and manage sites collaboratively at scale.

We'll help you get started

Browse the Marketplace, educational videos, and customer stories to find what you need to succeed with Webflow.

Get started
for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

# data[].attributes.attachment_link.title
Webflow: Create a custom website | Visual website builder

# data[].attributes.attachment_link.description
Create custom, responsive websites with the power of code - visually. Design and build your site with a flexible CMS and top-tier hosting. Try Webflow for free.

# data[].attributes.body
W3Schools es un sitio web para aprender tecnologías web en línea.1​ Contiene tutoriales de HTML, CSS, JavaScript, SQL, PHP, XML y otras tecnologías.

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.attachment_link.description
Learn the technical skills to get the job you want. Join over 50 million people choosing Codecademy to start a new career (or advance in their current one).