Content

1 Body of an Html page
- 1.1 Structure of the document

Body of an Html page

The body of an HTML page includes the content of the web page itself and is defined with the element body

There are a lot of tags that we can use in the body, as a query we can use this listing full

Let's group some of your tags by:

Structure of the document
header, section, navigation
The structure of the text
titles, pararaphos, ...
Characterization of the text
emphasized text, code snippets, ...

Structure of the document

Normally every web page has a title header, some kind of navigation sidebar, a main content and maybe a footer

To achieve this structuring is you can use the item div by divisions

A split cannot be inserted within a lower-level label, such as text structuring and characterization, but it can be inserted within another div element

Thanks to the style sheet, and generic attributes id and class give format to these groupings

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <title>Test page</title>
        <meta charset='utf-8'>
        <style type='text/css'>
            #head  {
                  height: 10%;
                  background-color: lightblue;
            }

            #nav  {
                  height: 5%;
                  background-color: lightgray;
            }

            #principal  {
                  display: flex;
                  align-items: stretch;
            }

            #content  {
                  width: 80%;
                  background-color: lemonchiffon;
                  min-height: 80%;
            }

            #aside  {
                  width: 20%;
                  background-color: lemonsalmon;
                  min-height: 80%;
            }

            #footer  {
                  height: 5%;
                  background-color: lightgreen;
            }
        </style>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
         <div id='head'>This is the header</div>
         <div id='nav'>Navigation bar</div>
         <div id='principal'>
             <div id='content'>Content</div>
             <div id='aside'>Sidebar</div>
         </div>
         <div id='footer'>This is the foot of the page</div>
</html>

The structure of the web sample is fairly standard and the divisions that we see repeated constantly

This is why from HTML5 were added to a series of divisions with meaning to be able to tell more easily how we structure the web

Elements of semantic structure

These elements are analogous to divisions, but they also have associated a meaning related to the structure

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <title>Test page</title>
        <meta charset='utf-8'>
        <style type='text/css'>
            header  {
                  height: 10%;
                  background-color: lightblue;
            }

            nav  {
                  height: 5%;
                  background-color: lightgray;
            }

            #principal  {
                  display: flex;
                  align-items: stretch;
            }

            article  {
                  width: 80%;
                  background-color: lemonchiffon;
                  min-height: 80%;
            }

            aside  {
                  width: 20%;
                  background-color: lemonsalmon;
                  min-height: 80%;
            }

            footer  {
                  height: 5%;
                  background-color: lightgreen;
            }
        </style>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
         <header>This is the header</header>
         <nav>Navigation bar</nav>
         <div id='principal'>
             <article>Content</article>
             <aside>Sidebar</aside>
         </div>
         <footer>This is the foot of the page</footer>
</html>

In the example we can see that we have been able to replace some divisions by a label equivalent

Some of the most important semantic structuring labels are:

In the example we can see that we have been able to replace some divisions by a label equivalent

Some of the most important semantic structuring labels are:

header
represents the header of a document or section

To be used to contain introductory information

There may be more than one in the document
footer
it represents the closure of a document or section

It usually contains information about the author, copyright, terms of use, contact information, etc
nav
represents the section that contains the navigation links for the web site
section
defines a section of the document
article
represents a content-independent and self-contained

For example blog posts, news, comments, etc
aside
defines content that is located outside of the place in which it is contained

As for example a sidebar

It is usually related to the element that contains
figure
define an independent element such as an image, a code snippet, a diagram, etc

It is usually related to the element it contains, but its position is independent of the same
figcaption
is the title or reading of an element figure

It is usually put as the first or last element of the same
details
represents a series of additional details that the user can hide

Elements of structure of a text

The tags structure of a text serve to define the headings of the sections and paragraphs

Among the block labels we highlight the following:

p
contains the text of a paragraph

The browser does not display the white spaces or extra line breaks to write within the paragraph
```
<p>Information to show</p>
```
hN
defines section headings (there are 6 levels, where N is 1 to 6)

Can be configured how you see the headers through CSS

Normally a higher source is used the higher the level, with h1 being the highest level

Changing the number you can get different visual effects by changing the size of the letter

These elements are used to structure the document in sections, subsections, etc
```
<h1>Section 1</h1>

<h2>Section 2</h2>

<h3>Section 3</h3>

<h4>Section 4</h4>

<h5>Section 5</h5>

<h6>Section 6</h6>
```
pre
contains a paragraph with preformatted text, that is, it will appear as if it had been written with a typewriter, with a fixed spacing font (Courier)

Takes into account the white spaces and extra line breaks

It may be useful to write paragraphs with examples of source code
```
<pre>
Text
     Tabbed text

Simulation table

column1    column2    column3   column4
row11      row12      row13     row14
row21      row22      row23     row24
</pre>
```
In the example we simulated a table, although for that task it is advisable to better use the label for tables

Other types of elements can be simulated, as text will be taken literally, but it is advisable to use their specific tags, as long as they exist

With what we will get:
```
Text
     Tabbed text

Simulation table

column1    column2    column3   column4
row11      row12      row13     row14
row21      row22      row23     row24
```
blockquote
is used to include quotations, which may contain multiple paragraphs or other elements

Generates left and right margins, although it is recommended to define the desired format using a style sheet
```
<blockquote cite='Don Quixote de la Mancha'>
<p>In a place of the stain of whose name does not want to remember me...</p>
</blockquote>
```
In the example you have used the attribute cite to indicate the origin of the quotation, in this case the novel by Don Quixote de la Mancha, since we have quoted a paragraph of the beginning of the novel

With what we will get:

In a place of the stain of whose name does not want to remember me…
tt
we get the text to have a smaller size and the appearance of the characters of a typewriter

It does not preformat the text, but only changes its appearance
```
<tt>Sometimes... I see dead</tt>
```
In the example you have written a paragraph, and we have given the appearance of the characters of a typewriter

With what we will get:
Sometimes... I see dead

Elements of characterization from the text

It is generally used within paragraphs

They serve to define the format of the text, although thanks to the style sheets, fewer and fewer

They are maintained for compatibility with older versions of HTML, among the most important ones we highlight:

br
adds a line break without a change of paragraph

Has No closing tag
```
<p>Sometimes...<br/>I see dead</p>
```
In the example you have written a paragraph, and within the same we have used the line break

With what we will get:

Sometimes…
I see dead
nbsp
it's not a label, but rather a way to add additional blanks for the browser to recognize

If we want to force him to do it, we have to put the code nbsp (non-breaking space)
```
<p>Sometimes... &nbsp;I see dead</p>
```
In the example a paragraph has been written and within it we have added a blank space, but we have forced the appearance of another additional

With what we will get:

Sometimes… I see dead
center
allows you to center an element, whether it's a paragraph, text, image, etc

Some older browsers did not support it, although little is currently used as many elements include a similar attribute that replaces it

Another cause of its disuse is because it is possible to simulate it using style sheets
```
<p><center>Sometimes... I see dead</center></p>
```
In the example you have written a paragraph, and we forced her focused

With what we will get:

Sometimes… I see dead
hr
you get a horizontal stripe as wide as the screen, and with the appearance of being embedded on the background

Has No closing tag
```
<p>Sometimes... I see dead<hr/>
In a place of the stain of whose name does not want to remember me...</p>
```
In the example a paragraph has been written and we have added a horizontal stripe to separate it to simulate that there are two paragraphs

With what we will get:

Sometimes… I see dead

In a place of the stain of whose name does not want to remember me…
sup
is to obtain a mathematical formula that includes an index
```
m<sup>2</sup>
```
In the example, a text has been written with a mathematical formula in which we have assigned the index 2

With what we will get:
m²
sub
is to obtain a mathematical formula that includes a subscript
```
m<sub>2</sub>
```
In the example we have written a text with a mathematical formula in which we have assigned it subscript 2

With what we will get:
m₂
italic
puts the text in italics

You can use the short form i, as it is equivalent
```
<i>Sometimes... I see dead</i>
```
In the example you have written a text in italics

With what we will get:
Sometimes… I see dead
em
indicates that the text will be angry, usually the text is put in italics, although if we use a style sheet we can choose how it will be angry
```
<em>Sometimes... I see dead</em>
```
In the example you have written a text enfacitado

With what we will get:
Sometimes… I see dead
bold
puts the text in bold

You can use the short form b, as it is equivalent
```
<b>Sometimes... I see dead</b>
```
In the example you have written a text in bold

With what we will get:
Sometimes… I see dead
strong
indicates that the text will be further angry, usually the text is put in bold, although if we use a style sheet we can choose how it will be angry
```
<strong>Sometimes... I see dead</strong>
```
In the example you have written a text with a greater emphasis

With what we will get:
Sometimes… I see dead
code
embeds code in the middle of a paragraph in a similar way to pre, but without creating margins left and right
```
<p>Sometimes...<code>&nbsp;</code>I see dead</p>
```
The example has written a paragraph with the special character of white space, but when embedded as code, the page will display it literally

With what we will get:

Sometimes… I see dead

Cookie	Duration	Description
CookieLawInfoConsent	Until the end of the browser session	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Until the end of the browser session	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Until the end of the browser session	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Until the end of the browser session	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

Secarcam's Computer Science Web

Body of an Html page

Body of an Html page

Structure of the document

Elements of semantic structure

Elements of structure of a text

Elements of characterization from the text

Web page of Sergio Cárcamo Garcia dedicated to the computing and related topics such as programming languages, statistics, mathematics, etc

Body of an Html page

Structure of the document

Elements of semantic structure

Elements of structure of a text

Elements of characterization from the text

Web page of Sergio Cárcamo Garcia dedicated to the computing and related topics such as programming languages, statistics, mathematics, etc

Cookie policy