HTML5 - Creation of Documents and Attributes

Question

1 Answer

Best answer

HTML5 - Creation of Documents and Attributes

This is the least interesting part but without a doubt it is one of the most critical. Each HTML document uses at least a part of these elements and sometimes all of them, so it is no wonder that we know how to use them appropriately for the creation of correct and general HTML5 documents.

Elements of type document

Let's start with the elements of type document. fija un contexto inicial para el navegador. These are the blocks that shape our HTML document and set an initial context for the browser.

The doctype element

The doctype element is unique in its category. It is a good practice to start each HTML document that we create with a doctype type element . This is the element that tells the browser that it will be dealing with HTML .
Most browsers will likewise deploy our content correctly if we omit the doctype , but it is a bad practice to trust that the browser behaves in this way.
The correct syntax to apply a doctype type element is the following:
<! DOCTYPE HTML>

The html element

This element is mostly called the root element and it indicates the beginning of the HTML within our document

The syntax is the following:

<! DOCTYPE HTML>
<html>
Contents and elements here
</ html>

The head element

The head element contains all the document metadata. In HTML , metadata provides the browser with information about content and marking in the document, but additionally we can include scripts and references to external resources such as CSS style sheets .

The syntax is the following within the document:

<! DOCTYPE HTML>
<html>
<head>
<title> Hello </ title>
</ head>
</ html>

The body element

This element encapsulates the content of an HTML document, it is the opposite of the head element which encapsulates the metadata and information of the document. The body element always follows after the head element, which means that it is the second child in the structure of the html root element.

Let's see its syntax:

<! DOCTYPE HTML>
<html>
<head>
<title> Example </ title>
</ head>
<body>
<p>
I like <code id = "applecode"> apples </ code> and oranges.
</ p>
</ body>
</ html>

Elements of metadata type

The elements of type metadata allow us to provide information about the HTML document. They are not content by themselves but they provide information on the content that will follow them. The elements of metadata type are added to the head element.

Fixing a title to our document

The title element sets a title or name to our document. Browsers usually display the content of this element at the top of the window or tab.
Let's see how we add it to our structure:

<! DOCTYPE HTML>
<html>
<head>
<title> Example </ title>
</ head>
<body>
<p>
I like <code id = "applecode"> apples </ code> and oranges.
</ p>
</ body>
</ html>

Setting the base for relative URLs

The base element sets a base URL , in which relative links, contained in the HTML document will be resolved. A relative link is one that omits the protocol, host and port of the URL and is evaluated against another URL. The base element also specifies how the links are opened when a user clicks on them and how the browser acts after a form has been entered.

Once we have seen the essential elements for the document, we only need to complete with the rest of the elements that work for the metadata and in this way build a correct HTML document that can be interpreted by any browser in the best way.

Attributes

dir

The dir attribute specifies the address of the text contained in an element. The values â€‹â€‹supported for it are:

ltr (text from left to right)
rtl (text from right to left)

Let's see a simple example of the application of it:

<! DOCTYPE HTML>
<html>
<head>
<title> Example </ title>
</ head>
<body>
<p dir = "rtl" > This is right-to-left </ p>
<p dir = "ltr"> This is left-to-right </ p>
</ body>
</ html>

contextmenu

This attribute allows us to define the context of the elements for the menus. These appear on the screen when the user shoots them, so to speak, for example, when we right click on an element.

draggable

The draggable attribute is part of the HTML5 support for drag & drop and is used to indicate when an element can be dragged.

dropzone

The dropzone attribute is part of the HTML5 support for drag & drop and is the counterpart of the draggable attribute explained above.

hidden

The hidden attribute is a Boolean attribute that indicates that an element is not relevant, therefore it will not be visually present in the document. The browsers interpret this attribute in such a way that they hide the element from the user's view. Let's see an example of it:

<! DOCTYPE HTML>
<html>
<head>
<title> Example </ title>
<script>
var toggleHidden = function () {
var elem = document.getElementById ("toggle");
if (elem.hasAttribute ("hidden")) {
elem.removeAttribute ("hidden");
} else {
elem.setAttribute ("hidden", "hidden");
}
}
</ script>
</ head>
<body>
<button onclick = "toggleHidden ()"> Toggle </ button>
<table>
<tr> <th> Name </ th> <th> City </ th> </ tr>
<tr> <td> Adam Freeman </ td> <td> London </ td> </ tr>
<tr id = "toggle" hidden > <td> Joe Smith </ td> <td> New York </ td> </ tr>
<tr> <td> Anne Jones </ td> <td> Paris </ td> </ tr>
</ table>
</ body>
</ html>

In this example we define a table that contains an element tr which represents a row in which the hidden attribute is present. Additionally we define a button that at the moment of being pressed invokes the Javascript function toggleHidden that removes the hidden attribute.

id

One of the best known attributes is id , which allows assigning a unique identifier to an element. These identifiers are commonly used to apply styles to some element or select an element with Javascript. Let's see an example of how we use the id attribute to apply a style to an element.

<! DOCTYPE HTML>
<html>
<head>
<title> Example </ title>
</ head>
<style>
# w3clink {
background: gray;
color: white;
Padding: 5px;
border: thin solid black;
}
</ style>
<body>
<p />
<a href=" http://w3c.org"> W3C web site </a>
</ body>
</ html>

spellcheck

The spellcheck attribute is used to specify whether the browser should verify the syntax of some content. The use of this attribute only makes sense when it is applied to some element that the user can edit.
Let's see an example:

<! DOCTYPE HTML>
<html>
<head>
<title> Example </ title>
</ head>
<body>
<textarea spellcheck = "true" > This is some mispelled text </ textarea>
</ body>
</ html>

style

The style attribute allows us to define a CSS style directly in an element, we see:

<! DOCTYPE HTML>
<html>
<head>
<title> Example </ title>
</ head>
<body>
<a href=" http://apress.com" >
Visit the Apress site
</a>
</ body>
</ html>

tabindex

This attribute allows us to control the order of the foci of the elements when we access them through the tabular key.
<! DOCTYPE HTML>
<html>
<head>
<title> Example </ title>
</ head>
<body>
<form>
<label> Name: <input type = "text" name = "name" tabindex = "1" /> </ label>
<p />
<label> City: <input type = "text" name = "city" tabindex = "- 1" /> </ label>
</ p>
<label> Country: <input type = "text" name = "country" tabindex = "2" /> </ label>
</ p>
<input type = "submit" tabindex = "3" />
</ form>
</ body>
</ html>

We have been able to learn all about the attributes and how they can be applied to the elements in our HTML document. This in order to extend its functionality so that they adapt to the needs of our website

answered Jun 23, 2019 by stackoverflow (3.5m points)
edited Jun 23, 2019

HTML5 - Creation of Documents and Attributes

Your answer

1 Answer

Your comment on this answer:

Related questions