FrontEnd Developer Jr.

Html5: estructura básica del sitio.

Por Edgar F. Britez


Como primer articulo les quería compartir el código html en su versión HTML5, de los contenedores básicos qu he utilizado para este sitio.
Empecemos por lo mas sencillo y vamos agregando tags poco a poco.
La idea es que el sitio sea RESPONSIVE así que tomaremos como punto de partida la versión para móviles(MOBILE FIRST).


Vamos con el HEAD


<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<title>Brico/Index</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="css/normalize.css">

<link rel="stylesheet" href="css/style.css">

</head>


Es importante que se incluya en el HEAD la etiqueta meta viewport.


<meta name="viewport" content="width= device-width, initial-scale=1.0">


BODY


El cuerpo se compone, en este caso las nuevas etiquetas de HTML5.


<main id="container" ="main">

<nav id="navBar">

<h1>NOMBRE DEL SITIO</h1>

</nav>

<header id="cabecera">

<h2>TITULO</h2>

</header>

<section id="principal">

</section>

<footer id="pie">

</footer>

</main>



Esta es la estructura html básica.

En el próximo articulo vamos a posicionar y dar estilos con CSS.

Espero les sirva, cualquier pregunta o sugerencia por favor compartanlas conmigo.

Por ahora mande los mensaje via @bricodeOK o por correo.


Hasta pronto.