La parte del documento, la parte del cuerpo, contiene el contenido que los visitantes pueden ver. Los documentos HTML tradicionales generalmente organizan estructuras de documentos a través de elementos DIV y junto con tablas de estilo apropiadas. Sin embargo, el problema de Div Element es información semántica. Especialmente si la estructura de tejido de la página HTML no es buena, causará fácilmente confusión. En este sentido, se agregan muchos elementos semánticos a HTML5 para reemplazar elementos Div y semántica y presentación separadas.
Todos los elementos semánticos tienen una característica significativa: realmente no hacen nada, tienen poco impacto en el contenido en la apariencia e incluso no tienen ningún efecto. Hay varias razones para la existencia de elementos semánticos:
1) Fácil de modificar y mantener. A través del elemento semántico de HTML5, se puede transmitir información estructurada adicional, lo que facilita a las personas comprender el diseño general del documento y el papel de diferentes bloques.
2) no obstacle. Un tema importante del diseño web moderno es permitir que cualquier persona acceda a la página web sin obstáculos, es decir, las personas que usan lectores de pantalla y otras herramientas auxiliares pueden navegar libremente en la página.
3) Optimización de motores de búsqueda. El uso de HTML5 permite a los motores de búsqueda comprender mejor su sitio web y permitirles recopilar más información sobre sus páginas de índice.
4) función futura. Los nuevos navegadores y herramientas de edición web definitivamente utilizarán elementos semánticos en el futuro. Por ejemplo: se presenta la parte principal del documento.
Lo más importante es que si usa elementos semánticos correctamente, puede crear una estructura de página más clara y puede adaptarse a la tendencia de desarrollo de futuros navegadores y herramientas de diseño web. Lo siguiente introducirá elementos semánticos para las estructuras de documentos organizacionales.
Estructura de documentos HTML5La antigua página HTML utiliza elementos Div, junto con tablas de estilo apropiadas, pero el problema del elemento DIV es que no refleja ninguna información relacionada con la página. La página HTML5 es reemplazar estos elementos DIV con elementos semánticos descriptivos. El siguiente ejemplo contiene los principales elementos semánticos utilizados en HTML5 para describir la estructura del documento.
<Body> <WEADER> <HGROUP> <H1> Cosas que me gustan </h1> <h2> por Adam Freeman </h2> </hgroup> <dirección> ¿Preguntas y comentarios? > </dirección> <am> <h1> contenido </h1> <li> <a href =#fruitsilike> frutas que me gustan </a> </li> <ul> <li> <a href =#másfruit> adicional de </a> </li> </ul> <li> <a href =#actividades me gusta </a> </li> <li> <li> <li> <li> <li> <li > <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> << Li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <ul> <li> <li> <li> <ul > <li> <li> <li> <li> <a href =#tritypes> tipos de triatlón </a> </li> <li> <a href =#mytri> El tipo de triatlón que estoy apuntando < /a> </li> </ul> </ul> </ar Nav> </weater> <main Room = main> <Atadicle> <Header> ...... </weader> <s aparentemente> <h1 > Por qué de es saludable </h1> <section> aquí es tres razones por la cual todos deberían comer más frutas: <ol> <li> La fruta contiene muchas vitaminas </li> <li> La fruta es una fuente de fibra </li> <li> La fruta contiene W Callies </li> </ol> <sectione> << Sección> <p> Me gusta nadar, andar en bicicleta y correr. /P> <summary> Tipos de triatlón </summary> Hay diferentes tipos de triatlón -sprint, lympic, etc. Li> <li> Ciclo de 40 km </li> <li> 10km Run </li> </ol> </settle> </section> </icículo> </inter> <am> Más información: <a href = http: // fruit .org> Aprenda más sobre frutas </a> <a href = http://triathlon.org> Aprenda más sobre trithlons </a> </am> <foloter id = mainfooter> © 2011, Adam Freeman.
El documento anterior contiene muchos elementos HTML5.
títuloHTML define un sistema de elementos titulado, de H1 a H6, y H1 es el más alto. El título del mismo nivel generalmente se usa para dividir el contenido en varias partes, cada parte de un tema. El título en todos los niveles generalmente se usa para representar todos los aspectos del mismo tema. Juntos constituyen el esquema del documento, por lo que los usuarios pueden comprender inicialmente su cuidado y estructura siempre que naveguen el título del documento, y los usuarios pueden navegar rápidamente al contenido de interés a través del sistema de títulos.
<body> <h1> frutas me gustan </h1> ...... </body>Subtitular
El elemento HGROUP se puede usar como un procesamiento general (si no se usa el elemento HGROUP, el título principal y los subtítulos se utilizarán como dos títulos, y después de usar HGroup, el título y los subtítulos se tratarán como un título) para evitar el esquema de perturbar el documento HTML.
<body> <hgroup> <h1> frutas me gustan </h1> <h2> cómo aprendí a amar los cítricos </h2> </hgroup> ...... </body> </body> </body >
Aquí, la forma en que existe cítricos como un sub -tito de frutas que me gustan.
El área principal de la página de la marcaPor lo general, solo hay una parte de la página que representa su contenido principal.
<Body> ...... <main rol = main> <RArlicle> ...... </icículo> </inter> ...... </body>
Rol = Main puede ayudar al área principal de la página de posicionamiento del lector de pantalla.
Crea un artículoEl elemento del artículo representa un contenido independiente en el elemento HTML. El artículo puede anidarse en otro artículo. Una página puede tener múltiples elementos del artículo, cada artículo puede formarse de forma independiente y un artículo puede contener uno o más elementos de sección (consulte la siguiente sección).
<Body> ...... <principal = main> <Atadicle> <WEADER> ...... </header> <sing aparte> ... </scante> <section> ... ... ... </section> </ artículo> <Arttern <Atader> ...... </Header> <SHEST> ...... </scante> <section> .../Sección> </Artículo>. .. </main> ...... </body>sección
El elemento de sección es HTML5 recientemente agregado para representar una sección en el documento. No hay una especificación clara para usar el elemento de sección, pero generalmente el elemento de sección debe usarse para incluir que debe incluirse en el esquema del documento o el directorio. La sección puede pertenecer a un determinado artículo, y un artículo puede contener una o más secciones. Los elementos de sección generalmente contienen uno o más párrafos y un título, pero el título no es necesario.
<Body> <Section <Hgroup> <h1> FRUTS me gustan </h1> <h2> cómo aprendí a amar los cítricos </h2> </hgroup> me gustan las manzanas y las naranjas. , Mangos, cerezas, albaricoques, ciruelas, duraznos y uvas.
Lo anterior define 3 secciones, capas anidadas, el título de cada sección es H1. Sin embargo, en diferentes navegadores, la apariencia predeterminada de la estructura jerárquica de la sección será diferente, y este problema se puede resolver creando un estilo personalizado. La diferencia entre la sección y el artículo es que la sección está más organizada y estructural en esencia y puede considerarse como un párrafo independiente, mientras que el artículo representa un contenedor contenido.
Primero y colaEl elemento encabezado representa la primera sección, que puede incluir el encabezado y el logotipo. El elemento de encabezado generalmente contiene un elemento de título o un elemento HGROUP, y también puede contener los elementos de navegación de esta sección. Una página puede contener un número arbitrario de elementos de encabezado, y su significado puede ser diferente según su contexto.
El elemento FOOS representa la cola de la sección, que generalmente contiene la información resumida de la sección, y también puede incluir la introducción del autor, la información de derechos de autor, los enlaces al contenido relacionado, el logotipo y las declaraciones exentos.
<body> <curebel> <hgroup> <h1> cosas que me gustan </h1> <h2> por Adam Freeman </h2> </hgroup> </header> <seader> <hgroup> <h1> frutas que me gustan < /h1> <h2> Cómo aprendí a amar los cítricos </h2> </hgroup> </ceurer> ...... </section> <seader> <h1> Actividades que me gustan </h1> </Header > ...... <section> <Fooler id = mainfooter> © 2011, Adam Freeman.
Este ejemplo define 3 elementos de encabezado. El elemento de encabezado de los elementos del cuerpo es el primero de todo el documento.
Nota: No puede estar anidado con encabezado u otro pie de página en el pie de página, ni puede anidarse en el elemento de encabezado o dirección.
Área de navegaciónLos elementos de NAV representan el área de navegación en el documento, que contiene enlaces a otras partes de otras páginas u otras partes de la misma página. No todos los enlaces deben colocarse en elementos de Nav.
<Body> <WEADER> <HGROUP> <H1> Cosas que me gustan </h1> <h2> por Adam Freeman </h2> </hgroup> <am> <h1> contenido </h1> <ul> <li> <A href =#fruitsilike> frutas me gustan </a> </li> <ul> <li> <a href =#másfruit> frutas adicionales </a> </li> </ul> <li> <a href =#actividadesilike> actividades que me gustan </a> </li> <li> <a href =#tritypes> tipos de triatlón </a> </li> <li> <a href =#mytri> El tipo de Triatlón, estoy apuntando a </a> </li> </ul> </ul> </am> </header> <section> ...... </section> <section> .. ... . > </am> <pie id = mainfooter> ...... </footer> </body>
Aquí se utilizan dos elementos de Nav.
Tenga cuidado de no colocar todos los enlaces en el bloque NAV, NAV generalmente debe usarse solo en el área de navegación más grande e importante de la página. Por ejemplo, la navegación del documento proporcionada anteriormente es necesaria para colocarla en el bloque NAV, pero si solo se trata de información sobre la licencia y la información de contacto, no es necesario ponerla en el bloque NAV.
Barra de anotaciónEl elemento aparte se usa para indicar el contenido que está ligeramente manchado con el contenido circundante, similar a la barra lateral en el libro o la revista. Contenido principal.
<Body> <WEADER> ...... </WEADER> <AtAdicle> <WEADER> ...... </header> <s aparte> <h1> por qué la fruta es saludable </h1> <section> aquí AR Threee Bororioneryone Shuld Come más fruta: <ol> <li> La fruta contiene muchas vitaminas </li> <li> La fruta es una fuente de fibra </li> <li> La fruta contiene pocas ca lories </li> <// ol> <section> </sside> ...... </artem> <pie id = mainfooter> ...... </footer> </body>
Puede usar elementos de lado como una barra de notas en una materia impresa, puede introducir otro tema relacionado a través de él o explicar el punto de vista propuesto en el documento principal. También puede usar elementos de lado para almacenar anuncios, enlaces de contenido relacionados, etc.
Información del contactoEl elemento de dirección se utiliza para representar la información de contacto del documento o el elemento del artículo. Si el elemento de dirección es un sub -elemento del elemento del artículo, la información de contacto que proporciona se considera el artículo; El elemento de dirección no se puede utilizar para representar la dirección más allá de la información de contacto del documento o artículo, como: no se puede utilizar para representar la dirección del cliente o usuario.
<Body> <WEADER> ...... <Dirección> ¿Preguntas y comentarios?Área detallada
Los elementos de detalles generan un área en el documento, y los usuarios pueden comenzar para comprender más detalles sobre un tema. Los elementos de detalles generalmente contienen un elemento de resumen para generar una etiqueta o título de descripción para el área de detalles.
<Body> <WEADER> ...... </Arter> <AtCticle> <WEADER> ...... </header> <section> <p> Me gusta nadar, andar en bicicleta y ejecutar. Entrenamiento para mi primer triatlón, pero es un trabajo duro. : <ol> <li> 1.5km de natación </li> <li> 40km ciclo </li> <li> 10km Run </li> </ol> </section> </</section> </icículo> </body>
Los elementos de detalles tienen la apariencia predeterminada en el navegador.
Los elementos de detalles se plegarán de forma predeterminada.
<Sports Open> <summary> Tipos de triatlón </summary> Hay diferentes tipos de triatlón -sprint, olímpico, etc. /li> <li> 10km Run </li> </ol> </fails>
El efecto es el siguiente:
resumenLos elementos semánticos de HTML5 se definen sobre la base de sus inventores en el estudio de las páginas web existentes no solo exploraron sus sitios favoritos, sino que también estudiaron la información estadística de Google sobre la página web de mil millones. Si está interesado, puede verlo aquí (el sitio de Google, no puede verlo directamente).
En la actualidad, los elementos semánticos de HTML5 han sido apoyados en todos los navegadores modernos, pero para algunas versiones antiguas de navegador (principalmente el Explorador de Internet de IE9), se necesitan algunas medidas correctivas. Debido a que los elementos semánticos en sí no hacen nada, deben apoyarlos, siempre y cuando el navegador pueda tratarlos como elementos DIV ordinarios, y el resto del trabajo es agregarles algunas reglas de estilo. problemático. Afortunadamente, este trabajo Modernizr te ha ayudado a lograrlo.