HTML: HyperText Markup Language

1. HTML: HyperText Markup Language

HTML (HyperText Markup Language) is the standard markup language used for creating web pages. It provides the structure and content of a web page, defining the elements and their layout.

Contenidos del artículo

1.1. What is a Markup Language?

A markup language is a text-encoding system consisting of a set of tags inserted in a text document to control its structure, formatting, or the relationship between its parts. This type of language does not allow the implementation of algorithms and does not have arithmetic functions or variables. Examples of this language are HTML or XML.

HTML: HyperText Markup Language.
XML: eXtensible Markup Language.

1.2. What is HTML?

It is the standard markup language for creating web pages.
It describes the structure of a web page.
It consists of a series of tags that tell the browser how to display the content.
It was written by Tim Berners-Lee in 1993. Since then, there have been many different versions of HTML.

1.3. HTML Editors

There are a large number of free HTML editors available online. Here are the top 4 of the most famous free editors:

Atom.
Notepad++.
SublimeText.
Visual Studio Code.

In this course we will be using Visual Studio Code. It is important to use Emmet to type faster in Visual Studio Code.

1.4. HTML Tags

The basic structure of an HTML tag consists of an opening tag, optional attributes, and a closing tag (except for empty or self-closing tags). Here is the general structure:

Opening tag: The opening tag denotes the start of an HTML element and is enclosed within angle brackets < >. It identifies the type of element and may contain attributes.

Attributes: Attributes provide additional information about the HTML element. They are specified within the opening tag and consist of a name-value pair separated by an equal sign. Attributes modify the behavior or appearance of the element.

Closing tag: The closing tag denotes the end of an HTML element and is also enclosed within angle brackets < >. It has the same element name as the opening tag but is preceded by a forward slash /.

Content: The content of an HTML element is the text, images, or other elements contained within it. It is placed between the opening and closing tags.

Here’s an example of the structure for a paragraph element:

<p class="intro">This is a paragraph.</p>

In this example, <p> is the opening tag, class=»intro» is the attribute, This is a paragraph. is the content, and </p> is the closing tag.

1.5. Empty or self-closing tags in HTML

Empty or self-closing tags in HTML are those that do not contain any content between an opening and closing tag. These tags automatically close themselves within the opening tag. Some examples of empty or self-closing tags are:

<br>: Line break or break line.
<hr>: Horizontal rule.
<img>: Image.
<input>: Data input field.
<meta>: Document metadata.
<link>: Link to an external resource.
<wbr>: Word break opportunity.
<area>: Area of an image map.

These tags are used to insert specific elements into the HTML document and do not require a separate closing tag.

1.6. HTML document

The basic structure of an HTML document consists of several elements that define the structure and content of a webpage.

Element	Description
`<!DOCTYPE html>`	It specifies the HTML version being used, which is HTML5 in this case.
`<html>`	It defines the document type as HTML and provides a container for all other HTML elements, such as <head> and <body>. The lang attribute specifies the language of the document, which helps with accessibility and SEO.
`<head>`	It is not visible to users but plays a crucial role in providing important information to browsers and search engines. With the <head> section, you can specify the document’s title, define character encoding, include viewport settings for responsive design, add metadata for SEO purposes, and link external resources like CSS stylesheets and JavaScript files.
`<title>`	The title of the webpage, which is displayed in the browser’s title bar or tab.
`<link>`	It is used to establish a connection between an HTML document and an external resource, such as a stylesheet (CSS).
`<meta>`	It provides additional information about the document itself, for example information for search engines, social media platforms, and other web-based applications.
`<style>`	It allows you to write CSS code directly within the HTML file, eliminating the need for an external CSS file.
`<body>`	It serves as the container for all the content that users see and interact with.

Table 1.1. Structure tags

1.7. HTML Comments

To leave a comment in HTML, place a <! — tag before the code and a –> tag after the code that you want to hide.

<!-- Esto es un comentario dentro de un documento HTML -->
<!--
 /$$   /$$ /$$$$$$$$ /$$      /$$ /$$      
| $$  | $$|__  $$__/| $$$    /$$$| $$      
| $$  | $$   | $$   | $$$$  /$$$$| $$      
| $$$$$$$$   | $$   | $$ $$/$$ $$| $$      
| $$__  $$   | $$   | $$  $$$| $$| $$      
| $$  | $$   | $$   | $$\  $ | $$| $$      
| $$  | $$   | $$   | $$ \/  | $$| $$$$$$$$
|__/  |__/   |__/   |__/     |__/|________/
 -->                                         
<!--¿Te están entrando ganas de hacer ASCII Art? Puedes hacerlo en: http://patorjk.com/software/taag/#p=display&f=Big%20Money-ne&t=ENIUN -->

Example

Here’s an example of HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <!--To display an HTML page correctly, the browser must know what character set (encoding) to use: <meta charset="UTF-8">-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello World!
    <!-- Add your code here -->
</body>
</html>

Exercise

Install Visual Studio Code.
- Create a new HTML file in Visual Studio Code.
- Type html:5 (Emmet Abbreviation to write HTML5 code) and press Enter key. Visual Studio Code automatically write the basic structure of an HTML document.

To use Emmet abbreviation to generate lorem ipsum you only have to generate a chunk of lorem ipsum text, simply type lorem in the editor.
Install Live Server for Visual Studio Code. Live Server, a Visual Studio (VS) Code extension, enables developers to preview their work in real time.
Practice other Emmet abbreviations for high-speed coding.
Learn how to use Codepen (enables you to build web development projects online and to see a lot of examples).

Exercise

Test

Select the Emmet abbreviation: