1. ¿Qué es HTML?

Sus siglas significan Hypertext Markup Language, y es una de las tecnologías más antiguas en internet. Así, HTML es un ‘’lenguaje de marcado’’, es decir, es una forma de declarar la estructura de una página web de manera semántica. Observemos un ejemplo.

Como se puede notar, la página tiene un encabezado h1 (el más grande), seguido de un párrafo p. Estos elementos h1 y p se denominan etiquetas o tags.

2. ¿Cómo se organiza el HTML?

El HTML se organiza de manera jerárquica. Es decir, se organiza el código de tal manera que una etiqueta estará seguida de otra etiqueta, o de un texto si ya no existen más subniveles. Para identificar dónde inicia o termina cada nivel se coloca la etiqueta entre y , donde la marca con / denota el final del contenido de la etiqueta.

3. Atributos de las etiquetas HTML

Como indica el título, los elementos HTML puede tener atributos. Un elemento a por ejemplo se utiliza para construir un hipervínculo a otra página web, el cual se referencia a través del atributo href.

4. ¿Cómo leer HTML con R?

En R, leer HTML es muy sencillo. Esto se logra a través de la librería rvest, compatible con el tidyverse. Veamos un ejemplo aplicado a un sitio web simple creado por la universidad de York en Reino Unido.

library(rvest)
library(tidyverse)
Registered S3 methods overwritten by 'dbplyr':
  method         from
  print.tbl_lazy     
  print.tbl_sql      
-- Attaching packages ------------------------------------------ tidyverse 1.3.1 --
v ggplot2 3.3.5     v purrr   0.3.4
v tibble  3.1.3     v dplyr   1.0.7
v tidyr   1.1.3     v stringr 1.4.0
v readr   2.0.0     v forcats 0.5.1
-- Conflicts --------------------------------------------- tidyverse_conflicts() --
x dplyr::filter()         masks stats::filter()
x readr::guess_encoding() masks rvest::guess_encoding()
x dplyr::lag()            masks stats::lag()
url <- "https://www.york.ac.uk/teaching/cws/wws/webpage1.html"
html <- url %>% read_html()
html %>% class()
[1] "xml_document" "xml_node"    

Cuando R haya leído la página web, obtendrá un objeto de tipo xml_document y xml_node. Esto es así debido a que rvest utiliza la librería xml2 por detrás, dado que entiende el código HTML usando sintaxis XML o Extensible Markup Language. Con esta interacción también podemos observar la estructura del documento HTML que acabamos de leer.

html %>% xml2::xml_structure()
<html>
  <body>
    <hmtl>
      <title>
        {text}
      <table [width, align]>
        <tr>
          <td>
            {text}
            <div [align]>
              <h1>
                {text}
            {text}
            <div [align]>
              <p>
                {text}
                <br>
              <p>
                {text}
              {text}
              <p>
                {text}
              <ul>
                <li>
                  {text}
                <li>
                  {text}
                <li>
                  {text}
                <li>
                  {text}
              <p>
                {text}
                <b>
                  {text}
                {text}
              <p>
                {text}
              <ul>
                <li>
                  {text}
                <li>
                  {text}
                <li>
                  {text}
                <li>
                  {text}
              <p>
                {text}
              <h4>
                {text}
              {text}
              <p>
                {text}
              {text}
              <p>
                {text}
                <br>
                {text}
                <i>
                  {text}
                {text}
                <br>
                {text}
              <p>
                {text}
                <br>
                {text}
                <br>
                {text}
                <i>
                  {text}
                {text}
                <br>
                {text}
                <br>
                {text}
                <br>
                <i>
                  {text}
                <br>
                {text}
                <br>
                {text}
                <br>
              <p>
                {text}
              <p>
                {text}
                <br>
                {text}
                <br>
                {text}
                <br>
                {text}
                <br>
                {text}
              <p>
                {text}
                <br>
                {text}
                <br>
                {text}
                <br>
                {text}
                <br>
              <p>
                {text}
              <p>
                {text}
              <p>
                {text}
                <a [href]>
                  {text}
                {text}
                <br>
                <a [href]>
                  {text}
                {text}
              {text}
            {text}
          {text}

En el siguiente capítulo veremos cómo navegar a través de este código HTML.

LS0tDQp0aXRsZTogIldlYiBTY3JhcHBpbmcgY29uIFIiDQpzdWJ0aXRsZTogJ0NhcMOtdHVsbyAyOiBJbnRyb2R1Y2Npw7NuIGEgSFRNTCcNCmF1dGhvcjogSHVnbyBQb3JyYXMNCm91dHB1dDogDQogIGh0bWxfbm90ZWJvb2s6DQogICAgY3NzOiBFc3RpbG9zLmNzcw0KICAgIHRvYzogdHJ1ZQ0KICAgIHRvY19kZXB0aDogMg0KICAgIHRvY19mbG9hdDoNCiAgICAgIGNvbGxhcHNlZDogdHJ1ZQ0KICAgICAgc21vb3RoX3Njcm9sbDogZmFsc2UNCmJpYmxpb2dyYXBoeTogQmlibGlvZ3JhZmlhLmJpYg0KY3NsOiBjZXBhbC54bWwNCi0tLQ0KDQojICoqMS4gwr9RdcOpIGVzIEhUTUw/KioNCg0KU3VzIHNpZ2xhcyBzaWduaWZpY2FuICoqSHlwZXJ0ZXh0IE1hcmt1cCBMYW5ndWFnZSoqLCB5IGVzIHVuYSBkZSBsYXMgdGVjbm9sb2fDrWFzIG3DoXMgYW50aWd1YXMgZW4gaW50ZXJuZXQuIEFzw60sICoqSFRNTCoqIGVzIHVuIConJ2xlbmd1YWplIGRlIG1hcmNhZG8nJyosIGVzIGRlY2lyLCBlcyB1bmEgZm9ybWEgZGUgZGVjbGFyYXIgbGEgZXN0cnVjdHVyYSBkZSB1bmEgcMOhZ2luYSB3ZWIgZGUgbWFuZXJhIHNlbcOhbnRpY2EuIE9ic2VydmVtb3MgdW4gZWplbXBsby4NCg0KIVtdKGh0dHBzOi8vd3d3Lnczc2Nob29scy5jb20vaHRtbC9pbWdfbm90ZXBhZC5wbmcpDQoNCkNvbW8gc2UgcHVlZGUgbm90YXIsIGxhIHDDoWdpbmEgdGllbmUgdW4gZW5jYWJlemFkbyAqKmgxKiogKGVsIG3DoXMgZ3JhbmRlKSwgc2VndWlkbyBkZSB1biBww6FycmFmbyAqKnAqKi4gRXN0b3MgZWxlbWVudG9zICoqaDEqKiB5ICoqcCoqIHNlIGRlbm9taW5hbiBldGlxdWV0YXMgbyAqKnRhZ3MqKi4NCg0KIyAqKjIuIMK/Q8OzbW8gc2Ugb3JnYW5pemEgZWwgSFRNTD8qKg0KDQohW10oaHR0cHM6Ly9kM2k3MXhhYnVyaGQ0Mi5jbG91ZGZyb250Lm5ldC9lOGI5MjVlNDBkZmQyNTIyNjNhNDQyNjQ2MzE0Njk2MmFhMzhiODA3LzQtRmlndXJlMS0xLnBuZykNCkVsIEhUTUwgc2Ugb3JnYW5pemEgZGUgbWFuZXJhICoqamVyw6FycXVpY2EqKi4gRXMgZGVjaXIsIHNlIG9yZ2FuaXphIGVsIGPDs2RpZ28gZGUgdGFsIG1hbmVyYSBxdWUgKip1bmEgZXRpcXVldGEgZXN0YXLDoSBzZWd1aWRhIGRlIG90cmEgZXRpcXVldGEqKiwgbyBkZSB1biAqKnRleHRvKiogc2kgeWEgbm8gZXhpc3RlbiBtw6FzIHN1Ym5pdmVsZXMuIFBhcmEgaWRlbnRpZmljYXIgZMOzbmRlIGluaWNpYSBvIHRlcm1pbmEgY2FkYSBuaXZlbCBzZSBjb2xvY2EgbGEgZXRpcXVldGEgZW50cmUgKjx0YWc+KiB5ICo8L3RhZz4qLCBkb25kZSBsYSBtYXJjYSBjb24gKi8qIGRlbm90YSBlbCBmaW5hbCBkZWwgY29udGVuaWRvIGRlIGxhIGV0aXF1ZXRhLg0KDQojICoqMy4gQXRyaWJ1dG9zIGRlIGxhcyBldGlxdWV0YXMgSFRNTCoqDQoNCkNvbW8gaW5kaWNhIGVsIHTDrXR1bG8sIGxvcyBlbGVtZW50b3MgSFRNTCBwdWVkZSB0ZW5lciBhdHJpYnV0b3MuIFVuIGVsZW1lbnRvICoqYSoqIHBvciBlamVtcGxvIHNlIHV0aWxpemEgcGFyYSBjb25zdHJ1aXIgdW4gaGlwZXJ2w61uY3VsbyBhIG90cmEgcMOhZ2luYSAqKndlYioqLCBlbCBjdWFsIHNlIHJlZmVyZW5jaWEgYSB0cmF2w6lzIGRlbCBhdHJpYnV0byAqKmhyZWYqKi4NCg0KIVtdKGh0dHBzOi8vd3d3Lnczc2Nob29scy5jb20vanMvcGljX2h0bWx0cmVlLmdpZikNCg0KIyAqKjQuIMK/Q8OzbW8gbGVlciBIVE1MIGNvbiBSPyoqDQoNCkVuIFIsIGxlZXIgSFRNTCBlcyBtdXkgc2VuY2lsbG8uIEVzdG8gc2UgbG9ncmEgYSB0cmF2w6lzIGRlIGxhIGxpYnJlcsOtYSAqKnJ2ZXN0KiosIGNvbXBhdGlibGUgY29uIGVsICoqW3RpZHl2ZXJzZV0oaHR0cHM6Ly93d3cudGlkeXZlcnNlLm9yZy8pKiouIFZlYW1vcyB1biBlamVtcGxvIGFwbGljYWRvIGEgdW4gKipbc2l0aW8gd2ViIHNpbXBsZV0oaHR0cHM6Ly93d3cueW9yay5hYy51ay90ZWFjaGluZy9jd3Mvd3dzL3dlYnBhZ2UxLmh0bWwpKiogY3JlYWRvIHBvciBsYSB1bml2ZXJzaWRhZCBkZSBZb3JrIGVuIFJlaW5vIFVuaWRvLg0KDQpgYGB7cn0NCmxpYnJhcnkocnZlc3QpDQpsaWJyYXJ5KHRpZHl2ZXJzZSkNCnVybCA8LSAiaHR0cHM6Ly93d3cueW9yay5hYy51ay90ZWFjaGluZy9jd3Mvd3dzL3dlYnBhZ2UxLmh0bWwiDQpodG1sIDwtIHVybCAlPiUgcmVhZF9odG1sKCkNCmh0bWwgJT4lIGNsYXNzKCkNCmBgYA0KDQpDdWFuZG8gUiBoYXlhIGxlw61kbyBsYSBww6FnaW5hIHdlYiwgb2J0ZW5kcsOhIHVuIG9iamV0byBkZSB0aXBvIHhtbF9kb2N1bWVudCB5IHhtbF9ub2RlLiBFc3RvIGVzIGFzw60gZGViaWRvIGEgcXVlICoqcnZlc3QqKiB1dGlsaXphIGxhIGxpYnJlcsOtYSAqKnhtbDIqKiBwb3IgZGV0csOhcywgZGFkbyBxdWUgZW50aWVuZGUgZWwgY8OzZGlnbyBIVE1MIHVzYW5kbyBzaW50YXhpcyBYTUwgbyBbRXh0ZW5zaWJsZSBNYXJrdXAgTGFuZ3VhZ2VdKGh0dHBzOi8vd3d3Lnczc2Nob29scy5jb20veG1sL3htbF9zeW50YXguYXNwKS4gQ29uIGVzdGEgaW50ZXJhY2Npw7NuIHRhbWJpw6luIHBvZGVtb3Mgb2JzZXJ2YXIgbGEgZXN0cnVjdHVyYSBkZWwgZG9jdW1lbnRvIEhUTUwgcXVlIGFjYWJhbW9zIGRlIGxlZXIuDQoNCmBgYHtyfQ0KaHRtbCAlPiUgeG1sMjo6eG1sX3N0cnVjdHVyZSgpDQpgYGANCg0KRW4gZWwgc2lndWllbnRlIGNhcMOtdHVsbyB2ZXJlbW9zIGPDs21vIG5hdmVnYXIgYSB0cmF2w6lzIGRlIGVzdGUgY8OzZGlnbyBIVE1MLg==