Nuevas etiquetas de estructura HTML5. Nuevas etiquetas de estructura. Disponibilidad de elementos adicionales.

Cap sugiere que el número que está escrito en el medio de la página y en tamaño grande es más notorio. Haga esto si desea que la mayor cantidad posible de clientes puedan llamar y hablar con los empleados de la empresa.

Dar contactos de diferentes departamentos.

Para una gran empresa que recibe un gran flujo de solicitudes de clientes todos los días, tiene sentido publicar inmediatamente las coordenadas del departamento de ventas, soporte técnico, recursos humanos y otros departamentos. De esta manera las personas podrán obtener una respuesta a su pregunta más rápido.

El sitio web del restaurante internacional "Proyecto Ginza" contiene los números de teléfono del centro de llamadas, el servicio de relaciones públicas, el departamento de recursos humanos y otros departamentos.

En el sitio web " Banco Tinkoff» además de los contactos del departamento, también hay diferentes números de teléfono para diferentes categorías de clientes: propietarios tarjetas de credito, tarjetas de débito e inversores.

No es necesario publicar los contactos de los departamentos regionales en una lista grande a la vez. Puede visualizarlos solo haciendo clic en el nombre de la oficina de representación deseada. Por ejemplo, como en la sección Información del contacto en el sitio web de Refinish Avtolac.

El Centro de Intercambio Internacional tiene bastantes sucursales en todo el mundo. Los representantes de la empresa están agrupados en secciones por país para búsqueda conveniente sus números de teléfono y direcciones.

Las fotos de los carteles de las tiendas fuera de línea en el sitio web de la marca de ropa urbana "BatNorton" ayudarán a los clientes a navegar centro comercial y encuentra el departamento que necesitas.

Los contactos de las oficinas regionales de Sayner aparecen en ventanas emergentes. Esta técnica liberará la página de contacto del exceso de información. El usuario podrá conocer en detalle el número de teléfono y la dirección únicamente del distribuidor que necesite.

Window Continent tiene cuarenta y siete oficinas de representación en Moscú. Para comodidad de los clientes, los contactos se publican en el sitio web en tres formas: en una lista, en un mapa de la ciudad y en un mapa del metro. En las dos últimas opciones, la información de contacto aparece en una ventana emergente al hacer clic en la oficina de representación deseada.

Escribir contactos de empleados

Una persona confía en otra más que en el nombre impersonal de una empresa. Por eso, cuéntanos sobre tus especialistas. Demostrar que personas específicas son responsables de cada área de trabajo de la empresa.

Intente publicar fotos de sus empleados. Piense en qué imágenes inspirarán más confianza entre los clientes. Quizás sean fotografías en el lugar de trabajo o fotografías con trajes de negocios en un estudio profesional.

Mostrar direcciones

Un mapa de direcciones claro ahorra tiempo al explicar a cada cliente cómo llegar a la empresa. Y garantiza que la mayoría de los invitados no se pierdan.

Bonitas indicaciones para llegar en coche. ellos trabajan imagenes realistas edificios, parques y otros objetos cercanos en los que la gente se centrará cuando busque su oficina.

Sin embargo, tenga en cuenta que dibujar un mapa de viaje es una tarea que requiere mucha mano de obra. Y lo más probable es que se adapte a empresas que tengan pocas oficinas o puntos de venta, uno o dos.

Si una empresa tiene muchas oficinas u oficinas de representación, entonces es más fácil utilizar no una dibujada a mano, sino esquema estándar viajar Es fácil de crear en cualquier diseñador de mapas. Y para no saturar la página de contacto del sitio web con numerosas indicaciones para llegar en coche, se pueden ocultar en ventanas emergentes.

El sitio web de Mary Truffle contiene instrucciones dibujadas a mano para llegar a dos salones de bodas.

En el mapa renderizado de la ruta a la tienda de regalos Presentstar puedes ver los detalles más pequeños: desde un gato debajo de un árbol hasta extraterrestres robando un Lada.

Contactos de las oficinas de representación del "Centro" intercambio internacional» se publican en el sitio web en forma de lista. Si hace clic en el nombre de la oficina de representación, el mapa de ubicación se abrirá en una ventana emergente.

En la sección con información de contacto en el sitio web de PSKB Bank, inicialmente están ocultas las direcciones a cada oficina. Y aparecen al hacer clic en el nombre de la oficina en los bloques desplegables.

En la página de contacto de la tienda en línea de la marca Sony, en la ventana emergente el usuario selecciona ciudad deseada. E inmediatamente después, la página muestra la información de contacto relevante, direcciones y una descripción de texto de cómo llegar.

En el sitio web del festival del automóvil “Unlim 500+” tres diferentes esquemas- indicaciones para llegar al lugar del evento, un mapa del campo de prácticas y la ubicación de la cafetería y el escenario en la plataforma de observación. Usted selecciona el esquema deseado: la descripción en el lado izquierdo de la página y el mapa en el lado derecho cambian.

En el sitio web de Rozovoz, la información de contacto se publica en una ventana emergente. Y ya dentro de la ventana puedes cambiar dos bloques de información: direcciones de los almacenes de flores y número de teléfono del servicio de entrega.

En el sitio web del complejo residencial "Panorama Skolkovo" es posible trazar una ruta desde cualquier punto del mapa hasta la oficina de ventas.

Utilice el espacio en la ventana emergente dentro del mapa.

A veces es necesario mostrar las direcciones y números de teléfono de varios puntos de venta en el mapa. Pero si publicas toda la información de contacto a la vez, la página se sobrecargará y será difícil encontrar algo específico.

Es conveniente ocultar contactos en ventanas emergentes que aparecen al hacer clic en un punto particular del mapa. Falta de una gran cantidad de información de contacto. diferentes tiendas, oficinas de representación y despachos aligera visualmente la página y facilita la navegación.

Sin embargo, hay formas más interesantes de utilizar una pieza pequeña. espacio libre¡Dentro de una ventana emergente en el mapa!

En el sitio web del holding de restaurantes Ginza Project, dentro de una ventana emergente, puede alternar cuatro bloques de información: dirección del restaurante, número de teléfono, horario de apertura y estación de metro más cercana.

En el sitio web de Leto Bank, en una ventana emergente en el mapa, puede evaluar el trabajo de la sucursal en una escala de 5 puntos.

En la web de la base de flores “Everything in a Bunch” en la ventana emergente, además de la dirección, número de teléfono y horario de atención, también hay fotografías de cada almacén.

En ventanas emergentes en el mapa para direcciones a centros de estudio idiomas extranjeros"J&S" tiene un botón de llamada en línea, un enlace al grupo VKontakte y varias fotografías. Y también así” conjunto estándar» como dirección, número de teléfono y horario de atención.

Publicar una foto de la entrada a la oficina de la empresa.

Muestra cómo es la entrada a la oficina de la empresa. Especialmente si no tiene su propio logotipo en el frente del edificio. Es más fácil mostrar esto una vez en una fotografía que explicárselo a los clientes con palabras cada vez.

Escribe cómo llegar a la oficina.

Dé varias opciones para describir cómo las personas pueden llegar a usted: a pie, en automóvil, en automóvil. transporte público. Imagínese en el lugar de una persona que se bajó del último vagón del metro en la estación Kaluzhskaya y se encontró por primera vez en la calle Profsoyuznaya. ¿Adónde debería ir ahora? ¿De qué lado de la calle? ¿Adónde y adónde debería acudir? Cuéntanos esto con el mayor detalle posible.

Las instrucciones de orientación se pueden publicar todas a la vez u ocultarse en bloques de información que se abren con un clic del mouse.

El sitio web de la tienda de regalos Presentstar tiene instrucciones para excursionistas y automovilistas.

A Gazprom no sólo se puede llegar a pie, sino también en trolebús o en coche. Las descripciones de paseos y viajes a la oficina se publican en la página de contactos.

En el sitio web de Refinish Avtolac aparecen descripciones de cómo llegar a la empresa en coche o en transporte público haciendo clic en el encabezado correspondiente.

En la página de contacto de la clínica de reproducción MAMA no sólo hay instrucciones para los usuarios de trolebuses y automóviles, sino también para los visitantes de fuera de la ciudad que viajan desde la estación o el aeropuerto. Los bloques con diferentes textos se cambian haciendo clic en los iconos con un automóvil, autobús o tren.

Presta atención a los textos.

No seas aburrido, trabaja en los textos y encabezados de tu página de contacto. Un título brillante evitará que la vista deambule por el sitio en el lugar correcto.

Rambler dice que hay muchas razones para escribirle. Pero en este lugar podría haber alguna frase monótona como "Lista de direcciones de correo electrónico".

La marca de gorros de punto “Handy Hat” quiere estar más cerca de sus clientes. Ven, dice, a nosotros en VKontakte.

En la página de contacto del fabricante de impregnaciones decorativas “Veres” hay una simple frase que dice que los productos se presentan en más de 300 ciudades de Rusia. En este punto podría haber un título estándar "Nuestros Representantes". Pero entonces nadie sabría cuán amplia es la geografía de las actividades de la empresa.

Coloque un enlace a contactos en otras secciones del sitio.

“Oculto en el pie de página negro, en la esquina más alejada, entre una docena de otros enlaces, está el único enlace del sitio a la página de contacto. Para que nadie lo encuentre seguro”, es la terrible historia de una empresa que no quería escuchar llamadas ni leer cartas de la gente.

Si desea que se pongan en contacto el mayor número posible de clientes, haga que el enlace a la sección de contactos sea lo más visible posible. Por ejemplo, utilice imágenes para diseñar enlaces.

Proporcione un enlace a la información de contacto cuando corresponda. Por ejemplo, está escribiendo noticias sobre una próxima conferencia de un famoso asesor empresarial de su empresa. Es lógico complementar el artículo con un enlace a la información de contacto para que todos puedan inscribirse en la conferencia.

En cada página del sitio web de la base de flores "Todo en un paquete" hay un enlace claramente visible a las direcciones de los almacenes.

La página de contacto es una de las páginas clave de un sitio web comercial. Debe centrarse no sólo en promoción en buscadores(aunque esto también es importante) cuánto informar completamente a los visitantes. La información de contacto de la empresa es un factor de clasificación comercial: los motores de búsqueda la utilizan para evaluar un recurso en términos de sus ventajas competitivas sobre sitios similares.

Naturalmente, pagina perfecta Los contactos no abrirán un camino directo al TOP-3, pero su contribución será importante en toda la estrategia de promoción. En este artículo, veremos cómo diseñar correctamente la página "Contactos" en un sitio web para obtener una ventaja adicional para el karma del sitio a los ojos del PS.

Disponibilidad en 1 clic

La página de contacto debe abrirse con 1 clic desde cualquier página del recurso. Es recomendable colocar un enlace en la primera parte visible de la pantalla: normalmente es menú horizontal en el encabezado del sitio. También puede duplicar el enlace en el pie de página para que el usuario pueda encontrar formas de comunicarse leyendo la información hasta el final y terminando en la parte inferior del sitio. Se recomienda colocar el enlace a la página de contacto lo más arriba posible en el código, de esta manera robot de búsqueda le dará mayor prioridad.

Micromarcado en el diseño.

Es mejor incluir atributos de Schema.org en el código HTML durante el diseño de la página de contacto. El uso de micromarcado estandarizado permitirá a los motores de búsqueda estudiar mejor el recurso y obtener información de él. información importante y centrarse en ello en los resultados. resultados de búsqueda. En pocas palabras, si se configura correctamente, el fragmento mostrará la dirección, la región y otros datos, lo que mejorará las tasas de clics. Información detallada Los motores de búsqueda proporcionan información sobre el uso de la sintaxis de Schema.org en su ayuda. Indicar también en la etiqueta »

Usando elementos requeridos

La página de contacto debe contener lista completa formas de contactar a la empresa (incluyendo dirección física), información sobre el modo de funcionamiento. Proporcione a los clientes la mayor cantidad de información posible y tendrá menos que responder preguntas "estúpidas" sobre cómo llamar al departamento de ventas o a qué dirección enviar una solicitud comercial. Elementos requeridos de la página de Contactos:

• número de teléfono con código de área (siempre es preferible un número de teléfono fijo a un número de móvil). Aún mejor, si la empresa utiliza número gratuito con código 8(800). Los números de móvil deben ser secundarios, no primarios. No estaría de más indicar los números. especialistas clave empresas;
• dirección – debe indicar la dirección real dirección postal con índice. Esto aumenta enormemente el nivel de confianza en la empresa (si en la página de contacto solo hay un número de móvil y un campo comentario, surge razonablemente la pregunta: ¿de quién se esconde?);
• correo electrónico. En este caso, es mejor publicar también la dirección principal y las direcciones de los especialistas/departamentos clave;
• horario de trabajo: debe proporcionar información sobre el horario de trabajo, el horario de oficina de los especialistas clave, los horarios del almuerzo y el trabajo los fines de semana. Elemento útil indicará la hora antes del cierre, por ejemplo: “Faltan 1 hora y 14 minutos para que cierre la tienda”;
• direcciones: se puede organizar utilizando Yandex.Maps integrado o mapas de google. Es mejor acompañar la ruta con un comentario de texto para conductores y peatones, brindar información sobre la disponibilidad de estacionamiento y el sistema de acceso. Para ver la imagen completa, agregue Coordenadas GPS, especialmente si tu empresa está ubicada en un lugar poco conocido;
• entrada al edificio - la mejor solución Habrá una foto que le permitirá ver con precisión la puerta requerida. También se puede complementar con vídeo controlado mediante tecnología. realidad virtual en google mapas.

Disponibilidad de elementos adicionales.

Si proporciona la información descrita anteriormente en la página, en la mayoría de los casos esto será suficiente para clientes potenciales o socios han encontrado una manera de contactarlo y acudir a su oficina. Pero estas posibilidades se pueden ampliar si se proporciona información adicional. Esto incluye:

• herramientas de comunicación en línea: formularios de comentarios lacónicos (literalmente, nombre, campo para dirección de correo electrónico o número de teléfono, campo para mensaje), Skype;
• personalización de empleados: publicación de fotografías y nombres de gerentes y especialistas clave;
• video o gráficos: fotografía de oficina, video con un diagrama de ruta para caminar;
• datos legales: OGRN, TIN, punto de control, domicilio legal, nombre completo del director y otros datos necesarios para los socios;
• agregue un código QR con información básica de viaje;
• Botón "Imprimir versión de texto".

Si tiene muchos visitantes y clientes activos, debe proporcionar un captcha para el formulario de comentarios, lo que le ayudará a cortar gran número correo basura. Pero no olvide que el captcha es un factor “desalentador” para muchos visitantes que pueden cambiar de opinión acerca de enviar un mensaje.

que es bueno, que es malo

Ante ti tienes dos páginas de contactos. El primero de ellos está en el TOP 10 de Yandex, el segundo está fuera del TOP 50. Utilizando el conocimiento adquirido, evalúe usted mismo por qué surgió tal diferencia.

Diseño correcto de la página "Contactos"

Diseño incorrecto de la página "Contactos"

¿Qué hacer con los contactos de sucursales?

Si una empresa tiene varias sucursales dentro de una ciudad u oficinas de representación en regiones, debe encargarse de crear páginas de contacto separadas para cada división. Si hay 2-3 sucursales en una ciudad, es recomendable indicar sus contactos en una página, pero no se debe permitir que la página se convierta en una "hoja". Si hay muchas direcciones, créalas. pagina separada para cada uno y para pagina general hacer un mapa con marcadores y enlaces a todas las sucursales o lista corta con enlaces. Esto gustará tanto a los usuarios como a los robots de búsqueda.

Es un poco más difícil organizar páginas de contacto para unidades regionales. Es muy posible que tengas que desglosar las direcciones de las regiones por páginas relevantes. Sin embargo, en este caso, es necesario considerar la orientación geográfica. EN motores de búsqueda Ah, entrega geodependiente. En pocas palabras, los residentes de Moscú o San Petersburgo verán diferentes sitios en los resultados de búsqueda para cualquier solicitud comercial. La región la asignan los motores de búsqueda al estudiar los datos especificados en la página "Contactos". Por lo tanto, sería más lógico que las oficinas de representación crearan sitios web separados para subdominios y los promocionaran en los resultados de búsqueda regionales.

Contactos y promoción del sitio web.

Las herramientas Yandex.Webmaster y Google para webmasters le permiten informar a los motores de búsqueda sobre la región de su sitio, los servicios de la empresa, su horario de trabajo, dirección y otros datos importantes que se mostrarán en los resultados de búsqueda. En Yandex.Webmaster, para ello debe utilizar las herramientas "Región del sitio" y "Direcciones y organizaciones". Google está diseñado para esto” Direcciones de Google" Además de un fragmento de alta calidad, esto le dará la oportunidad de colocar datos de la empresa en servicios de mapas– y esto atraerá tráfico adicional.

Colocar información de contacto en todas las páginas.

El teléfono y otra información de contacto (o un enlace a ellos) deben indicarse en cada página del sitio. Al mismo tiempo, deben ser claramente visibles; de lo contrario, un visitante que esté listo para llamar y realizar un pedido puede no encontrar sus contactos y acudir a la competencia.

Para que el visitante pueda elegir un método conveniente para realizar el pedido de productos, indique toda su información de contacto: teléfono, correo electrónico, Skype, ICQ, etc. En la mayoría de los casos, un número de teléfono fijo es más confiable que un número de teléfono móvil.

Disponibilidad de cómodos y pagina informativa contactos te permitirán crear canal efectivo comunicación con los visitantes, aumentar el nivel de confianza en la empresa. La optimización adecuada de esta página aumentará el atractivo del sitio para los motores de búsqueda y contribuirá a estrategia general promoción exitosa de solicitudes comerciales. No dudes en recurrir a profesionales para conseguir estos beneficios.

Que le permiten describir claramente los bloques de contenido.

¿Qué es HTML5?

HTML5 es versión más nueva Lenguaje de marcado de hipertexto (HTML), que representa la revisión más radical de este lenguaje en toda su historia. Esta versión introduce muchas características nuevas en diversas áreas. Los más importantes incluyen los siguientes.

• Etiquetas multimedia integradas para admitir contenido de audio y vídeo
• Etiqueta de lienzo para dibujar contenido directamente en el navegador
• Formularios inteligentes que permiten operaciones como la validación mediante el uso de un atributo requerido

Mejorar las calificaciones en este tema.

Este artículo forma parte del programa “Camino al Conocimiento” para mejorar las habilidades de cualificación (Camino del Conocimiento). Cm.

Nuevo conjunto Los elementos estructurales (etiquetas) en HTML5 modifican la forma en que se estructuran los documentos HTML. Las nuevas etiquetas de estructura se centran en dividir un documento HTML en partes lógicas. El nombre de cada etiqueta de estructura describe el tipo de contenido que la etiqueta debe almacenar. Este artículo está dedicado a descripción detallada estas nuevas etiquetas.

Fondo

En 1989, Tim Berners-Lee creó la primera versión del lenguaje HTML para superar ciertas limitaciones de los métodos entonces existentes de acceso a información en Internet. En etapa inicial existencia de Internet, navegar por ella ha sido una tarea difícil. El contenido de Internet era una colección de documentos individuales y no había una manera fácil de navegar por esos documentos. De hecho, el usuario debería haber sabido dirección exacta el documento que busca e introduzca esta dirección manualmente. Para solucionar este problema, Berners-Lee creó dos tecnologías: protocolo HTTP(Protocolo de transferencia de hipertexto) y HTML (lenguaje de marcado de hipertexto).

HTTP es un protocolo de servicio que utilizan los servidores web para entregar contenido. Mira a barra de direcciones su navegador web. Si su navegador muestra una URL completa, lo más probable es que comience con los caracteres "http://". Esta parte de la URL le dice al navegador qué tipo de protocolo utilizar al realizar una solicitud al servidor web. Cuando un servidor web recibe una solicitud de un documento, en la mayoría de los casos este documento se presenta en formato HTML o convertido a este formato. Es el documento HTML que se envía al navegador que envió esta solicitud.

HTML es un lenguaje de programación que le indica al navegador web cómo presentar el contenido. El contenido puede contener enlaces a otros documentos, lo que proporciona un método fácil de usar para navegar entre documentos en Internet.

Esta combinación de tecnologías HTTP y HTML garantiza una navegación rápida y sencilla por el contenido de Internet: para navegar entre documentos, sólo necesita hacer clic en los enlaces del texto. Después de crear las dos tecnologías mencionadas anteriormente, Berners-Lee fundó una organización llamada W3C ( Mundial Consorcio Web). El W3C lideró el desarrollo de las primeras cuatro versiones de HTML.

El propósito original de Internet era servir a usuarios simples. documentos de texto. Los primeros navegadores eran sólo de texto (en otras palabras, no tenían ventanas sofisticadas, sólo texto en la pantalla). Incluso agregar imágenes fue un logro bastante significativo cuando aparecieron por primera vez. Hoy en día, la gente hace una variedad de cosas en Internet, desde enviar mensajes hasta correo electrónico antes de ver programas de televisión. Internet ya se ha convertido en mucho más que un mecanismo para transportar simples documentos de texto. Nuevas características y nuevos usos han creado nuevas dificultades y nuevos problemas para los cuales HTML nunca fue diseñado para resolver.

El W3C intentó resolver los problemas de Internet actual con el estándar XHTML 2.0 (Lenguaje de marcado de hipertexto extensible). Sin embargo, esta norma no ha sido ampliamente adoptada y ahora prácticamente ha sido abandonada. En 2004, mientras el W3C concentraba sus esfuerzos en el estándar XHMTL 2.0, otra organización llamada WHATWG (Web Hypertext Application Technology Working Group) comenzó a desarrollar el estándar HTML5, que fue recibido mucho más favorablemente por la comunidad que el estándar XHTML 2.0. El W3C dejó de trabajar en XHTML 2.0 y actualmente está trabajando con WHATWG para desarrollar la especificación HTML5.

Navegadores compatibles

Al momento de escribir este artículo, el estándar HTML5 aún no se ha lanzado oficialmente. Mayoría El contenido de la Web todavía se crea según la especificación HTML 4. Sin embargo, algunos navegadores admiten la especificación HTML5. Esto puede resultar complicado porque cada uno de estos navegadores sólo admite un subconjunto de funciones HTML5. Antes de crear un sitio web basado en HTML5, pruebe cada uno de sus navegadores de destino para asegurarse de que admitan las funciones que planea utilizar en su sitio.

Declaración de tipo de documento actualizada

Independientemente de las capacidades de sus navegadores de destino, debe decirle a cada navegador que desea mostrar su contenido utilizando la especificación HTML5. Esto se puede hacer usando la declaración de tipo de documento.

La declaración de tipo de documento le dice al navegador en qué versión del lenguaje de marcado está escrita página actual. Lo hace utilizando una plantilla DTD (Definición de tipo de documento). Una DTD especifica las reglas que utiliza un lenguaje de marcado para ayudar a los navegadores a mostrar el contenido correctamente.

El concepto de declaraciones de tipo de documento puede resultar bastante confuso. La especificación HTML actual tiene muchas declaraciones de tipo de documento, cuyas diferencias no están del todo claras. La tabla 1 muestra los disponibles en en este momento declaraciones de tipo de documento y sus capacidades.

Tabla 1. Declaraciones de Doctype y sus capacidades

Afortunadamente, la especificación HTML5 simplifica enormemente la declaración de tipo de documento. De hecho, sólo existe una declaración de este tipo en HTML5. Para que su navegador procese utilizando la especificación HTML5, agregue la declaración de tipo de documento que se muestra en .

Listado 1. Declaración de tipo de documento HTML5

La declaración debe estar al principio del documento HTML, antes de la etiqueta. .

Nuevas etiquetas de estructura

La premisa detrás de la creación de nuevas etiquetas de estructura es el deseo de dividir las páginas web en partes lógicas utilizando elementos cuyos nombres descriptivos correspondan al contenido que contienen. Conceptualmente, una página web puede considerarse como un documento. Los documentos contienen encabezados, pies de página, capítulos y varios otros simbolos, dividiendo documentos en partes lógicas.

EN esta sección Utilizando un ejemplo, se analizan los métodos actuales para dividir un documento HTML. En secciones posteriores del artículo, modificaremos el código original utilizando etiquetas de estructura HTML5 y modo paso a paso considere crear estructura lógica documento.

Enfoque HTML 4

Incluso si antes solo ha creado documentos HTML básicos, todavía está familiarizado con la etiqueta div. En la era anterior a HTML5, la etiqueta div era el mecanismo principal para crear bloques de contenido en un documento HTML. Como ejemplo, demuestra el uso de etiquetas div para crear una página simple con encabezado, área de contenido y pie de página.

Listado 2. Página HTML simple que usa etiquetas div

Este enfoque funciona muy bien; la etiqueta div es un gran elemento propósito general. Sin embargo, sin mirar el atributo id de cada etiqueta div, es difícil saber qué sección del documento representa cada etiqueta div. Se puede argumentar que si el atributo id se nombra correctamente, sus capacidades como indicador son suficientes; sin embargo, el uso de atributos id no es obligatorio. Hay muchas variantes del atributo id que pueden considerarse igualmente válidas. La etiqueta div en sí no contiene ninguna indicación de qué tipo de contenido se le ha encomendado representar.

Enfoque HTML5

HTML5 resuelve este problema proporcionando un conjunto de etiquetas que definen con mayor precisión los principales bloques de contenido que componen un documento HTML. Independientemente del contenido resultante que muestre una página web, la mayoría de las páginas web constan de varias combinaciones Secciones típicas y elementos de página.

Listado 4. Agregar una etiqueta de sección

Encabezamiento

Esta es una sección importante de la página.

Pie de página

Etiqueta de artículo

La etiqueta del artículo indica secciones importantes de contenido dentro de una página web. Por ejemplo, en un blog, cada publicación individual es un contenido significativo. Después de agregar la etiqueta del artículo al ejemplo de código, obtenemos el código que se muestra en .

Listado 5. Agregar etiquetas de artículos

Encabezamiento

Esta es una sección importante de contenido de la página.

Pie de página

Quizás una publicación de blog.

etiqueta de lado

La etiqueta aside indica que el contenido de este elemento está relacionado con el contenido principal de esa página, pero no forma parte de él. En cierto sentido, su uso es similar a incrustar un comentario en el cuerpo del texto (como este comentario). El contenido entre paréntesis proporciona información adicional sobre el elemento que contiene ese contenido. Después de agregar la etiqueta aside al código de ejemplo, obtenemos el código que se muestra en.

Encabezamiento

Esta es una sección importante de contenido de la página.

Esta es una sección importante de contenido de la página.

Pie de página

Listado 6. Agregar una etiqueta aparte

Etiqueta de pie de página

La etiqueta de pie de página marca el contenido que contiene como pie de página del documento actual. Después de agregar la etiqueta de pie de página al código de ejemplo, obtenemos el código que se muestra en .

Encabezamiento

Esta es una sección importante de contenido de la página.

Esta es una sección importante de contenido de la página.

Este es un aparte para la primera publicación del blog.

En este punto, todas las etiquetas div del ejemplo original han sido reemplazadas por etiquetas de estructura HTML5.

etiqueta de navegación

Listado 8. Agregar una etiqueta de navegación

Esta es una sección importante de contenido de la página.

Esta es una sección importante de contenido de la página.

Un tercer enlace de navegación

Ejemplo final

Aquí se muestra el resultado de reemplazar las etiquetas div originales con nuevas etiquetas de estructura HTML5.

Listado 8. Agregar una etiqueta de navegación

Esta es una sección importante de contenido de la página.

Esta es una sección importante de contenido de la página.

Aunque este ejemplo se ha simplificado tanto como sea posible con fines de demostración, comparar el ejemplo div() original con la versión() resultante demuestra claramente el propósito de las nuevas etiquetas de estructura.

Conclusión

Las nuevas etiquetas de estructura HTML5 describen el contenido que contienen y ayudan a dividir un documento en secciones lógicas. Al igual que un autor que escribe un libro, el autor del documento aún podrá decidir cuándo y dónde utilizar estos nuevos elementos en su documento. Aunque dos autores que escriben el mismo libro pueden elegir diferentes formas de dividirlo en capítulos, utilizar capítulos sigue siendo un enfoque coherente para dividir libros en secciones. Del mismo modo, aunque dos autores de una página web determinada pueden elegir estructuras diferentes, los nuevos elementos estructurales HTML5 brindan a los desarrolladores de páginas web capacidades nuevas y consistentes que no ofrecían las etiquetas div anteriores.

Elementos semánticos HTML5 describir claramente su significado o propósito tanto para los navegadores como para los desarrolladores web.
Antes de la llegada del estándar HTML5, todo el marcado de páginas se realizaba principalmente utilizando elementos.

, a los que se les asignaron clases o identificadores de identificación para mayor claridad del marcado (por ejemplo,

). Con su ayuda, se colocaron encabezados, pies de página, barras laterales, navegación y mucho más en un documento HTML.

El estándar HTML5 introdujo nuevos elementos para estructurar, agrupar contenido y marcar contenido de texto. Nuevos elementos semánticos permitieron mejorar la estructura de una página web, añadiendo significado semántico al contenido contenido en ellas (era

, se convirtió

). No existen reglas para mostrar la apariencia de los elementos, por lo que se puede diseñarlos como desee. Disponible para todos los artículos.

Según la especificación HTML5, cada elemento pertenece a una categoría específica (cero o más). Cada uno de ellos agrupa elementos con características similares. Se distinguen las siguientes categorías generales:

• Metacontenido
• Transmisión de contenido
• Contenido seccional
• Contenido del encabezado
• Contenido del texto
• Contenido incrustado
• Contenido interactivo

Descripción de elementos HTML5

1. Elemento

Categorías de contenido: contenido en streaming.
Grupos de elementos introductorios y de navegación, opcionales. Puede contener títulos, envolver el contenido de una sección de página, un formulario de búsqueda o un logotipo. Un documento HTML puede contener varios elementos al mismo tiempo

y pueden ubicarse en cualquier lugar de la página.

Descripción del sitio

Elemento

no se puede colocar dentro de elementos



Últimos artículos

MacBook no se conecta a wifi MacBook no ve...

leer

Cómo ganar dinero con WebMoney

leer

Tableta "Supra": opiniones de clientes

leer

Ubicaciones de barcos en tiempo real

leer

Los mejores programas para Android Grabar llamadas desde...

leer

Eliminar a los no seguidores en Twitter

leer

Conexión a Internet en una computadora portátil: todo lo posible...

leer

Samsung Galaxy S IV es el nuevo buque insignia...

leer