HTMLSemanticsElements

DEFINITIONWhat are Semantics Elements?

Why are they important?

Semantic elements were created to describe in a simple way the

meaning of the words in programing language.

They are important to help the Browser and the Developer to understand why the tags were created for and what are their roles. Also they can define the page

structure.

HTMLSemanticsElements

EXAMPLE

Before the existence of semantics tags, the content of the page was structured with DIV tags. DIV tags did not provide information about its meaning. For this reason it was complicated to understand the purpose of each element

NOTE >>

Here, there is one scheme with semantics elements.

HTMLSemanticsElements

Currently, there are Web sites that contain HTML code like this:

CHANGES

Now, this code can be corrected with semantics elements. The interpretation of the example above with HTML code means navigation, header, and footer.

HTMLSemanticsElements

Currently, there are different tags to define the web page layout. The following are some general Structure of the page:

ELEMENTS

HTMLSemanticsElements

There are new semantics tags describe specific elements like <FIGURE>, for images and graphics, <FIGCAPTION>, helps with the caption of the image.

ELEMENTS

For example, this code shows the result using these tags.

Example Semantics 1.html

HTMLSemanticsElements

Is important to know that the semantics elements do not change none of the format. The format must be configured with CSS. With these images you can understand how semantics elements work in a format.

NOTE

HTMLSemanticsElements

1. http://zonatic.net/codigo/2. http://www.w3schools.com/html/html5_semantic_elements.asp3. http://www.arumeinformatica.es/blog/html5-nuevas-etiquetas-

semanticas-y-estructurales4. http://exprimiendoopencms.com/export/sites/sagasuite/.galleries/test-

galeria-descarga/manual-lenguaje-html5.pdf5. http://es.slideshare.net/enramos/gua-html5

REFERENCES

Work template www.thefuturebaby.com