Content

1 Header of an Html page

Header of an Html page

The header is delimited by the element head (which in turn is contained within the element html), which describes document information (title, configuration, scripts, and styles)

Document information is placed, which will not be displayed on the main screen and can be:

Title of the document
Metadata
Links to other files
Scripts
Styles

Title of the document

The title should be brief and descriptive of your content, as it will be what others see when they add our page to their bookmark

This tag is mandatory and must appear only once in our document

The browser will be displayed in the title bar of your window

<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>
    </head>
</html>

Metadata

The metadata elements are entered with the label goal, the type of method is defined by its attributes, some of the most common are:

charset

indicates the encoding in which the document is written

It is important that you enter the correct encoding for the browser to display the document correctly

<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 -->
        <meta charset='utf-8'>
    </head>
</html>

In this example we have used the coding UTF-8 that is the standard for internet

author

indicates who is the author of the page, specified with the attributes name and content

<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 -->
        <meta name='author' content='Sergio C&aacute;rcamo Garc&iacute;a' />
    </head>
</html>

keywords and description

Both make reference to the content of the page and are often used by search engines to index the web pages

Thanks to these fields, which are specified with the attributes name and content, search engines know that search terms best describe our website to show it to other users

<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 -->
        <meta name='keywords' content='Web development, html, css, javascript' />
        <meta name='description' content='Computer science, a set of scientific knowledge and techniques that make it possible to automatically process information by computers' />
    </head>
</html>

Links to other files

In the header we can indicate links to other files that we want to upload along with our website, for this we use the label link

They will usually be CSS style sheets, JavaScript files, additional libraries in other languages or our own files

<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 -->
        <link rel='stylesheet' id='twentyfourteen-style-css' type='text/css' href='/wp-content/themes/twentyfourteen/style.css'  />
        <link rel='alternate' hreflang='es' href='/?lang=es' />
        <link rel='alternate' hreflang='en' href='/?lang=en' />
        <link rel='alternate' hreflang='x-default' href='/?lang=es' />
    </head>
</html>

The example included the CSS style sheet of the wordpress twentyfourteen theme, for this the attributes have been used:

rel
to indicate what type of document is, in this case, a style sheet
id
to assign a unique identifier
type
to indicate the type of text that the browser will receive, in this case a CSS style sheet
href
is the relative path to the document or its absolute path

The example also included a specification for defining multiple languages, which the browser will use to index using the language in which the page is written correctly, for this the attributes have been used:

rel
to indicate what type of document is, in this case, a multisite reference in multiple languages
hreflang
to assign you a language, in this case es for Spanish, en for English and x-default for the default language for the start page
href
is the relative path of the document or its absolute path, in this case the lang parameter is added, starting with ? to indicate the acronym for the language

Scripts

The item script allows you to include executable code in our web page

By default, the browser will take JavaScript as the default language to run, if we don't specify another

<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 -->
        <script type='text/javascript'>
            //Javascript code
        </script>
        <noscript>
            <p>This page requires the use of Javascript</p>
            <p>Please, check the configuration of your browser</p>
        </noscript>
    </head>
</html>

The example has taken into account the case that the browser cannot use scripts, either because it is old or that the user has blocked it in its settings

To do this we have used the item noscript, which in this case will display the text in the browser instead of running the script

<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 -->
        <script type='text/javascript' src='/wp-includes/js/jquery/jquery.js'></script>
    </head>
</html>

The example used an external file to include the executable code, using the absolute or relative path in the attribute src

Many web pages do not include scripts in the head, but in the body

The reason for speeding up the loading of HTML, because when you find an external file you have to read and run it, stopping the process of loading the rest of the HTML

Let's imagine that we have the server saturated by the loading of the scripts, the user would not receive anything from the HTML and therefore you would not see the page, just a blank page

For this reason, some developers include the scripts at the end of the document, at the end of the body element

As scripts typically handle interaction with the user, it's not too serious that there's a small delay in starting to see animations, submit forms, etc.

It is easier for the users if you can see the content and then you can interact with it

Styles

The item style allows you to define properties for styles that will apply throughout the document

<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 -->
        <style type='text/css'>
            p {
                  font-family: Arial;
                  font-size: 10pt;
                  color: rgb{0, 0, 128};
                  text-indet: 15px;
                  text-aling: justify;
                  margin-left: 10px;
            }
        </style>
    </head>
</html>

As you can see in the example, this element usually indicates what you expect to apply, although you can also embed them within the HTML itself

<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 -->
        <style type='text/css' href='/wp-content/themes/twentyfourteen/style.css'></style>
    </head>
</html>

It is also possible to use an external style sheet, in this case we have used the CSS of the twentyfourteen wordpress theme, specifying the relative or absolute path of the file, in the attribute href

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

Header of an Html page

Header of an Html page

Title of the document

Metadata

Links to other files

Scripts

Styles

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

Header of an Html page

Title of the document

Metadata

Links to other files

Scripts

Styles

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

Cookie policy