Hogar › Servicios › Elementos HTML. sintaxis XML

Elementos HTML. sintaxis XML

¡Hola queridos lectores del blog! Continuamos con la sección "Crear un sitio web desde cero" y, en particular, el tema de las etiquetas... Y hoy veremos las etiquetas que están presentes en cualquier página de Internet. , Y . Hay una etiqueta más que debe estar en cada documento HTML y sobre la cual ya escribí en uno de los artículos anteriores, por lo que no la tocaremos.

En artículos anteriores de esta sección, escribí sobre la creación de un archivo vacío en formato html. De hecho, se usó en el artículo sobre (ahí es donde se aplicaron las etiquetas de título). Ahora editaremos directamente este archivo con descripciones completas.

Y comenzaremos el artículo editando el archivo creado. Personalmente lo llamé index.html, pero el nombre puede ser cualquier cosa. Ábrelo usando cualquier editor de texto (es mejor usar Notepad++, ya que tiene resaltado de código y otros elementos útiles). E inmediatamente agrégale etiquetas. , Y exactamente en el orden en que están escritos. No olvides cerrarlos, como se muestra en la captura de pantalla. El documento se verá así:

Ahora veamos el significado de cada etiqueta por separado. No en vano están en todos. Documento HTML.

Funciones de etiqueta

Entonces la etiqueta es recipiente(). Contiene todo el contenido visible e invisible de una página web (incluidas las etiquetas Y ). Etiqueta de apertura viene inmediatamente después de la declaración Doctype, y el cierre aparece al final del documento. Por lo tanto, le deja claro al navegador dónde comenzar a procesar el documento y dónde finalizarlo.

En teoría, él mismo puede entender qué y cómo. ¿En realidad? Este es un traductor HTML y es poco probable que comience a procesar desde la mitad del documento y lo termine antes de llegar al final. La pregunta es, por supuesto, controvertida, pero siempre pensé (y ahora no abandono mi opinión) que escribir esta etiqueta es obligatorio.

Incluso considerando que la función de esta etiqueta es sólo marcando límites de contenido, tiene sus propios atributos (que ahora no se utilizan en absoluto o se utilizan muy raramente). Diferentes fuentes indican diferentes atributos, por lo que no me atrevo a presentar la versión correcta.

Lo único que puedo decir con seguridad es que la mayoría de los atributos no son compatibles con HTML 4.01 o no son deseables. Aunque todavía daré un ejemplo.

: información sobre herramientas en cualquier parte del documento. Por ejemplo, cuando pasa el mouse sobre una imagen, es posible que aparezca un texto emergente. También en el caso de esta etiqueta:

Esto es lo que verá cuando pase el cursor sobre un documento con este contenido: Es preferible utilizar el atributo de título que no esté en la etiqueta.

y en cualquier otra área específica de la página. En primer lugar, es conveniente y, en segundo lugar, los motores de búsqueda tratarán mejor su sitio. Esta etiqueta no afecta directamente a la optimización de recursos. Sigamos adelante.

Función de etiqueta Y el siguiente en la fila es etiqueta . Contiene toda la información técnica de la página, que sirve de ayuda al navegador y a los motores de búsqueda. La etiqueta es una etiqueta de contenedor y viene inmediatamente después, solo que a diferencia del último, la etiqueta de cierre .

no aparece al final del documento, sino antes de la etiqueta de apertura ¿Qué información puedes ver en ? Pero ninguno. Todo lo que está dentro de esta etiqueta es accesible al ojo humano únicamente viendo el código fuente de la página. Todo el contenido de esta etiqueta está destinado a motores de búsqueda y navegadores . Lo único que puedes ver de alguna manera es la etiqueta.</p> <p><img src='https://i0.wp.com/monetavinternete.ru/wp-content/uploads/2013/01/Title-v-tege-head.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>, que es responsable del título de la ventana de la página web. He aquí un ejemplo: <title>El texto después del icono es el contenido de la etiqueta. <head>. Ahora veamos el contenido. <b>, que no podemos ver, pero que es una parte muy importante</b> creación y promoción del sitio.</p><p> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </p><p>Primero que nada, esta es la línea. <b>Esta es una metaetiqueta responsable de</b> tipo de contenido de la página <link>(Tipo de contenido). En este caso, se trata de código html en codificación UTF-8 (content="text/html; charset=UTF-8"). Luego viene la etiqueta de título descrita anteriormente. Luego vienen las líneas que comienzan con la etiqueta.</p><p> <link href="http://сайт/.../style.css" rel="stylesheet" media="screen" type="text/css" /> </p><p>. Indica un enlace a un documento externo. Por ejemplo, la línea <b>indica que está conectado un archivo (rel="stylesheet") con (type="text/css"), que se encuentra en tal o cual dirección (para reducir la longitud de la línea, reemplacé la mitad de la dirección con puntos) . Después de procesar esta cadena por parte del navegador, determinará de dónde obtenerla.</b>.</p> <p>hojas de estilo en cascada <b>En general, la etiqueta principal contiene mucha información de la que puedes hablar sin cesar. Lo último que vale la pena destacar (específicamente en el caso de) es la presencia de etiquetas de descripción, palabras clave y canónicas. yo uso</b> Complemento de paquete SEO todo en uno <head>.</p> <p>¡Hola, queridos lectores del blog! En el último artículo, descubrimos qué es un tipo de documento y cómo los navegadores determinan el idioma utilizado. Se consideró la etiqueta, pero no el concepto (término) en sí. En este artículo te diré qué es una etiqueta, por qué es necesaria y qué tipos de etiquetas existen. Como dije en el último artículo de esta sección, crearemos una página de archivos, con la que experimentaremos, según los conocimientos que hayamos adquirido. Pero esto está al final del artículo, pero por ahora veamos la etiqueta HTML.</p> <h3>¿Qué es una etiqueta HTML, tipos de etiquetas HTML, ejemplos de escritura?</h3><b>etiqueta HTML</b>- traducido del inglés <b>etiqueta - etiqueta</b>-caracteres encerrados entre corchetes angulares y que son elementos del lenguaje de marcado de hipertexto (HTML). Los símbolos sólo pueden estar en inglés (todo Internet se basa en él). La etiqueta parece <strong></strong> <p>Esta es una etiqueta para poner el texto en negrita. Las etiquetas tienen tres tipos:</p> <ul><li><b>Etiqueta de apertura</b>- etiqueta al principio. En el ejemplo anterior, la etiqueta <strong>se abre y se sitúa delante del texto que debe resaltarse.</li> <li><b>etiqueta de cierre</b>- etiqueta al final. Una característica distintiva es la barra diagonal “/” antes de los caracteres entre paréntesis angulares. Veamos nuevamente el ejemplo discutido anteriormente. Etiqueta</strong> está cerrando y viene después del texto, que debe resaltarse en negrita</li> <li><b>Etiquetas individuales</b>- etiquetas que no tienen etiqueta de cierre. Un ejemplo sería <br />Aquí hay un ejemplo de una etiqueta de apertura y cierre:</li> </ul> <strong></strong> <p>Todo el diseño, incluido el texto, quedará así:</p><p> <strong>Este texto se resaltará en negrita.</strong> </p><p>Y así será este texto cuando el navegador lo procese y nos lo proporcione: <b>Este texto se resaltará en negrita.</b> También existe un concepto como <b>etiquetas de contenedores</b>, pero este es sólo un nombre genérico para las etiquetas de apertura y cierre. Como escribí anteriormente, además de las etiquetas de contenedor, también hay etiquetas individuales. La diferencia es que no es necesario cerrar dichas etiquetas. El ejemplo más claro y común es la etiqueta de nueva línea.</p><p>Básicamente, las etiquetas individuales se utilizan para insertar un elemento, como una imagen o una tabla.</p> <h3>¿Qué son los atributos, las reglas de escritura y por qué son necesarios?</h3>Además de las etiquetas, también existen las llamadas <b>atributos</b>. Más precisamente, no además, sino en etiquetas. Usando atributos, puede establecer parámetros adicionales para una etiqueta. <b>Atributos</b> cada etiqueta tiene la suya, pero en este tema experimentaremos con la etiqueta <font>, que, sin atributos, en realidad no hace nada significativo. <p><b>Fuente</b>— una etiqueta contenedora utilizada para dar formato al texto. Con esta etiqueta, puede poner el texto en negrita, cambiar el tamaño y la distancia entre líneas; en general, todo lo que puede hacer con el texto. Veamos un ejemplo con el tamaño del texto. Primero, incluyamos el texto en una etiqueta de fuente.</p><p> <font>Texto</font> </p><p>Ahora un poco sobre las reglas para escribir atributos. Atributos <b>Siempre</b> están escritos en la etiqueta de apertura y después de los caracteres de la propia etiqueta. Puede escribir varios atributos en una etiqueta en cualquier orden. Puede encontrar los atributos en el sitio web del validador del W3C (sobre el que escribiré a continuación). Aquí hay un ejemplo de una etiqueta de fuente con un atributo de tamaño:</p><p> <font size="5">Texto</font> </p><p>Este atributo en la etiqueta de fuente cambia el tamaño del texto encerrado en las etiquetas. <br>Si abre el código fuente de la página, verá que el lugar donde se encuentra la palabra grande "Texto" se parece</p><p> <font size="5">Texto</font> </p><p>Ya has visto cómo se escriben los atributos. Se escriben exactamente de la misma manera en otras etiquetas: primero escribimos el atributo en sí (en este caso tamaño), luego ponemos “=" y encerramos el parámetro del atributo entre comillas dobles. Puede encontrar todos los parámetros de atributos en el mismo sitio web del World Wide Web Consortium.</p> <h3>¿Qué es un validador del W3C, reglas de escritura y lista de etiquetas?</h3>Como escribí, hay muchas etiquetas. ¿Pero dónde puedes encontrarlos todos? Para esto existe <b>validador del W3C</b> W3C - <b>Consorcio World Wide Web,</b> y en ruso, el Consorcio World Wide Web. No está del todo claro, ¿verdad? Este es el lugar donde se desarrollan los estándares web (los lenguajes de marcado de hipertexto son su creación). Al frente de todo el consorcio está Tim Berners-Lee, conocido por el artículo anterior, el creador de HTML. El sitio web de esta organización es w3.org. Te lo advierto, el sitio está completamente en inglés, así que ten un diccionario o traductor en tu navegador. Por cierto, la calificación de Google para este sitio es 9 y 37.000 (eso es mucho, si alguien no lo sabe). <p>Volvamos al tema del artículo. Estamos interesados en los estándares del lenguaje HNTML 4.01. Siga el enlace Especificación HTML 4.01, después de lo cual vemos la pestaña de elementos en la parte superior, haga clic en ella. Aquí se abre la página con todas las etiquetas. Estas etiquetas fueron desarrolladas y adoptadas como estándar por el consorcio. Todo, nuevamente, está en inglés. Inmediatamente después de las palabras "Índice de elementos" vemos una leyenda (el significado de las letras en las columnas): <br><img src='https://i2.wp.com/monetavinternete.ru/wp-content/uploads/2012/09/Legenda-validatora-W3C.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>E inmediatamente después de la leyenda hay una tabla de las propias etiquetas:</p> <p><img src='https://i2.wp.com/monetavinternete.ru/wp-content/uploads/2012/09/Tablitsa-tegov-na-sayte-W3C.png' align="center" width="100%" loading=lazy loading=lazy></p> <ul><li>En la primera columna - <b>Nombre</b>— el nombre de la etiqueta en sí es lo que debería estar entre corchetes angulares (< и >).</li> <li>Segunda columna - <b>Etiqueta de inicio</b>- presencia de una etiqueta de apertura. En esta columna puede ver la letra "O", que significa "Opcional", y traducida del inglés - Opcional. Esta letra está presente sólo frente a las etiquetas. <html>, <head>, <body>Y <tbody>y significa que puedes poner una etiqueta de apertura, o no es necesario: el navegador hará todo por sí solo.</li> <li>Tercera columna - <b>Etiqueta final</b>— presencia de una etiqueta de cierre. Frente a esta etiqueta puedes ver tanto la letra “O” como la letra “F”. El significado del primero no ha cambiado. La segunda letra, "F", literalmente "prohibido" en inglés, significa que está prohibido poner una etiqueta de cierre, simplemente no existe. Por ejemplo, no hay ninguna etiqueta.</img>, porque no hay nada que ocultar en él.</li> <li>Cuatro - <b>Vacío</b>— significa que la etiqueta es única (vacía). Todas las etiquetas que tienen la letra "E" al lado en esta columna también tienen la letra "F" en la columna anterior. Después de todo, las etiquetas individuales no tienen etiquetas de cierre. Un ejemplo es la misma etiqueta. <img>.</li> <li>Quinta columna - <b>Dep.</b> o <b>En desuso</b>- del inglés "no recomendado". Si esta columna contiene la letra “D” (que significa exactamente lo mismo) significa que no se recomienda el uso de esta etiqueta en HTML. Mirando un poco hacia el futuro, hoy en día se utilizan hojas de estilos en cascada (CSS) para diseñar tanto el texto como la apariencia de todo el sitio web y el documento HTML. En pocas palabras, se crea un archivo en el que se escriben todos los parámetros de texto que pueden ser llamados por ciertos atributos de etiqueta. Entonces, esta función se usa solo en sitios web, porque CSS no es aplicable al enviar noticias por correo o RSS. Y aquí estas mismas etiquetas vienen al rescate. La mayoría de estas etiquetas, por cierto, se relacionan con el diseño de texto ( <font>Y <Center>son un ejemplo)</li> <li>Sexta columna - <b>DTD</b>- puede contener una letra <b>"L"</b>, o <b>"F"</b>. Primero - <b>"L"</b> - <b>DTD suelto</b>— significa que la etiqueta frente a la cual aparece esta carta sólo puede utilizarse en un tipo de documento transitorio (<!DOCTYPE>- Transicional, sobre el que escribí en el artículo anterior). Segundo - <b>"F"</b> — <b>Cuadro DTD</b>— significa que la etiqueta sólo se puede utilizar en un documento, escriba FRAMESET (<!DOCTYPE>- Conjunto de cuadros). Si falta la letra, la etiqueta se puede utilizar en todo tipo de documentos.</li> <li>Y la última, séptima columna - <b>Descripción</b>— una breve descripción de la etiqueta, nuevamente en inglés</li> </ul><p>Los atributos están contenidos en la misma página de la especificación HTML 4.01, pero en la pestaña “atributos”. Hay muchos más atributos que etiquetas. Y nuevamente escribiré todo punto por punto.</p> <ul><li>Primera columna - <b>Nombre</b>– como en el caso de las etiquetas – el nombre del atributo. Todo está en inglés, pero con conocimientos básicos puedes adivinar qué hace tal o cual atributo.</li> <li>Segunda columna - <b>Elementos relacionados</b> es una lista de todas las etiquetas que utilizan cualquier atributo. Todas las etiquetas tienen enlaces, por lo que puede acceder inmediatamente a información sobre la etiqueta.</li> <li>Tercera columna - <b>Tipo</b> Son todos los valores posibles para un atributo en particular. Por ejemplo, frente al atributo de tamaño que seleccionamos en la etiqueta Fuente está el valor CDATA. Lo veremos más adelante, pero en resumen, es un conjunto especial de opciones de tamaño (en este caso). Después de todo, puedes escribir tanto píxeles como porcentajes.</li> <li>Cuarta columna - <b>Por defecto</b>- indica si el atributo es requerido en una etiqueta determinada. Por ejemplo, en la etiqueta Img se requiere el atributo src, ya que indica la fuente de donde tomar la imagen.</li> <li>Las columnas 6, 7 y 8 significan lo mismo que en el caso de las etiquetas.</li> </ul><p>Todo lo anterior se aplica sólo a la versión HTML 4.01. Hablaremos de HTML 5 en otro artículo y también tocaremos XHTML. Y ahora, como prometí, crearemos una página en HTML con la que experimentaremos.</p> <h3>Crear un archivo en formato html - documento HTML</h3> <p>Primero que nada, averigüemos qué es. <b>documento HTML</b>. Y este es, de hecho, un archivo en formato HTML. Y todas las páginas de Internet son documentos HTML. Por ejemplo, cuando accedes a un sitio web, en la barra de direcciones al final puedes ver ".html" o ".htm" después de la dirección. Este es el archivo que crearemos con esta extensión. En general, si desea experimentar en un sitio web y no en una página, es mejor crear un servidor local: Denver (sobre el cual quiero escribir).</p> <p>Teniendo en cuenta que ni siquiera hablé de las etiquetas presentes en cada página, simplemente crearemos un archivo con cualquier nombre y extensión.html. Es posible (y mejor) utilizar <b>Bloc de notas++</b>, porque este editor de texto utiliza resaltado de código, lo cual es muy conveniente al editar código y puede guardar archivos en una variedad de formatos. También hay programas en los que, cuando se escribe un código, el resultado aparece inmediatamente en forma procesada.</p> <p>Entonces solo necesitamos abrir <b>Bloc de notas++</b> y guarde un archivo con texto arbitrario (también puede vaciarlo), pero en formato .html. Para hacer esto, como de costumbre, haga clic en la inscripción del archivo, luego "guardar como" y busque entre la gran lista de extensiones. <b>"Archivo de lenguaje de marcado de hipertexto</b>(extensiones de archivo)". Eso es todo, en realidad. Agregaremos las primeras líneas a este archivo en el próximo artículo de la sección “Crear un sitio web desde cero”</p> <p>El contenido de un documento html o una página web está determinado por el contenido de los elementos html.</p> <h3>elementos HTML</h3> <p>Un elemento HTML es todo lo que se encuentra entre las etiquetas de inicio (apertura) y fin (cierre).</p> <h3>Sintaxis del elemento HTML</h3> <ul><li>El elemento HTML comienza con <b>etiqueta de apertura/inicio</b>.</li> <li>El elemento HTML termina <b>etiqueta de cierre/finalización</b>.</li> <li><b>Contenido del elemento</b> Esto es todo lo que hay entre las etiquetas de apertura y cierre.</li> <li>Algunos elementos pueden ser <b>vacío</b>.</li> <li>Los elementos vacíos consisten sólo en <b>apertura</b> etiqueta.</li> <li>La mayoría de los elementos html pueden tener <b>atributos.</b></li> </ul><p>(Aprenderá más sobre los atributos en capítulos posteriores del tutorial).</p> <h3>Elementos anidados</h3> <p>La mayoría de los elementos html se pueden anidar unos dentro de otros. Un documento HTML consta de elementos anidados.</p> <h3>Ejemplo</h3> <html><p> <body><br> <p>Este es mi primer párrafo.</p><br> <script type="text/javascript">  </script><br> <br> </body></p> <p>El ejemplo anterior consta de tres elementos:</p> <p><b>1. </b> Elemento <b><p> </b> Se utiliza para insertar un párrafo en una página web. Tiene etiquetas de apertura y cierre. El contenido de este elemento en nuestro ejemplo es la inscripción "Este es mi primer párrafo".</p> <p><b>2. </b> Elemento <b><body> </b> Describe la parte visible del contenido de una página web. Tiene etiquetas de apertura y cierre. Contiene un elemento <p>Con contenido propio.</p> <p><b>3. </b> Elemento <b><html> </b> describe todo el documento html. Tiene etiquetas de apertura y cierre. Ya contiene dos elementos. <body>Y <h3>No olvides la etiqueta de cierre.</h3> <p>La mayoría de los navegadores mostrarán su código HTML correctamente incluso si olvida incluir la etiqueta de cierre. Sin embargo, esto puede provocar errores y resultados impredecibles.</p> <p>¡Atención! Las versiones futuras de HTML evitarán que olvides las etiquetas de cierre.</p> <h3>Elementos HTML vacíos</h3> <p>Los elementos HTML sin contenido se denominan elementos vacíos. Los elementos vacíos constan de una sola etiqueta.</p> <p><b><br> </b> Este es un elemento vacío que no tiene etiqueta de cierre (se usa para mostrar una barra horizontal).</p> <p>En XHTML, XML y versiones futuras de HTML, todos los elementos deben ser privados. Para hacer esto, solo necesita agregar una barra diagonal separada por un espacio después del nombre de la etiqueta. <b><br /> </b>. Este es un buen hábito que te resultará útil en el futuro.</p> <p>Un programador se enfrenta a una serie de problemas al escribir etiquetas HTML. Cuando se trabaja en un sitio grande, el código del programa crece y el control se vuelve problemático; es posible que el programador no cierre la etiqueta y el diseño del sitio "desaparecerá": un bloque encaja en otro y la apariencia del sitio se deteriorará.</p> <i> </i><p>El diseño de bloques es el infierno de un programador</p><br>En un sitio grande, realizar un seguimiento de las etiquetas es problemático, especialmente si varios programadores trabajan en su desarrollo. Los fundadores de HTML advierten a los programadores y les instan a respetar los estándares. Los pequeños errores en el código son normales y fáciles de solucionar. Veamos formas de comprobar el código HTML en busca de errores y <b>identificar etiquetas abiertas y otros elementos</b>. <h2>Identificar etiquetas no cerradas</h2> <p>Cómo verificar el código de divs no cerrados ( <div>), elementos de la tabla ( <table> / <tr> / <td>) y otras etiquetas? La forma más sencilla es un editor de texto con resaltado de sintaxis. Descargue notepad++, que admite docenas de lenguajes de programación. Destaca HTML, JavsScript, PHP y otros lenguajes necesarios para la codificación web.</p> <p>Inspeccionar elementos HTML normales no es difícil, y si las etiquetas de inserción de hipervínculos no están cerradas " <a>» etiquetas de formato « <b> » / « <h1>" o " <noindex>" se puede determinar visualmente, esto no funcionará con elementos de bloque como divs y tablas. El código es grande, un div es un contenedor de otro, si hay mucho anidamiento, puede confundirse y eliminar accidentalmente un elemento y el diseño saldrá mal. <br></p><p><img src='https://i0.wp.com/moredez.ru/wp-content/uploads/2017/09/%D0%A0%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BA%D0%BE%D0%B4%D0%B0-html-%D1%81-%D0%BF%D0%BE%D0%B4%D1%81%D0%B2%D0%B5%D1%82%D0%BA%D0%BE%D0%B9-%D1%81%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%81%D0%B0-%D1%87%D0%B5%D1%80%D0%B5%D0%B7-notepad.png' width="100%" loading=lazy loading=lazy></p><br><b>Para detectar una etiqueta abierta (elemento de página html), active el resaltado en notepad++</b> <ol><li>1. Seleccione "Sintaxis" en el menú.</li> <li>2. Seleccione el idioma deseado, en nuestro caso HTML</li> <li>3. Número de línea</li> <li>4. Barra de árbol que le permite ver el interior de las etiquetas.</li> </ol><p>El chequeo consiste en cerrar un div tras otro haciendo clic en los signos más “+” si la etiqueta no cierra, entonces no hay etiqueta de cierre; Examinamos el código y escribimos el que falta en el lugar correcto.</p> <p>Puede determinar a qué etiqueta de cierre pertenece un elemento haciendo clic en esta etiqueta en el editor. El editor resaltará la etiqueta de apertura y la etiqueta de cierre asociada a ella. Puede detectar un error de escaneo cuando no se encuentra el elemento de cierre, o pertenece a otro elemento, lo que rompe la lógica del código.</p> <p>Este es el método de verificación más simple que requiere trabajo manual. No existen sistemas automatizados; sólo un programador puede saber dónde cerrar un div o una tabla sin alterar el diseño visual de la página. <br></p><p><img src='https://i2.wp.com/moredez.ru/wp-content/uploads/2017/09/%D0%9F%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80-%D0%B8-%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B8%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%BE%D0%B3%D0%BE-%D0%BA%D0%BE%D0%B4%D0%B0-%D0%B2-%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B5.png' width="100%" loading=lazy loading=lazy></p><br>Utilice depuradores FireBug integrados (FireFox) e inspectores de investigadores basados en navegador. Puede abrir el depurador de código (editor) en Opera presionando la combinación "Ctrl-Shift-C" o como se muestra en la figura. Haga clic derecho en el objeto en estudio y en el menú contextual haga clic en "Ver código de elemento". <h2>Validador HTML: Análisis general y búsqueda de errores en el código.</h2> <p>Puede verificar el código en busca de errores utilizando el validador HTML: W3C.</p> <p>Servicio de validación de marcado (MVS): este validador verifica el marcado correcto de los documentos web en HTML, XHTML, SMIL, MathML, etc. Si desea comprobar contenido específico, como fuentes RSS/Atom u hojas de estilo CSS, contenido de MobileOK o encontrar enlaces rotos, existen otros validadores y herramientas disponibles. Alternativamente, puede probar nuestro validador no basado en DTD.</p> <p><img src='https://i2.wp.com/moredez.ru/wp-content/uploads/2017/09/%D0%9F%D1%80%D0%BE%D0%B2%D0%B5%D1%80%D0%BA%D0%B0-%D0%BD%D0%B5%D0%B7%D0%B0%D0%BA%D1%80%D1%8B%D1%82%D1%8B%D1%85-%D1%82%D0%B5%D0%B3%D0%BE%D0%B2-%D0%B8-%D0%B4%D1%80%D1%83%D0%B3%D0%B8%D1%85-%D0%BE%D1%88%D0%B8%D0%B1%D0%BE%D0%BA-%D0%BA%D0%BE%D0%B4%D0%B0-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B.png' width="100%" loading=lazy loading=lazy></p> <p>El servicio le permite verificar CSS, HTML, XHTML, JS... después de analizar el sitio, el servicio mostrará errores y un método para eliminar la sección problemática del código. Puede solucionarlo, pero no es necesario. Escuche el servicio si su sitio se muestra e indexa normalmente. Cada 2 sitios principales no cumplen totalmente con los estándares HTML, compruébelo usted mismo.</p> <p>Como dije antes, las etiquetas HTML son instrucciones especiales que indican a los navegadores cómo mostrar una parte particular de una página. Ahora hablaremos de ellos con más detalle, pero no intentes recordar todo a la vez; no podrás ni es necesario, ya que en los capítulos restantes encontrarás etiquetas en cada paso. Poco a poco todo será recordado por sí solo. Simplemente lea e intente comprender.</p> <h2>Etiquetas de apertura y cierre, etiquetas de contenedores.</h2> <p>Las etiquetas pueden ser <i>apertura</i>(inicial) y <i>cierre</i>(final). Las etiquetas de apertura constan de "<» и «>”entre los cuales se indica el nombre de la etiqueta, y para las etiquetas de cierre, se coloca adicionalmente una barra diagonal (/) antes del nombre.</p> <p>La mayoría de las etiquetas HTML están emparejadas: tienen una etiqueta de apertura y cierre obligatoria, por ejemplo: <STRONG>Y</STRONG>. Algunos solo tienen una etiqueta de apertura, por ejemplo <BR>, y se llaman <b>vacío</b>. Otros pueden tener una etiqueta de apertura y una etiqueta de cierre puede especificarse o no, luego el propio navegador determinará dónde termina la etiqueta.</p> <p>Las etiquetas que tienen una etiqueta de cierre obligatoria u opcional se denominan <b>etiquetas de contenedores</b> o <b>elementos del contenedor</b>.</p> <p>Todas las etiquetas HTML no distinguen entre mayúsculas y minúsculas, lo que significa que puede especificar <STRONG>Y <strong>o en general <sTRonG> .</p> <p>Ahora un consejo. Te recomiendo que siempre escribas las etiquetas en minúsculas (minúsculas) e incluyas etiquetas de cierre opcionales. En primer lugar, esto es una señal de profesionalismo y buenos modales y, en segundo lugar, el código HTML con todas las etiquetas de cierre es mucho más fácil de navegar y editar. Bueno, sí, te lo recordaré más de una vez.</p> <p>Ejemplo de uso de etiquetas</p><p> <b>Negrita</b> <i>fuente cursiva</i> </p><p>Resultado en el navegador</p> <h2>Y, sin embargo, ¿qué sería correcto: “etiquetas” o “elementos”?</h2> <p>En general, en la mayoría de los casos será correcto decir “elementos”. Son los elementos HTML los que componen una página web, y son los elementos los que muestran imágenes, tablas, enlaces, etc. en la ventana del navegador. Y las etiquetas están diseñadas para indicarle al navegador dónde y qué elemento está ubicado, comienza y termina. Veamos nuevamente el ejemplo anterior. Hay dos elementos enumerados allí B e I. Cada uno de ellos contiene texto sin formato y tiene etiquetas de apertura y cierre.</p> <p>Dio la casualidad de que hoy la palabra "etiqueta" ha entrado firmemente en el idioma ruso (y no sólo en ruso) como sinónimo de la palabra "elemento". Pienso porque al usar ambas palabras no se pierde el significado de la historia. Por eso, en este tutorial también utilizaré ambas palabras para que te acostumbres a ellas y aprendas a determinar inconscientemente lo que se dice en cada caso concreto. Y no te preocupes demasiado por esto, ya sabes en qué se diferencia una etiqueta de un elemento, eso es bueno.</p> <h2>Las etiquetas se pueden especificar en una línea o en varias.</h2> <p>Sí, las etiquetas HTML se pueden especificar en una línea o en varias, para los navegadores esto no importa, simplemente ignoran los saltos de línea; También puede colocar tantos espacios como desee entre etiquetas: los navegadores perciben todos los espacios consecutivos como uno solo. Por ejemplo, así:</p> <p> <b>Negrita</b> <i>fuente cursiva</i> </p><p>Resultado en el navegador</p> <h2>Anidamiento correcto de etiquetas</h2> <p>Se pueden anidar muchas etiquetas para que funcionen juntas en el mismo elemento de página. Pero al mismo tiempo es importante observar el anidamiento correcto: la etiqueta que aparece antes debería cerrarse más tarde. Por cierto, el error de anidamiento es uno de los más comunes entre los principiantes.</p> <p><тег1><тег2><тег3> ...<span></тег3></тег2></тег1> </span>- Bien</p> <p><тег1><тег2><тег3> ...<span></тег1></тег3></тег2> </span>- equivocado</p> <p>Ejemplo de uso de etiquetas anidadas</p><p> <b><i>Fuente negrita cursiva</i></b> </p><p>Resultado en el navegador</p> <h2>Etiquetas de padres e hijos, descendientes y antepasados</h2> <p>Para indicar la estructura jerárquica de las etiquetas HTML, normalmente se denominan mediante determinadas palabras. En realidad es muy simple. Entonces tomemos este ejemplo:</p><p> <тег1> <тег2>...</тег2> <тег3><тег4>...</тег4></тег3> </тег1> </p><p><b>Etiquetas principales</b>- una etiqueta es la madre de otras etiquetas si están anidadas dentro de ella en un nivel. En nuestro ejemplo<ТЕГ1>es el padre de<ТЕГ2>Y<ТЕГ3>, pero no es para la etiqueta<ТЕГ4>. Pero<ТЕГ3>padre<ТЕГ4> .</p> <p><b>Etiquetas infantiles</b>- volver a los padres.<ТЕГ2>Y<ТЕГ3>subsidiarias para<ТЕГ1>, A<ТЕГ4>para etiqueta<ТЕГ3> .</p> <p><b>Ancestros</b>- una etiqueta es el antepasado de todas las etiquetas que se encuentran dentro de ella en cualquier nivel de anidamiento.<ТЕГ1>antepasado para todas las etiquetas, y<ТЕГ3>antepasado<ТЕГ4> .</p> <p><b>Descendientes</b>- De vuelta a los antepasados. Todas las etiquetas son descendientes de una etiqueta.<ТЕГ1>, Pero<ТЕГ4>también un descendiente de la etiqueta<ТЕГ3> .</p> <p>Bueno, ¿no estás confundido? Para que sea más fácil de recordar, haga una analogía con su árbol genealógico y todo encajará inmediatamente.</p> <h2>¿Qué significa "una etiqueta contiene otra"?</h2> <p>Como ya sabes, las etiquetas se pueden anidar unas dentro de otras y, en consecuencia, unas pueden contener otras. Pero hay un punto pequeño pero muy importante al que los principiantes a menudo no prestan la debida atención. Tomemos un ejemplo con el que ya estamos familiarizados:</p><p> <тег1> <тег2>...</тег2> <тег3><тег4>...</тег4></тег3> </тег1> </p><p>Se dice que una etiqueta contiene otra sólo si la primera es una etiqueta principal y la segunda es secundaria y nada más. es decir, en nuestro ejemplo<ТЕГ1>contiene<ТЕГ2>Y<ТЕГ3>, pero no contiene<ТЕГ4>. Pero<ТЕГ3>solo contiene<ТЕГ4>. Un poco inusual, ¿verdad? Pero hay una lógica en esto, estarás de acuerdo.</p> <p>Cada elemento HTML sólo puede contener un determinado conjunto de etiquetas y algunos no pueden contener nada más que texto. Todo esto depende del tipo de etiqueta, por lo que antes de anidar etiquetas, verifique si una de ellas puede contener otra.</p> <h2>Tipos de etiquetas</h2> <p>En HTML, las etiquetas se dividen en varios tipos o modelos:</p> <p><b>En línea (integrado, nivel de línea)</b>- todo lo que estas etiquetas muestran en la página siempre lo muestra el navegador en un término. Y solo si el ancho disponible (por ejemplo, el ancho de la ventana del navegador) no es suficiente, la línea se mueve a la siguiente, etc.</p> <p>Ejemplo de uso de etiquetas en línea</p><p> <b>Negrita</b> <i>fuente cursiva</i> </p><p>Resultado en el navegador</p> <p><b>Bloque (bloque, nivel de bloque)</b>- Todo lo que cada una de estas etiquetas muestra en la página lo muestra el navegador en una nueva línea. Estos elementos también crean saltos de línea detrás de ellos.</p> <p>Ejemplo de uso de etiquetas de bloque</p><p> <p>Párrafo 1</p> <p>Párrafo 2</p> </p><p>Resultado en el navegador</p> <p>Párrafo 1</p> <p>Párrafo 2</p> <p>También existen otros tipos de etiquetas, pero hablaremos de ellas en lecciones futuras, y estos dos tipos son los más comunes en HTML.</p> <p>Bueno, espero que todo esté claro hasta ahora. Entonces sigamos adelante.</p> <table id="step"><tr><td></td></tr></table> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="single-popular"> <div class="single-popular-tit col-lg-12">Popular en la categoría:</div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/d8691dd43421f4e1e3504649d9d8d4dd.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Esquema territorial de gestión de residuos: ¿quién lo gestionó?"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Esquema territorial de gestión de residuos: ¿quién lo gestionó?</div> <a href="https://innovakon.ru/es/services/reestr-regionalnyh-operatorov-po-vyvozu-musora.html" rel="bookmark" title="Esquema territorial de gestión de residuos: ¿quién lo gestionó?">leer</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/2b5021baf8662dfc8b91f93f3f0a85c8.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="¿Es posible grabar Windows 7 en una unidad flash USB?"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">¿Es posible grabar Windows 7 en una unidad flash USB?</div> <a href="https://innovakon.ru/es/internet/mozhno-li-zapisat-windows-7-na-fleshku-komandnaya-stroka-vindovs.html" rel="bookmark" title="¿Es posible grabar Windows 7 en una unidad flash USB?">leer</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/5be8b76667696c4cd63a8c38979b50af.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Cómo combinar capas en Photoshop en una o combinarlas en un grupo Cómo combinar varias capas en Photoshop"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Cómo fusionar capas en Photoshop en una o combinarlas en un grupo...</div> <a href="https://innovakon.ru/es/settings/sposoby-obedineniya-sloev-v-fotoshope-kak-obedinit-sloi-v-fotoshope-v.html" rel="bookmark" title="Cómo combinar capas en Photoshop en una o combinarlas en un grupo Cómo combinar varias capas en Photoshop">leer</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/33b72e60e1d3066a9663f391221dc014.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Transferir contactos a un nuevo teléfono Android"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Transferir contactos a un nuevo teléfono Android</div> <a href="https://innovakon.ru/es/phone/perenos-kontaktov-na-novyi-telefon-android-android-prilozheniya.html" rel="bookmark" title="Transferir contactos a un nuevo teléfono Android">leer</a> <div class="clr"> </div> </div> </div> <div class="clr"></div> </div> </div> <div class="sidebar col-lg-3 col-md-4 col-sm-12"> <div class="sidebar-wrp"> <div class="sidebar-wrp-title">Últimos artículos</div> <div class="sidebar-wrp-des"> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/69ab7c4a514157dd575a439526d0aa90.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Samsung Galaxy se reinicia solo -...</div> <div class="clr"></div> <a href="https://innovakon.ru/es/internet/esli-xiaomi-postoyanno-perezagruzhaetsya-samsung-galaksi-perezagruzhaetsya-sam-po.html">leer</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/b3db1735cb04793651f48e6970eac4f4.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Características clave de Kaspersky Rescue Disk</div> <div class="clr"></div> <a href="https://innovakon.ru/es/rates/skachat-zagruzochnyi-disk-kasperskogo-osnovnye-vozmozhnosti-kaspersky-rescue.html">leer</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/d93303aadea847492ee52538b585df87.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">MacBook no se conecta a wifi MacBook no ve...</div> <div class="clr"></div> <a href="https://innovakon.ru/es/phone/macbook-ne-podklyuchaetsya-k-wifi-avtomaticheski-makbuk-ne-podklyuchaetsya-k-wifi-makbuk-ne-vidit-vai-fai.html">leer</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/094fe0c598853f299be65e8611b45d60.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Cómo ganar dinero con WebMoney</div> <div class="clr"></div> <a href="https://innovakon.ru/es/internet/kak-zarabotat-rubli-na-webmoney-kak-zarabotat-na-webmoney-proverennye.html">leer</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/280d369c9d1e343119c3d855af4b9c4d.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Tableta "Supra": opiniones de clientes</div> <div class="clr"></div> <a href="https://innovakon.ru/es/rates/planshet-podelka-est-takoi-supra-firma-supra-planshet-otzyvy-pokupatelei-plyusy-i-minusy.html">leer</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/b1724f08fa52145089eaa72f836127ee.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Ubicaciones de barcos en tiempo real</div> <div class="clr"></div> <a href="https://innovakon.ru/es/settings/voennye-korabli-v-realnom-vremeni-onlain-mestonahozhdeniya-sudov-v.html">leer</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/534951a61241c179a7c060b9fe1143c8.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Los mejores programas para Android Grabar llamadas desde...</div> <div class="clr"></div> <a href="https://innovakon.ru/es/rates/prilozheniya-dlya-android-obuchayushchie-programmy-dlya-detei-luchshie.html">leer</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/e280b0808c5e749938522ba1df2a41ec.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Eliminar a los no seguidores en Twitter</div> <div class="clr"></div> <a href="https://innovakon.ru/es/services/kak-udalit-ne-vzaimnyh-chitatelei-v-twitter-udalyaem-ne-chitatelei-v.html">leer</a> </div> <div class="clr"></div> </div> </div> <div id="text-4" class="widget widget_text sidebar-wrp"> <div class="textwidget"> </div> </div> <div id="ketena1" style="height:500px;width:260px;" align="center"></div> <div class="clr"></div> </div> </div> </div> </div> <div id="footer"> <div class="container"> <div class="row"> <div class="footer-contacts col-lg-6 col-md-6 col-sm-12 col-xs-12"> <img src="/logo/logo.png" loading=lazy loading=lazy> <div class="footer-contacts-tit">innovakon.ru <br>Teléfonos móviles y comunicaciones.</div> <div class="footer-soc"> <div class="footer-soc-wrp"> <div class="soc_w"> <a href="#" class="soc-link vk" target="_blank"></a> <a href="#" class="soc-link fb" target="_blank"></a> </div> </div> </div> </div> <div class="footer-links col-lg-4 col-md-6 col-sm-12 col-xs-12"> </div> <div class="footer-links col-lg-4 col-md-4 col-sm-4 col-xs-4" style="display: block;"> <ul> <li><a href="">Edición del proyecto</a></li> <li><a href="">Publicidad en el sitio.</a></li> </ul> <ul> <li><a href="https://innovakon.ru/es/feedback.html">Contactos</a></li> <li><a href="https://innovakon.ru/es/sitemap.xml">Mapa del sitio</a></li> </ul> </div> </div> </div> <div class="copyright">© 2024 Teléfonos móviles y comunicaciones.</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://innovakon.ru/wp-content/themes/trudinsp/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://innovakon.ru/wp-content/themes/trudinsp/js/SmoothScroll.js"></script> <a id="scroll-to-top" href="#" title="Desplazarse hacia arriba">Arriba</a> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.4.1'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.3'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect-blind.min.js?ver=1.11.4'></script> <script type='text/javascript'> /* <![CDATA[ */ var stbUserOptions = { "mode":"css","cssOptions":{ "roundedCorners":false,"mbottom":20,"imgHide":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/minus.png","imgShow":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/plus.png","strHide":"\u0421\u043a\u0440\u044b\u0442\u044c","strShow":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c"} }; /* ]]> */ </script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/wp-special-textboxes/js/wstb.min.js?ver=5.5.101'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script> <script type="text/javascript">  </script><br> <br> </body> </html>