PAW

Lic. en Sistemas de Información

PAW

Lic. en Sistemas de Información

Speaker:

A.S. Pablo Cesar CHALE

pcchale@gmail.com

HTML

Organizando el contenido

Índice:

  1. Estructura del documento
  2. Organizando el contenido
  3. Elementos de Redacción
  4. Estructuras Especiales
  5. Contenido Incrustado

Flow content

  • a
  • abbr
  • address
  • area*
  • article
  • aside
  • audio
  • b
  • bdi
  • bdo
  • blockquote
  • br
  • button
  • canvas
  • cite
  • code
  • data
  • date
  • datalist
  • del
  • details
  • dfn
  • dialog
  • div
  • dl
  • em
  • embed
  • fieldset
  • figure
  • footer
  • form
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • header
  • hgroup
  • hr
  • i
  • iframe
  • img
  • input
  • ins
  • kbd
  • keygen
  • label
  • link*
  • main*
  • map
  • mark
  • math
  • menu
  • meta*
  • meter
  • nav
  • noscript
  • object
  • ol
  • output
  • p
  • picture
  • pre
  • progress
  • q
  • ruby
  • s
  • samp
  • script
  • section
  • select
  • slot
  • small
  • span
  • strong
  • sub
  • sup
  • svg
  • table
  • template
  • textarea
  • time
  • u
  • ul
  • var
  • video
  • wbr
  • autonomous custom elements
  • Text*
Flow

Heading content

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • hgroup
Heading

Sectioning content

  • article
  • aside
  • nav
  • section
Sectioning

Metadata content

  • base
  • link
  • meta
  • noscript
  • script
  • style
  • template
  • title
Metadata

Interactive content

  • a*
  • audio*
  • button
  • details
  • embed
  • iframe
  • img*
  • input*
  • keygen
  • label
  • object*
  • select
  • textarea
  • video*
Interactive

Phrasing content

  • a*
  • abbr
  • area*
  • audio
  • b
  • bdi
  • bdo
  • br
  • button
  • canvas
  • cite
  • code
  • data
  • date
  • datalist
  • del*
  • dfn
  • em
  • embed
  • i
  • iframe
  • img
  • input
  • ins*
  • kbd
  • keygen
  • label
  • link*
  • map*
  • mark
  • math
  • meta*
  • meter
  • noscript
  • object
  • output
  • picture
  • progress
  • q
  • ruby
  • s
  • samp
  • script
  • select
  • slot
  • small
  • span
  • strong
  • sub
  • sup
  • svg
  • template
  • textarea
  • time
  • u
  • var
  • video
  • wbr
  • autonomous custom elements
  • Text*
Phrasing

Embedded content

  • audio
  • canvas
  • embed
  • iframe
  • img
  • math
  • object
  • picture
  • svg
  • video
Embedded

Elementos que representan
Secciones

section

Permite seccionar / dividir partes del contenido

Permite agrupar contenido / artículos del mismo contexto

article

Composición auto-contenida
independiente y reutilizable

main

Contenido principal de la pagina web

Contexto: body o section

header

Grupo de ayudas introductorias o de navegación

Elementos de encabezado, logo,
un formulario de búsqueda, un nombre de autor, etc.

footer

Pie de página para el contenido de la sección

nav

Proporciona enlaces de navegación

Puede haber varias en cada documento

aside

Contenido que está indirectamente relacionado
con el contenido principal de la sección

address

Aporta información de contacto

div

Agrupa contenidos que no encajen en los otros elementos de sección

Recomendacion de Google

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>App Shell</title>
	<!-- otros metatags -->
</head>

<body>
	<header class="header">
		<h1 class="header__title">
			Shell de app
		</h1>
	</header>

	<nav class="nav">
		...
	</nav>

	<main class="main">
		...
	</main>

	<div class="dialog-container">
		...
	</div>

	<div class="loader">
		<!-- Show a spinner or 
		placeholders for content -->
	</div>
</body>
</html>