Ejemplos de encabezado html. Reglas para escribir h1 correctamente. ¿Qué es una etiqueta h1?

encabezado int (cadena cadena [, bool reemplazar])

header() se utiliza para enviar encabezados HTTP sin formato. Consulte la especificación HTTP/1.1 para obtener información sobre encabezados HTTP.

Parámetro opcional reemplazar indica si el encabezado debe reemplazar un encabezado similar anterior o si se debe agregar un segundo encabezado del mismo tipo. El valor predeterminado es reemplazo, pero si pasa FALSE como segundo argumento, puede forzar la creación de múltiples encabezados del mismo tipo. Por ejemplo:

Nota: La línea de encabezado de estado HTTP siempre se enviará primero al cliente, independientemente de si la llamada header() llega primero o no. Este estado se puede anular llamando a header() con una nueva línea de estado en cualquier momento, a menos que ya se hayan enviado los encabezados HTTP.

Nota: En PHP 3 esto sólo funciona. si PHP está compilado como un módulo de Apache. Puede lograr el mismo efecto utilizando el encabezado Estado.

Nota: HTTP/1.1 requiere un URI absoluto como argumento para Ubicación: incluido el esquema, el nombre de host y camino absoluto, pero algunos clientes aceptan URI relativos. Normalmente puedes usar $_SERVER["HTTP_HOST"] , $_SERVER["PHP_SELF"] y dirname() tú mismo para crear un URI absoluto a partir de uno relativo:

Nota: Es posible que sus páginas no se almacenen en caché incluso si no muestra todos los encabezados anteriores. Hay opciones que los usuarios pueden configurar en sus navegadores que cambian el comportamiento de almacenamiento en caché predeterminado. Al enviar los encabezados anteriores, debe anular cualquier configuración que sus scripts podrían almacenar en caché.

// violación: observe la línea vacía en la parte superior

Nota: En PHP 4, puede utilizar el almacenamiento en búfer de salida para resolver este problema pasando toda la salida al navegador, almacenada en el búfer en el servidor antes de enviarla. Puede hacer esto llamando a ob_start() y ob_end_flush() en su script, o estableciendo la directiva de configuración output_buffering en su archivo php.ini o archivos de configuración del servidor.

Si desea que se le pregunte al usuario si desea guardar los datos que envía, como un archivo PDF generado, puede usar el encabezado Content-Disposition para proporcionar un archivo recomendado y forzar al navegador a mostrar un cuadro de diálogo para guardar.

Cuando trabaja con un sitio web, la primera etiqueta que encuentra un programador en HTML es. Cuando se utilizan sin atributos, no se ven diferencias en comparación con otras etiquetas, lo que plantea la pregunta posibles razones su uso.

¿Cómo y dónde usarlo?

es una introducción a alguna sección del documento. Es opcional y generalmente está escrito en la parte superior de la sección de la página. En inglés, "etiqueta" se traduce como "encabezado", pero en la jerga rusa se usa más a menudo la palabra "sombrero". Normalmente, esta etiqueta se utiliza en la parte superior de la página, donde se encuentran el nombre y el logotipo del sitio, así como un menú secundario. Sin embargo, a menudo puedes encontrar su uso en los títulos de las secciones.

En HTML, como muchas otras etiquetas, apareció solo en la quinta versión del lenguaje de marcado. Por tanto, no todos los navegadores lo manejan correctamente. La especificación del idioma asume que la etiqueta contiene el título de la sección (h1-h6) o página, así como los elementos auxiliares requeridos en el encabezado del sitio, incluidos banners, un bloque de información de contacto y otros. Como la mayoría de las etiquetas en HTML, debe tener su propio "par de cierre" - , que indica el final de las propiedades. de esta etiqueta. Si desea personalizarlo según su tipo de diseño personal, puede utilizar varios atributos para una etiqueta que definan su estilo.

Ejemplos de uso

Practicar el trabajo con la etiqueta le permitirá comprender completamente los principios de funcionamiento. Se pueden encontrar ejemplos HTML de su uso en casi todos los sitios web importantes. En ellos se suele utilizar para indicar el encabezado.

Una forma de configurar el "encabezado" de un sitio mediante una etiqueta es el siguiente ejemplo:

HTML5

Además del título, aquí también puedes añadir cualquier elemento y etiqueta que desees, a excepción de . El es responsable de pie de página páginas y no pueden estar presentes en el encabezado del sitio. Si este elemento se encuentra dentro de una etiqueta de título, el sitio no se cargará correctamente.

En HTML5 se han introducido varias etiquetas nuevas para la estructura del código: , , , , , que en algunos casos reemplazan a las habituales. Aunque parece que no hay mucha diferencia entre las etiquetas, sí existe una brecha enorme entre ellas. Las etiquetas no están dirigidas a personas que no tienen motivos para investigar código fuente páginas, sino a máquinas que interpretan el código. Las máquinas o los robots no entienden, para ellos esta es una etiqueta de marcado típica; reemplácela y el significado no cambiará. Otra cosa es que el robot, al detectar esta etiqueta, la percibe precisamente como el encabezado de un sitio o sección.

¿Qué aporta esto al final? Motores de búsqueda comienzan a indexar mejor el sitio porque separan claramente el contenido de la página de elementos auxiliares. Los navegadores de voz diseñados para personas ciegas omiten el título y van directamente al contenido. Los sitios pueden compartir automáticamente contenido y otra información entre sí. Todas estas capacidades se denominan semántica y le permiten presentar datos en una forma conveniente para los robots.

Primero hagamos el encabezado del sitio usando una etiqueta (ejemplo 6.2).

Ejemplo 6.2. Uso

El intento de agregar un fondo a la etiqueta en los estilos no dio resultado; el fondo no quiere mostrarse en algunos navegadores. Todas las etiquetas nuevas deben bloquearse primero mediante propiedad de visualización, entonces comenzarán a visualizarse correctamente (ejemplo 6.3).

Ejemplo 6.3. encabezado del sitio

HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx

encabezado ( mostrar: bloque; fondo: #00B0D8 url(images/header-gradient.png) repetir-x; )

Este ejemplo funcionará en todos los navegadores excepto IE7 e IE8. Explorador de Internet no agrega estilo a elementos que no comprende. Este malentendido se puede corregir creando un elemento ficticio con usando javascript. Para hacer esto, incluiremos esto en el código.

document.createElement("encabezado");

Si hay una etiqueta en la página, este script es muy adecuado para el trabajo. Pero no quiero repetir la línea diez veces por diez diferentes etiquetas, entonces automatizamos este proceso a través de un bucle. Las propias etiquetas se indican en una lista, separadas por comas (ejemplo 6.4).

Ejemplo 6.4. Guión para IE

var e = ("artículo,aparte,figcaption,figura,pie de página,encabezado,hgroup,nav,sección,hora").split(",");< e.length; i++) { document.createElement(e[i]); }

para (var i = 0; i El guión en sí consta de comentarios condicionales

, de modo que se ejecute sólo para IE versión 8.0 e inferiores. IE9 ya incluye soporte para las nuevas etiquetas HTML5.

No es necesario que inserte el ejemplo anterior en su sitio web; puede utilizar un script disponible públicamente escrito por Remy Sharp y distribuido bajo la licencia del MIT. Para hacer esto, simplemente proporcione un enlace, como se muestra en el ejemplo 6.5.

Ejemplo 6.5. Guión para IE

Todos los scripts especificados deben ubicarse en el código antes del CSS. Así, para uso completo

Las etiquetas HTML5 en todos los navegadores sólo necesitan cumplir tres condiciones:

establecer tipo de documento;

incluya el script del ejemplo 6.4 o 6.5;

en los estilos para nuevas etiquetas, configure display: block.

Ahora veamos algunas etiquetas HTML5 con más detalle para comprender su alcance.

Ejemplo 6.6. Usando una etiqueta

artículo Rastros de animales sin precedentes La historia de cómo aparecieron misteriosas huellas rosadas con seis dedos cerca del comedor y por qué sucedió esto.

Define un bloque que no está relacionado con el contenido principal para colocar categorías, enlaces al archivo, etiquetas y otra información (ejemplo 6.7). Un bloque de este tipo, si está ubicado en un lateral, generalmente se denomina "barra lateral" o "barra lateral".

Ejemplo 6.7. Uso

Ejemplo 6.6. Usando una etiqueta

a un lado document.createElement("a un lado"); document.createElement("artículo"); */ }

a un lado ( fondo: #f0f0f0; /* Color de fondo */ padding: 10px; /* Márgenes */ ancho: 200px; /* Ancho de la barra lateral */ float: derecha; /* Ajustar a la izquierda */ ) artículo ( margen derecho: 240px ; /* Sangría derecha */ display: block /*

Elemento de bloque

Ahorra electricidad

Buen idioma

Cuyo palo es más grande

La historia trata sobre cómo hubo que ahorrar electricidad, qué medidas se tomaron para ello y hacia dónde se destinó realmente.

Ejemplo 6.6. Usando una etiqueta

Se utiliza para agrupar cualquier elemento, por ejemplo, imágenes y leyendas (ejemplo 6.8).

Ejemplo 6.8. Uso

figura document.createElement("figura");

document.createElement("figcaption");

figura ( fondo: #5f6a72; /* Color de fondo */ padding: 10px; /* Márgenes alrededor */ display: block; /* Elemento de bloque */ ancho: 150px; /* Ancho */ float: left; /* Los bloques son alineado horizontal */ margen: 0 10px 10px 0; /* Relleno */ text-align: center /* Alineación central */ ) figcaption ( color: #fff; /* Color del texto */ ) Catedral de Santa Sofía iglesia polaca

Contiene una descripción de la etiqueta. La etiqueta debe ser el primer o último elemento del grupo.

Ejemplo 6.6. Usando una etiqueta

Especifica el “pie de página” de un sitio o sección; generalmente contiene el nombre del autor, fecha del documento, contacto y;

información legal

(Ejemplo 6.9).

Ejemplo 6.9. Uso

footer Sitio web personal de Kristina Vetrova ¡Bienvenido!

Me alegra darle la bienvenida a mi sitio web.

Ejemplo 6.6. Usando una etiqueta

Copyright Kristina Vetrova

Define el “encabezado” de un sitio o sección.

Se utiliza para agrupar encabezados de páginas o secciones web (Ejemplo 6.10).

Ejemplo 6.6. Usando una etiqueta

Ejemplo 6.10. Uso

Define una sección de un documento, que puede incluir títulos, encabezado, pie de página y cuerpo (Ejemplo 6.12). Se permite anidar una etiqueta dentro de otra.

Ejemplo 6.12. Uso

Ejemplo 6.6. Usando una etiqueta

sección Filmación Polipropileno

La historia trata de cómo hicieron una película donde los héroes estaban descansando en la playa, luego vino el antagonista, golpeó a los protagonistas, los arrojó a la piscina y lo que pasó.

Buen idioma

La historia cuenta cómo existía un estudio para estudiar el idioma esperanto, mientras que encima, en la terraza, había un estudio de bromas donde se contaban chistes y lo que salía de ello.

Marca el texto dentro de una etiqueta como fecha, hora o fecha y hora. Puede especificarse directamente dentro del contenedor o mediante el atributo de fecha y hora (ejemplo 6.13).

La fecha y la hora están configuradas en formato internacional. formato ISO 8601. Los ejemplos de diseño se dan en la tabla. 6.1.

Cada unidad tiene su propia forma dada y restricciones.

• El año se especifica en cuatro dígitos (1860).
• Mes: dos dígitos (01 - enero, 02 - febrero, 12 - diciembre).
• Día: dos números del 01 al 31.
• Hora: dos dígitos del 00 al 23.
• Los minutos son dos dígitos del 00 al 59.
• Los segundos son dos dígitos del 00 al 59.
• Zona horaria: horas y minutos indicados con un signo más o menos.

La fecha y la hora están separadas por letras mayúsculas. letra latina T. Si es necesario, la zona horaria se escribe después de la hora con un signo más o menos. Por ejemplo, para Moscú la zona horaria será +03:00.

Ejemplo 6.13. Uso

Ejemplo 6.6. Usando una etiqueta

tiempo

1957-10-04 lanzado por primera vez satélite artificial Tierra.

1960-08-19 primer vuelo de perros al espacio.

1961-04-12 primer vuelo espacial tripulado.

1963-06-16 Primer vuelo de una mujer astronauta.

1969-07-21 hombre aterrizando en la luna.

A menudo parece tareas simples Los diseños requieren una estructura de marcado HTML compleja y el uso de trucos de CSS. Centrar elementos o alinear contenidos puede resultar muy tedioso. Una de esas tareas es alinear los elementos en la parte superior del sitio para que el logotipo esté a la izquierda y los elementos del menú a la derecha. Puede usar flotador y posición: absoluta, y para la alineación vertical puede agregar margen y relleno diferentes elementos. Parece que no es nada complicado. Pero si el sitio debe mostrarse correctamente en dispositivos móviles, surgen muchos problemas.

A continuación se muestra una forma concisa de resolver este problema.

El marcado HTML es lo más simple posible:

súper malo Primer enlaceSegundo enlaceTercer enlace

La altura del encabezado es fija, agregue alineación de texto: justificar, para elementos secundarios:

Encabezado (alineación de texto: justificar; espacio entre letras: 1px; altura: 8em; relleno: 2em 10%; fondo: #2c3e50; color: #fff;)

Agregar pantalla: bloque en línea para todos los elementos de navegación para que puedan colocarse uno al lado del otro:

Encabezado h1, encabezado de navegación (pantalla: bloque en línea;)

atribuir alineación de texto: justificar funcionó de la manera que queremos, necesitamos usar un pequeño truco con pseudoelementos, que se encontró en el artículo Técnica de cuadrícula CSS perfectamente justificada usando inline-block, de Jelmer de Maat:

Encabezado::después ( contenido: ""; pantalla: bloque en línea; ancho: 100%; )

El resultado fue una alineación horizontal, sin utilizar flotar Y posición:absoluta. Ahora necesitas alinear los elementos verticalmente. Al usar alineación vertical para los elementos de navegación habrá una dependencia de la altura del bloque principal: el encabezado. Y esto no es muy correcto. Ejemplos de uso de alineación vertical: superior y alineación vertical: media en jsbin. A continuación se muestra quizás el más manera conveniente alineación vertical.

Usemos pseudoelementos nuevamente. Usando un ejemplo del artículo Centrarse en lo desconocido, mencionado por Michał Czernow:

Encabezado h1 (altura: 100%;) encabezado h1::antes (contenido: ""; pantalla: bloque en línea; alineación vertical: medio; altura: 100%;)
El resultado es lo que necesitas:

Queda por resolver dos problemas: mapeo correcto para grandes cantidades texto en el encabezado y adaptabilidad. Si el título del sitio es demasiado largo, el diseño comenzará a deslizarse hacia afuera:

Usemos el truco del pseudoelemento en el encabezado:

código CSS

encabezado ( alineación de texto: justificar; altura: 15em; relleno: 2em 5%; fondo: #2c3e50; color: #fff; ) encabezado::después ( contenido: ""; pantalla: bloque en línea; ancho: 100%; ) encabezado> div, encabezado de navegación, encabezado div h1 (pantalla: bloque en línea; alineación vertical: medio;) encabezado> div (ancho: 50%; alto: 100%; alineación de texto: izquierda;) encabezado> div: :antes (contenido: ""; pantalla: bloque en línea; alineación vertical: medio; altura: 100%;)

Se ve mucho mejor:

Pasemos ahora a la adaptabilidad. Hay varias formas de solucionar este problema, simplemente no puedes establecer la altura del encabezado y eso es todo. elementos internos será adaptable a la altura. Esto no requerirá el segundo truco con pseudoelementos, ejemplo en vivo en jsbin.

código CSS

encabezado ( alineación de texto: justificar; relleno: 2em 5%; fondo: #2c3e50; color: #fff; ) encabezado::después ( contenido: ""; pantalla: bloque en línea; ancho: 100%; ) encabezado h1, encabezado de navegación (pantalla: bloque en línea; alineación vertical: medio;) encabezado h1 (ancho: 50%; alineación de texto: izquierda; padding-top: 0.5em;) encabezado de navegación (padding-top: 1em;)

Si necesita establecer la altura del encabezado, deberá usar el segundo truco con pseudoelementos y agregar una consulta de medios para las pantallas. diferentes tamaños:

@media pantalla y (ancho máximo: 820 px) (encabezado (alto: auto;) encabezado> div, encabezado>

El resultado es adaptativo y se ve así en dispositivos móviles:

En el ejemplo, se utiliza 820px para mayor claridad; en un sitio activo, el valor, por supuesto, debe ser diferente, de acuerdo con los requisitos. Para admitir Internet Explorer 8, debe utilizar “:” en lugar de “::” para los pseudoelementos.

Código CSS final

@importar URL(http://fonts.googleapis.com/css?family=Lato:400,700italic); * ( relleno: 0; margen: 0; ) cuerpo ( fondo: #1abc9c; familia de fuentes: "Lato", sans-serif; transformación de texto: mayúsculas; espacio entre letras: 1px;) encabezado ( alineación de texto: justificar ; altura: 8em; relleno: 2em 5%; color: #fff; ) encabezado::después (contenido: ""; ancho: 100%; ) encabezado > div, encabezado > div::antes, encabezado de navegación, encabezado > div h1 (pantalla: bloque en línea; alineación vertical: medio; alineación de texto: izquierda;) encabezado > div (altura: 100%;) encabezado > div::antes (contenido: ""; altura: 100%;) encabezado > div h1 ( tamaño de fuente: 3em; estilo de fuente: cursiva; ) encabezado de navegación a ( padding: 0 0.6em; espacio en blanco: nowrap; ) encabezado de navegación a:last -child ( padding-right: 0; ) @ pantalla multimedia y (ancho máximo: 720 px) (encabezado (alto: automático;) encabezado> div, encabezado> div h1, encabezado de navegación (alto: automático; ancho: automático; pantalla: bloque; alineación de texto: centro;

Resultado:

Como sabemos, no existe una segunda oportunidad para causar una primera impresión. en el campo diseño digital esta verdad se refuerza alta competencia y la amplia variedad de soluciones disponibles. Además, es bastante obvio que al crear una primera impresión, algunas partes de una página web son más importantes que otras, por ejemplo, el encabezado de un sitio (encabezado del sitio). Hoy veremos todos los matices relacionados con este término:

La nota es una traducción de un artículo de uxplanet, muchas gracias a los autores por ello.

¿Qué es el encabezado de un sitio web?

En el diseño clásico, el bloque de encabezado se encuentra en la parte superior. Esto es lo primero que la gente ve cuando llega a su proyecto. Al ser en cierto sentido una invitación, contiene información básica sobre el producto y el nicho con el que está relacionado el sitio; es importante que los usuarios puedan entender en unos segundos de qué se trata.

El diseño del encabezado del sitio web tiene mucho espacio para la creatividad, pero también debe ser atractivo, conciso y útil. aqui estan ubicados elementos clave navegación.

La captura de pantalla muestra pagina de inicio Tienda de cómics en línea: en la parte superior del encabezado del sitio encontrará el logotipo, el menú principal, así como los íconos de carrito y búsqueda.

¿Qué se incluye en el encabezado del sitio?

Este bloque puede incluir varios objetos:

• características de la marca: logotipo, nombre, nombre comercial, eslogan, mascota, fotografía de la empresa o de su líder, etc.;
• información sobre el producto o servicio que se presenta;
• enlaces a elementos importantes contenido();
• enlaces a perfiles de redes sociales;
• contactos (teléfono, correo electrónico etc.);
• cambiar de idioma con una interfaz multilingüe;
• bloque de búsqueda;
• campo de suscripción;
• enlaces al producto: descargar la versión demo, dirección en la AppStore, etc.

No se deben utilizar todos los puntos anteriores. Asegúrese de que el diseño del encabezado del sitio no esté sobrecargado información innecesaria, lo que impide que los visitantes se centren en los aspectos principales.

A continuación se muestran ejemplos de colocación de dichos elementos:

Sitio web de Bjorn (proyecto de estudio de diseño de interiores)

En la parte superior del diseño hay un encabezado fijo (fijo) en la página, que le permite permanecer constantemente visible a medida que se desplaza. A la izquierda contiene el logo de la marca, y a la derecha los enlaces “Productos”, “Estudio”, “Noticias” + el ícono “Tienda”. Un área central vacía separa visualmente los dos bloques.

Aquí el encabezado del sitio adopta un enfoque diferente: el logotipo y la marca están en el centro, y a la izquierda y lado derecho Cada uno tiene dos enlaces que permiten a los usuarios saltar rápidamente a las secciones que necesitan.

¿Por qué es importante el encabezado de un sitio web?

Esto se debe a varias razones. En primer lugar, cuando las personas visitan un recurso web en particular (especialmente por primera vez), no miran la página completa con atención y detalle, sino que la hojean rápidamente, buscando algo que llame la atención y los convenza de quedarse. Varios experimentos han demostrado que existen patrones típicos de movimientos oculares de los usuarios. Se mencionan tres opciones principales:

El primer esquema es típico de páginas con una presentación uniforme de información y una jerarquía visual débil. Identifica cuatro zonas activas, dos de las cuales están asociadas con el área del encabezado del sitio.

modelo Z

Otro patrón de movimiento ocular tiene forma de Z y es típico de páginas con separación visual de bloques de contenido. Aquí, los ojos del lector van desde la esquina superior izquierda a la misma derecha, viendo este encabezado primero.

Muy a menudo, los usuarios demuestran el siguiente enfoque:

• Inicialmente, el ojo se mueve horizontalmente, generalmente a lo largo de la parte superior, la primera franja del modelo en forma de F.
• La mirada del visitante se mueve entonces hacia abajo y la página se vuelve a "escanear" horizontalmente, pero se cubre un área más corta que en el primer movimiento. Este elemento adicional Esquemas F.
• Finalmente, el ojo se mueve hacia el lado izquierdo de la pantalla, que se ve verticalmente. A veces este proceso bastante lento y sistemático, que aparece como una banda sólida en el mapa de calor del movimiento ocular. En otros casos, la mirada se mueve más rápido. Este último elemento, creando la raíz de la letra F.

Las tres opciones muestran que la visualización comienza en el área horizontal superior. Por lo tanto, el encabezado del sitio en las páginas de un proyecto web desempeña simultáneamente dos funciones: el usuario tiene la oportunidad de encontrar rápidamente información clave y el desarrollador tiene la oportunidad de presentarla de manera competente. Por eso el bloque de encabezado es tan importante para los especialistas en promoción de productos y contenidos.

Como señala Bogdan Sandu en un artículo, “un sitio debe llamar la atención de inmediato, de lo contrario será un gran fracaso”.

a pesar de todo notas importantes Del artículo, cabe señalar que no todos los recursos web necesitan este elemento. En muchos diseños creativos, el encabezado y sus funciones están conectados a otras áreas del diseño.

Diseño de encabezado de sitio web Legibilidad y jerarquía visual

Este artículo juega papel importante, por lo que es necesario tener cuidado con el encabezado y su color de fondo. El usuario debe notar y percibir toda la información de la forma más rápida y sencilla posible.

En el concepto de la plantilla de noticias actual, verá un menú en el encabezado del sitio con dos enlaces activos a categorías de publicaciones, un enlace a la transmisión "en vivo" y un campo de búsqueda. El logo está en el centro, como en uno de los ejemplos anteriores.

Aquí usamos uno popular con una cuadrícula abstracta rota, y el encabezado del sitio lo complementa con éxito: lado izquierdo visualmente más largo, consta de un logo y tres enlaces; el de la derecha es más corto, con elementos de búsqueda y suscripción.

Debe recordar que a medida que el usuario se mueve por la página, el encabezado del sitio puede comportarse de manera diferente:

• algunos desarrolladores utilizan un bloque “pegajoso” (fijo), siempre visible y activo;
• otros simplemente lo ocultan;
• También existe una opción cuando el encabezado no desaparece por completo, sino que se reduce de cierta manera en , dejando disponible solo información básica importante.

Menú de hamburguesas

Popular solución de diseño, que oculta enlaces básicos a secciones detrás del botón correspondiente. En el blog ya hemos hablado de esta característica en un artículo sobre sus alternativas.

Hoy en día, este botón suele ser un elemento completo en el encabezado del sitio y muchos usuarios ya saben que el menú principal está oculto detrás de él. Este enfoque libera espacio, haciendo que el diseño sea minimalista y ligero, al mismo tiempo que preserva más espacio otros objetos. Además, esto le permite crear una interfaz armoniosa para varios tipos dispositivos.

Aquí se muestra una versión de un menú "compacto" en el encabezado del sitio, que contiene muchos enlaces y mantiene un estilo general simple de la plantilla. Además, en la cabecera hay dos zonas: a la izquierda, la marca y breve información sobre el proyecto; El icono de búsqueda también se encuentra en la zona derecha. La parte central queda libre, aportando ligereza y equilibrio a toda la distribución.

Hay mucho espacio vacío en la estructura de la página a la izquierda, y el logotipo y el nombre de la empresa están en esquina superior, donde comienza el movimiento ocular. Más adelante en el diseño del encabezado hay enlaces a las secciones principales. Esta opción te permite ocultar muchos enlaces y organizar una buena jerarquía visual.

Y aunque esta decisión Sigue siendo objeto de debate activo, todavía se utiliza como encabezado de navegación de un sitio. Sus oponentes señalan que este bloqueo puede confundir a los usuarios de Internet nuevos y sin experiencia. Por eso es aconsejable decidirse sobre la introducción del botón "hamburguesa" sólo después de haber investigado al público objetivo.

Encabezado del sitio web fijo (fijo)

Aquí el diseño tiene bloque fijo en la parte superior, no oculto al desplazarse. Contiene el título, un ícono de lupa para realizar búsquedas y un botón de “hamburguesa”.

A continuación se muestra otro ejemplo. enfoque creativo A diseño efectivo encabezados del sitio. Cuando inicia sesión por primera vez, solo puede ver su implementación minimalista con íconos de redes sociales y búsqueda (sin menú, etc.). Pero a medida que avanza, se forma una franja fija con un conjunto tradicional de elementos.

Menú doble

La navegación en el encabezado del sitio puede constar de dos diferentes menús. En los tiempos modernos, este es un movimiento estándar.

En el GIF a continuación verá un encabezado "fijo" que consta de dos "líneas":

• En la parte superior hay enlaces a redes sociales botón de búsqueda, almacenamiento y menú; en el centro está el logo.
• La segunda línea se centra en los principales apartados del proyecto: catálogo de productos, ubicación de puntos de venta, novedades y ofertas, servicios y contactos.

La jerarquía de encabezados hace que todos los elementos sean claros y fáciles de leer, lo que brinda una sólida experiencia de usuario.

Total

El encabezado del sitio web es un área estratégicamente importante en el diseño del diseño. Por supuesto, cada caso específico requiere un enfoque diferente y (posiblemente) una investigación de los usuarios, pero siempre se deben tener en cuenta los matices básicos discutidos anteriormente.

Si tiene algo que agregar sobre el artículo desde su experiencia laboral personal, escriba a continuación: es interesante de leer. ¿Qué implementación de encabezado te gustó más?