Vamos a echar un vistazo de cerca ahora a HTML5 y para hacer eso, tenemos que echar un vistazo un poco sobre qué es HTML, de dónde viene y la dirección en la que se dirige. HTML es verdaderamente el lenguaje de la web. Sé que hemos hablado de que JavaScript es el lenguaje de la web o PHP es el lenguaje de la web. De hecho, hay muchos lenguajes en la web, pero cuando se trata de eso, ninguno de los otros realmente importa si no tienes HTML primero. HTML es realmente el facilitador de la World Wide Web. ¡Así que profundicemos y ensuciemos nuestras manos con algo de HTML!


Lenguaje de marcado de hipertexto

HTML es un acrónimo de Hypertext Markup Language. La parte de hipertexto de HTML es lo que se refiere a la capacidad de esta tecnología para crear enlaces a otros sitios web, páginas web o recursos. Es la parte de la web que bueno, ¡danos una web! Debido a la capacidad de poder crear una etiqueta de anclaje, la red mundial existe como lo hace hoy. Es un concepto muy simple pero increíblemente poderoso, y las empresas más grandes del mundo utilizan esta tecnología todos los días para hacer avanzar las ideas. Existe toda una industria en torno a este concepto, y los motores de búsqueda como Google y Bing estudian incansablemente las relaciones entre los enlaces para proporcionar resultados a los usuarios que completan búsquedas en sus sitios web. El marcado de HTML es el otro concepto dentro de HTML, y es a través del marcado que hemos formateado texto, imágenes,

Conceptos clave de HTML

  • Originalmente basado en SGML El precursor de HTML es un lenguaje de marcado llamado SGML, o Lenguaje de marcado generalizado estándar.
  • Los hipervínculos son lo que impulsa la Web moderna A menudo damos por sentado los vínculos en estos días, pero son el componente vital de la Web.
  • Varias versiones de HTML en uso Quicks Mode, HTML 2.0, HTML 3.2, HTML 4.01, HTML5. Todos los navegadores modernos admiten todas estas versiones. Por supuesto, nuestro objetivo es mantenernos actualizados y completar nuestros sitios web en HTML5 o HTML 4.01.

WHATWG

WHATWG son las siglas de The Web Hypertext Application Technology Working Group. ¡Di eso 5 veces rápido!🙂 El propósito de este grupo es estandarizar marcos web modernos como HTML5. La historia de esto es que el W3C estaba trabajando en XHTML 2.0 como un medio para hacer de HTML un lenguaje de marcado más estricto para trabajar con sitios web basados ​​en aplicaciones. XHTML no era popular entre la comunidad web y HTML5 se ha convertido en la tecnología de referencia para las aplicaciones web modernas. HTML5 es realmente un término un tanto impreciso, ya que se refiere a una colección de tecnologías que abarcan el marcado, el diseño y el comportamiento. Piense en HTML, CSS y JavaScript para ser más precisos. En esta etapa del juego, tenemos las versiones WHATWG y W3C de HTML5 y no están de acuerdo al cien por cien sobre cuál es el significado real de HTML 5. Sin embargo, en lo que sí están de acuerdo es en la parte de marcado de HTML5.


Estructura del documento HTML5

Un documento HTML completo tiene muchas partes importantes. Vamos a ver algunos ejemplos de HTML, pero antes de hacerlo, debemos considerar qué tipo de aplicación utilizará para editar su HTML. Hay varias excelentes opciones gratuitas disponibles. Me gusta Adobe Brackets, sin embargo, puedes usar lo que quieras. También es posible simplemente usar un editor de texto súper básico como el Bloc de notas, pero se perderá algunas características agradables de formato automático que realmente ayudan a que el marcado sea mucho más legible. A continuación se muestra una estructura básica de un documento HTML5.

Esto es tan simple como parece, pero nos permite ver algunas de las ideas clave con respecto al marcado en uso. Repasemos ahora.

  • Doctype La declaración de doctype es para decirle al navegador qué versión de HTML esperar analizar dentro del documento. Me encanta esta nueva declaración de tipo de documento en HTML5 porque es muy simple, a diferencia de los tipos de documento torpes y llenos de atributos de las versiones anteriores de HTML. <! doctype html> informa al navegador que estamos tratando con un documento basado en estándares.
  • Comentarios Podemos ver un comentario incluido en el código <! - Estructura del documento HTML5 -> Los comentarios ayudan a los desarrolladores a realizar un seguimiento de los temas grandes y complicados que pueden compilarse a partir de muchos archivos diferentes.
  • Dom Tree Comenzando en <html lang = 'en'> y terminando con </html> está el árbol del modelo de objetos de documentoEn la raíz del árbol está la propia etiqueta html. Este es un ejemplo de un contenedor en HTML, ya que tiene una etiqueta de apertura y cierre. Tenga en cuenta que solo las etiquetas de apertura tendrán atributos, las etiquetas de cierre nunca tendrán atributos.
  • Relaciones entre padres e hijos El concepto de contenedor trae a colación la idea de elementos padre e hijo . Las etiquetas contenidas en otro son elementos secundarios de su padre. En este documento, las etiquetas meta, título y enlace son elementos secundarios del elemento head.
  • Relaciones entre hermanos Cuando pensamos en hermanos, pensamos en iguales. Por ejemplo, usted y su hermano o hermana son hermanos e iguales, por así decirlo, en el árbol genealógico. En este documento HTML, las etiquetas de encabezado y cuerpo podrían considerarse hermanos.

Etiquetas y contenedores

Las etiquetas son la base de HTML y hay algunas formas de escribirlas e interpretarlas. Específicamente, hay etiquetas que crean contenedores y otras que no. Primero veremos la idea de una etiqueta de contenedor. En nuestro ejemplo de HTML anterior, tenemos una etiqueta de título con un <title> de apertura y un </title> de cierre. Entre las etiquetas hay algo de texto. La estructura completa se conoce como un elemento en esa página, y dado que las etiquetas de apertura y cierre rodean el texto, también se considera un contenedor.

Las metaetiquetas, por otro lado, son un ejemplo de una etiqueta que no contiene. Un meta de apertura no necesita el meta de cierre equivalente. Esto se conoce como etiqueta independiente. A menudo, verá el formato de finalización automática de la etiqueta mediante una barra inclinada como <meta charset = "UTF-8" /> Este ejemplo tiene un atributo de charsety un valor de UTF-8.

Puede parecer un poco mundano, pero las etiquetas realmente son la base de todo lo que hacemos en el desarrollo web. Vale la pena comprenderlos a un nivel bajo, para que los problemas de nivel superior sean más fáciles de depurar y solucionar más adelante.


Modelos de contenido en HTML5

En versiones anteriores de HTML había dos modelos de contenido principales o categorías de elementos. Había elementos de bloque que definían áreas de un documento y elementos en línea que fluían con el texto. HTML5 lleva este concepto un paso más allá y admite siete tipos diferentes de modelos de contenido. Los modelos de contenido son los que definen qué tipos de contenido se esperan en ciertos tipos de contextos. Un elemento determinado solo debe tener contenido que cumpla con los requisitos de su modelo de contenido. Los siete modelos de contenido se superponen, lo que significa que algunos elementos pueden pertenecer a más de un modelo de contenido.

1. Flujo

La mayoría de los elementos del cuerpo de la página web serán del tipo de modelo de contenido de flujo. Esto incluiría texto, párrafos, títulos, listas, hipervínculos, imágenes, audio, video y muchas otras cosas en HTML. El flujo abarca prácticamente todo excepto los metadatos.

2. Fraseo

El modelo de contenido de redacción incluye el texto del documento y cualquier elemento que marque ese texto. Esto incluiría pensamientos como imágenes, enlaces, formularios, negrita y cursiva.

3. Encabezado

El modelo de contenido de encabezado se refiere a todos los elementos de encabezado como h1 h2 h3 h4 h5h6.

4. Seccionamiento

El modelo de contenido de secciones se refiere a los nuevos elementos de sección en HTML5. Es posible que los haya visto en la web en los formatos article aside navsection.

5. Integrado

El modelo de contenido incrustado es responsable de importar otro recurso en el documento como audio o video. Las imágenes, el lienzo, los objetos matemáticos, etc. se considerarían parte del modelo de contenido integrado.

6. Interactivo

Los elementos del modelo de contenido interactivo están diseñados específicamente para que los usuarios tomen medidas. Una navegación de menú, una entrada de formulario o un hipervínculo serían parte del grupo de modelos de contenido interactivo donde se requiere la entrada del usuario.

7. Metadatos

Contenido que configura la presentación o el comportamiento del resto del documento. Se trata básicamente de información sobre información. Los metadatos son muy útiles no solo para su propia página web, sino también si está integrando otros servicios de complementos o sitios web de terceros. Por ejemplo, Facebook proporciona una gran colección de metaetiquetas para insertar en su página web para integrarse con varios aspectos de su API de desarrollador.

Estas siete categorías de contenido son una excelente descripción general del tipo de datos con los que trabajará en HTML5. Tener una comprensión firme de su significado y uso le permitirá escribir documentos conformes que sean portátiles y mantenibles en una variedad de dispositivos en el futuro previsible.

Elementos HTML5 obsoletos

En HTML5, muchos elementos html se han declarado obsoletos. El significado de esto puede ser un poco engañoso. Dado que Internet es tan increíblemente grande, hay muchas páginas que todavía usan muchos o todos los elementos considerados obsoletos. Estas páginas seguirán funcionando, pero al ser obsoletas, sus creadores ya no deberían utilizar estos elementos cuando creen nuevos sitios web en línea. Es una buena práctica dejar de usar cualquiera de los siguientes elementos en el futuro.

  • acrónimo
  • bgsound
  • dir
  • cuadro
  • marco
  • noframes
  • isindex
  • listado
  • nextid
  • no enterrar
  • Texto sin formato
  • rb
  • Huelga
  • xmp
  • fuente base
  • grande
  • parpadeo
  • centrar
  • fuente
  • marquesina
  • multicol
  • nobr
  • espaciador
  • tt

Quizás se pregunte, ¿por qué eliminarían la funcionalidad del lenguaje? ¿No me gustaría poder lograr tanto y más con este nuevo y fantástico HTML5? Bueno, en realidad, puede lograr todas las cosas que proporcionan estas etiquetas obsoletas mediante el uso de una combinación de elementos HTML5 compatibles y CSS o JavaScript adicionales. Si está tratando de usar la blinketiqueta en estos días, ¡debe reevaluar su enfoque!🙂

Además de los elementos obsoletos, también hay una gran colección de atributos obsoletos. Repasemos aquí

  • abbr
  • aceptar
  • alinear
  • un enlace
  • archivo
  • eje
  • antecedentes
  • bgcolor
  • frontera
  • relleno celular
  • espacio celular
  • carbonizarse
  • charoff
  • juego de caracteres
  • identificador de clase
  • claro
  • código
  • base de código
  • tipo de código
  • color
  • compacto
  • coords
  • datafld
  • formatos de datos
  • tamaño de la página de datos
  • datasrc
  • declarar
  • elementos
  • evento
  • para
  • cuadro
  • Frontera del marco
  • altura
  • hspace
  • idioma
  • enlace
  • longdesc
  • lowsrc
  • margen inferior
  • altura de margen
  • margen izquierdo
  • margen derecho
  • margen superior
  • ancho de margen
  • métodos
  • nombre
  • nohref
  • sin sombra
  • Nowrap
  • perfil
  • Rdo
  • reglas
  • esquema
  • alcance
  • desplazamiento
  • forma
  • Talla
  • colocarse
  • resumen
  • objetivo
  • texto
  • tipo
  • urna
  • usemap
  • valignar
  • tipo de valor
  • versión
  • vlink
  • vspace
  • anchura

Nuevamente, esto solo significa que existen mejores formas de lograr las mismas cosas. Si ha estado desarrollando páginas web durante un buen período de tiempo, es posible que se ría al ver esta colección de elementos y atributos que se han considerado obsoletos. Algunas de las primeras herramientas WYSIWYG o What You See Is What You Get hicieron un uso abundante de casi todos estos elementos y atributos. 🙂 Como dicen, la retrospectiva es 20/20.

Conclusión

Elegí profundizar mucho en HTML y HTML5 en esta nueva serie aquí en VegiBit porque parece haber una gran cantidad de confusión en cuanto a qué es realmente HTML5. Y sabes qué, por una buena razón. La colección de estándares y organismos de estándares que gobiernan el futuro de la web, sin mencionar la influencia que tienen las corporaciones de miles de millones de dólares en cómo se están configurando las cosas, es suficiente para volver loco a cualquiera. Una vez escuché un dicho sobre HTML5: "¡Todos lo están usando, nadie sabe qué es!" Muy apropiado de hecho. Este primer salto a los conceptos básicos de HTML5 nos llevará en la dirección correcta para comprender mejor las herramientas que usamos todos los días.