Semantic HTML Markup/es: Difference between revisions

From Joomla! Documentation

Created page with "Semántica del Formato HTML"
 
 
(27 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude><languages /></noinclude>
<noinclude><languages /></noinclude>
==Semantic HTML==
== HTML Semántico ==


===What is Semantic HTML?===
=== ¿Qué es HTML Semántico? ===


Semantic HTML is a way of using HTML coding to create or enhance the structure of a page. In other words, it's a way of using HTML markup - classes, divs, tags and so forth - to complement the actual words or resources on a page.  This helps 'bots' and visitors using screen readers to understand the structure and context of the information on the page, along with its importance, relevance, and how it is related to other resources.
HTML semántico es una forma de utilizar la codificación HTML para crear o mejorar la estructura de una página. En otras palabras, es una manera de utilizar las etiquetas del lenguaje HTML -clases, divs, etiquetas y demás- para complementar las palabras reales o recursos en una página. Esto ayuda a los 'robots' y a los visitantes que utilizan lectores de pantalla para comprender la estructura y el contexto de la información de la página, junto con su importancia, relevancia, y cómo se relaciona con otros recursos.


===How to use Semantic HTML Markup===
=== Cómo utilizar el Etiquetado HTML Semántico ===


It is important to have an understanding of Semantic HTML if you are developing websites or writing content for them, as you will need to use the structural markup regularly.   
Es importante que tengas una comprensión del HTML Semántico si eres el desarrollador de sitios web o redactor de contenidos para ellos, ya que te será necesario utilizar el marcado estructural con regularidad.   


An example of misuse of Semantic Markup can be found when an article has been written using normal text, but at some point in the text the writer wants to emphasise a particular phrase. They like the styling of the H1 tag, so they apply H1 to this phrase to 'make it look pretty'. Unfortunately, this is confusing to a search engine 'bot' and to users of screen readers, because they are told that this is the main heading of the page - rather than emphasised or important text.   
Un ejemplo del mal uso de Etiquetado Semántico puede ser encontrado cuando un artículo ha sido escrito usando texto normal, pero en algún punto del texto el autor quiere enfatizar una frase en particular. Les gusta el estilo de la etiqueta H1, de manera que se aplica H1 a esta frase para 'lograr que se vea bonito'. Por desgracia, esto es confuso para un motor de búsqueda 'bot' y para los usuarios lectores de pantalla, porque a ellos se les dice que este es el título principal de la página - en lugar de subrayarlo o enfatizarlo con negrita.   


Semantic HTML markup should only ever be used to add structure to a page - not to change the way it looks (this is done using Cascading Style Sheets (CSS) or in-line styling)
El etiquetado HTML semántico debe ser usado sólo una vez para añadir estructura a una página, no para cambiar las forma en que se ve (esto se hace usando Hojas de Estilo en Cascada (CSS) o con en línea)


===An example of Semantic HTML Markup===
=== Un ejemplo de Etiquetado HTML Semántico ===


For example, lets say we have an article:
Por ejemplo, digamos que tenemos el siguiente artículo:


<pre>
<pre>
<h1>Using headings</h1>
<h1>Uso de títulos</h1>
This is an article about the importance of headings
Este es un artículo acerca de la importancia de los títulos


<h2>Why use headings?</h2>
<h2>¿Por qué utilizar los títulos?</h2>
It is important to use headings so that search engine bots can tell what is an <strong>important</strong> part of your article
Es importante el uso de títulos para que los robots de los motores de búsqueda puedan decir que parte del artículo <strong>importante</strong>


<h3>Types of headings</h3>
<h3>Tipos de títulos</h3>
You can use set types of headings, but they should be ordered, and structured, within your page. H1 should be your page title, with H2 being used for sub-headings of the page. Any headings within your sub-headings should cascade using H3, H4, and H5 as appropriate.
Puedes utilizar varios tipos de títulos, pero debes ser ordenado y estructurado, dentro de tu página. H1 debe ser el título de la página, H2 debe ser utilizado para los sub-títulos de la página. Los títulos dentro de su sub-títulos en cascada utilizaran H3, H4 y H5, según corresponda.


<h2>Is it hard to implement headings?</h2>
<h2>¿Es difícil de poner en práctica los títulos?</h2>
It is really easy to implement headings, you just use the appropriate HTML code
Los encabezados son realmente fácil de implementar, sólo tienes que utilizar el código HTML correspondiente


<h3>Using headings on dynamic pages</h3>
<h3>El uso de títulos en páginas dinámicas</h3>
On dynamic pages, simply wrap your main heading within a H1 (for example, the title of a category listing page would be H1) then wrap all subsequent headings in H2.
En las páginas dinámicas, simplemente envuelve tu títulos principal dentro de un H1 (por ejemplo, el título de una lista de categorías de la página sería H1), a continuación, envuelve todos los títulos posteriores en H2.
</pre>
</pre>


Here, a search engine 'bot' could clearly see the structure - h1, h2, h3 - but if we were to simply make these titles bold, underlined and larger font, it would be much more difficult to identify the structure. It is also possible to identify that the word 'important' is an emphasised word, something that is important within the page.
Aquí, un motor de búsqueda 'bot' puede ver claramente la estructura - h1, h2, h3 - pero si hiciéramos estos títulos en simplemente negrita, subrayado y en letra de mayor tamaño, sería mucho más difícil identificar la estructura. También es posible identificar que la palabra "importante" es una palabra enfatizada, algo que es de mayor valor dentro de la página.


Semantic HTML is also
HTML semántico también es
* Easier to read (in the code)
* Fácil de leer (en el código)
* Easier for accessibility purposes - screen readers function in a similar way to search engine bots to identify important headings
* Más fácil para la accesibilidad a los efectos de los lectores de pantalla, que funcionan en forma similar a los robots de los motores de búsqueda para identificar títulos importantes
* Potentially better for search engine optimisation
* Potencialmente mejor para la optimización de motores de búsqueda


In the example provided below of this page in Google search results, you can see how the heading tags are being used by Google to identify smaller links within the main page which may be of interest to the person searching for a term (displayed in small blue hyperlinked text beneath the description) - another reason to ensure you structure your content well!
En el ejemplo de abajo esta página en los resultados de búsqueda de Google, se puede ver cómo las etiquetas del título están siendo utilizados por Google para identificar a los enlaces más pequeños dentro de la página principal que puede ser de interés para la persona que busca un término (que se muestra en pequeño, de color azul como hipervínculos de texto debajo de la descripción) - ¡otra razón que nos asegura que la estructura de su contenido es correcta!


[[File:SEF-Titles.png]]
[[File:SEF-Titles.png]]


===Microdata===
===Microdatos===
Microdata is a more advanced form of Semantic HTML Markup which allows you to give even more contextual information about the content and structure of your website - for more information see : [[S:MyLanguage/Microdata|Microdata]].
Los microdatos es una forma más avanzada del Etiquetado HTML Semántico, que te permite dar más información contextual sobre el contenido y la estructura de tu sitio web. Para obtener más información, consulta : [[S:MyLanguage/Microdata|Microdatos]].


[http://en.wikipedia.org/wiki/Semantic_HTML Wikipedia article on Semantic HTML]
[[es.wp:HTML_semántico|HTML Semántico]]


<noinclude>
<noinclude>
[[Category:Search Engine Optimisation]]
[[Category:Search Engine Optimisation/es]]
</noinclude>
</noinclude>

Latest revision as of 13:02, 12 November 2015

Other languages:

HTML Semántico

¿Qué es HTML Semántico?

HTML semántico es una forma de utilizar la codificación HTML para crear o mejorar la estructura de una página. En otras palabras, es una manera de utilizar las etiquetas del lenguaje HTML -clases, divs, etiquetas y demás- para complementar las palabras reales o recursos en una página. Esto ayuda a los 'robots' y a los visitantes que utilizan lectores de pantalla para comprender la estructura y el contexto de la información de la página, junto con su importancia, relevancia, y cómo se relaciona con otros recursos.

Cómo utilizar el Etiquetado HTML Semántico

Es importante que tengas una comprensión del HTML Semántico si eres el desarrollador de sitios web o redactor de contenidos para ellos, ya que te será necesario utilizar el marcado estructural con regularidad.

Un ejemplo del mal uso de Etiquetado Semántico puede ser encontrado cuando un artículo ha sido escrito usando texto normal, pero en algún punto del texto el autor quiere enfatizar una frase en particular. Les gusta el estilo de la etiqueta H1, de manera que se aplica H1 a esta frase para 'lograr que se vea bonito'. Por desgracia, esto es confuso para un motor de búsqueda 'bot' y para los usuarios lectores de pantalla, porque a ellos se les dice que este es el título principal de la página - en lugar de subrayarlo o enfatizarlo con negrita.

El etiquetado HTML semántico debe ser usado sólo una vez para añadir estructura a una página, no para cambiar las forma en que se ve (esto se hace usando Hojas de Estilo en Cascada (CSS) o con en línea)

Un ejemplo de Etiquetado HTML Semántico

Por ejemplo, digamos que tenemos el siguiente artículo: 

<h1>Uso de títulos</h1>
Este es un artículo acerca de la importancia de los títulos

<h2>¿Por qué utilizar los títulos?</h2>
Es importante el uso de títulos para que los robots de los motores de búsqueda puedan decir que parte del artículo <strong>importante</strong>

<h3>Tipos de títulos</h3>
Puedes utilizar varios tipos de títulos, pero debes ser ordenado y estructurado, dentro de tu página. H1 debe ser el título de la página, H2 debe ser utilizado para los sub-títulos de la página. Los títulos dentro de su sub-títulos en cascada utilizaran H3, H4 y H5, según corresponda.

<h2>¿Es difícil de poner en práctica los títulos?</h2>
Los encabezados son realmente fácil de implementar, sólo tienes que utilizar el código HTML correspondiente

<h3>El uso de títulos en páginas dinámicas</h3>
En las páginas dinámicas, simplemente envuelve tu títulos principal dentro de un H1 (por ejemplo, el título de una lista de categorías de la página sería H1), a continuación, envuelve todos los títulos posteriores en H2.

Aquí, un motor de búsqueda 'bot' puede ver claramente la estructura - h1, h2, h3 - pero si hiciéramos estos títulos en simplemente negrita, subrayado y en letra de mayor tamaño, sería mucho más difícil identificar la estructura. También es posible identificar que la palabra "importante" es una palabra enfatizada, algo que es de mayor valor dentro de la página.

HTML semántico también es

  • Fácil de leer (en el código)
  • Más fácil para la accesibilidad a los efectos de los lectores de pantalla, que funcionan en forma similar a los robots de los motores de búsqueda para identificar títulos importantes
  • Potencialmente mejor para la optimización de motores de búsqueda

En el ejemplo de abajo esta página en los resultados de búsqueda de Google, se puede ver cómo las etiquetas del título están siendo utilizados por Google para identificar a los enlaces más pequeños dentro de la página principal que puede ser de interés para la persona que busca un término (que se muestra en pequeño, de color azul como hipervínculos de texto debajo de la descripción) - ¡otra razón que nos asegura que la estructura de su contenido es correcta!

Microdatos

Los microdatos es una forma más avanzada del Etiquetado HTML Semántico, que te permite dar más información contextual sobre el contenido y la estructura de tu sitio web. Para obtener más información, consulta : Microdatos.

HTML Semántico

Retrieved from "https://docs.sandbox.joomla.org/index.php?title=Semantic_HTML_Markup/es&oldid=258503"