Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="app">
  <header-list ref="header"></header-list>
  <div class="tablaperiodica">
    <elemento v-for="(e, i) in elementos" :key="i"  
              :abbr="e.abbr" 
              :name="e.name"
              :href="e.href"
              :color="e.color" />
  </div>
  <div class="lantanidos">
    <div class="semantics">
      <elemento v-for="(e, i) in semantics" :key="i+90" 
                :abbr="e.abbr" 
                :name="e.name"
                :href="e.href"
                :color="e.color" />
    </div>
    <div class="deprecated">
      <elemento v-for="(e, i) in deprecated" :key="i+112" 
                :abbr="e.abbr" 
                :name="e.name"
                :href="e.href"
                :color="e.color" />
    </div>
  </div>
  <div class="logo">
    <img src="https://i.lenguajehtml.com/assets/html/logo.svg" alt="HTML5">
    <h1>Tabla periódica de los elementos <span>HTML5.3</span></h1>
  </div>
</div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Montserrat');
@use postcss-nested;

body {
  background: url(https://raw.githubusercontent.com/ManzDev/cursos-assets/gh-pages/html5/488fd18.jpg);
  padding: 25px;
}

#app {
  width: 1200px;
  margin: auto;
  position: relative;
}

.header-list {
  display: flex;
  justify-content: space-between;
  color: white;
  margin: 0 0 22px 0;
  font-family: Montserrat;
  font-size: 14px;
  
  & > div {
    padding: 9px;
    text-align: center;
  }
  
  & > .active {
    background: #000;
  }
}

.tablaperiodica {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  grid-template-columns: repeat(17, 1fr);
  
  & .elemento:nth-child(8),
  & .elemento:nth-child(42),  
  & .elemento:nth-child(48),  
  & .elemento:nth-child(54),
  & .elemento:nth-child(60),
  & .elemento:nth-child(66),
  & .elemento:nth-child(72),
  & .elemento:nth-child(78){
    grid-row: 2;
  }

  & .elemento:nth-child(14),
  & .elemento:nth-child(18),
  & .elemento:nth-child(22),
  & .elemento:nth-child(26),
  & .elemento:nth-child(30), 
  & .elemento:nth-child(34), 
  & .elemento:nth-child(38) {
    grid-row: 4;
  }
}

.elemento {
  border: 1px solid #111;
  border-radius: 4px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Montserrat;
  padding: 4px;
  background-color: var(--element-color);
  box-shadow: 0 0 5px 5px rgba(0,0,0,.25) inset;
  min-width: 50px;
  overflow: hidden;
  text-decoration: none;
  color: #000;
  
  & span {
    font-size: 14px;
    color: #333;
  }
  
  & p {
    font-size: 21px;
    font-weight: bold;
    margin: 0;
  }
  
  &:hover {
    cursor: pointer;
    transform: scale(1.75);
    transition: transform 0.1s ease;
  }
}

.green { --element-color: #0c0; }
.yellow { --element-color: #cc0; }
.beige { --element-color: #ddbbbb; }
.pink { --element-color: #ff999a; }
.water { --element-color: #9dc; }
.lightgreen { --element-color: #7d8; }
.cyan { --element-color: #2ec; }
.lightblue { --element-color: #7cf; }
.blue { --element-color: cornflowerblue; }
.lightyellow { --element-color: #ff4; }
.salmon { --element-color: #fb9; }
.lightpink { --element-color: pink; }
.grey { --element-color: #9c9c9c; }

.lantanidos {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 60px;
  margin-top: 50px;
}

.semantics {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(11, 1fr);
}

.deprecated {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(5, 1fr);
}

.logo {
  display: flex;
  width: 450px;
  position: absolute;
  top: 75px;
  left: 160px;
  
  & img {
    height: 150px;
  }
  
  & h1 {
    font-family: Montserrat;
    color: #fff;
    
    & span {
      font-size: larger;
      color: #ef652a
    }
  }
}
              
            
!

JS

              
                const headerList = {
  template: `
    <div class="header-list">
      <div v-for="i in elementos" :key="i">{{i}}</div>
    </div>
  `,
  data() {
      return {
        elementos: ['Documento', 'Metadatos', 'Agrupación', 'Textual', 
                    'Multimedia', 'Tablas', 'Formulario', 'Scripting', 
                    'Interactivas', 'Semánticas', 'Ideogramáticas', 
                    'Edición', 'Obsoletas']
      }
  },
  methods: {
    enable(i) {
      this.$el.querySelectorAll('div')[i].classList.add('active');
    },
    disable(i) {
      this.$el.querySelectorAll('div')[i].classList.remove('active');
    }
  }
};

const elemento = {
  template: `
    <a class="elemento" :class="color($vnode.key)" target="_blank"
         @mouseenter="header.enable(currentBlock)" 
         @mouseleave="header.disable(currentBlock)">
      <span class="num">{{$vnode.key + 1}}</span>
      <p>{{abbr}}</p>
      <span class="name">{{element}}</span>
    </a>    
  `,
  props: {
    id: Number,
    abbr: String,
    name: String,
    color: String
  },
  data() {
    return {
      colors: ["green", "yellow", "beige", "pink", "water", "lightgreen", "cyan", "lightblue", "blue", "lightyellow", "salmon", "lightpink", "grey"],
      limits: [3, 8, 22, 46, 58, 68, 82, 86, 90, 103, 110, 112, 122],
    }
  },
  computed: {
    element() { return `<${this.name}>`; },
    header() { return this.$parent.$refs.header; },
    currentBlock() { 
      return this.limits.findIndex(e => this.$vnode.key < e);
    }
  },
  methods: {
    color(v) {
      for (i in this.limits)
        if (v < this.limits[i])
          return this.colors[i];
    }
  }
};

const vm = new Vue({
  el: '#app',
  components: {
    elemento: elemento,
    headerList: headerList,
  },
  data() {
    return {
      elementos: [
        { abbr: 'H', name: 'html', href: 'http://lenguajehtml.com/p/html/introduccion/estructura-documento-html' },
        { abbr: 'Hd', name: 'head', href: 'http://lenguajehtml.com/p/html/introduccion/estructura-documento-html' },
        { abbr: 'Bd', name: 'body', href: 'http://lenguajehtml.com/p/html/introduccion/estructura-documento-html' },
        { abbr: 'Ti', name: 'title', href: 'https://lenguajehtml.com/p/html/cabecera/etiquetas-html-de-relacion' },
        { abbr: 'Bs', name: 'base', href: 'https://lenguajehtml.com/p/html/cabecera/etiquetas-html-de-relacion' },
        { abbr: 'Lk', name: 'link', href: 'https://lenguajehtml.com/p/html/cabecera/etiquetas-html-de-relacion' },
        { abbr: 'Mt', name: 'meta', href: 'https://lenguajehtml.com/p/html/cabecera/etiquetas-html-de-relacion' },
        { abbr: 'St', name: 'style', href: 'https://lenguajehtml.com/p/html/cabecera/etiquetas-html-de-relacion' },
        { abbr: 'P', name: 'p', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-agrupacion#etiquetas-html-para-agrupaciones' },
        { abbr: 'Hr', name: 'hr', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-agrupacion#etiquetas-html-para-agrupaciones' },
        { abbr: 'Pre', name: 'pre', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-agrupacion#etiquetas-html-para-agrupaciones' },
        { abbr: 'Bq', name: 'blockquote', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-agrupacion#etiquetas-html-para-agrupaciones' },
        { abbr: 'Ol', name: 'ol', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-agrupacion#etiquetas-html-para-listas' },
        { abbr: 'Ul', name: 'ul', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-agrupacion#etiquetas-html-para-listas' },
        { abbr: 'Li', name: 'li', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-agrupacion#etiquetas-html-para-listas' },
        { abbr: 'Dl', name: 'dl', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-agrupacion#etiquetas-html-para-listas-de-descripciones' },
        { abbr: 'Dt', name: 'dt', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-agrupacion#etiquetas-html-para-listas-de-descripciones' },
        { abbr: 'Dd', name: 'dd', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-agrupacion#etiquetas-html-para-listas-de-descripciones' },
        { abbr: 'Fi', name: 'figure', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-agrupacion#etiquetas-html-para-ilustraciones-figuras' },
        { abbr: 'Fc', name: 'figcaption', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-agrupacion#etiquetas-html-para-ilustraciones-figuras' },
        { abbr: 'Dv', name: 'div', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-agrupacion#etiquetas-html-para-agrupaciones' },
        { abbr: 'Mn', name: 'main', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-agrupacion#etiquetas-html-para-agrupaciones' },
        { abbr: 'A', name: 'a', href: 'https://lenguajehtml.com/p/html/semantica/enlaces-o-hipervinculos' },
        { abbr: 'Em', name: 'em', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-para-fragmentos-de-texto' },
        { abbr: 'Str', name: 'strong', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-para-fragmentos-de-texto' },
        { abbr: 'Sm', name: 'small', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-de-modificacin-de-significado' },
        { abbr: 'S', name: 's', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-para-fragmentos-de-texto' },
        { abbr: 'Ci', name: 'cite', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-para-fragmentos-de-texto' },
        { abbr: 'Q', name: 'q', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-de-modificacin-de-significado' },
        { abbr: 'Dfn', name: 'dfn', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-de-modificacin-de-significado' },
        { abbr: 'Ab', name: 'abbr', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-de-modificacin-de-significado' },
        { abbr: 'Da', name: 'data', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-orientadas-a-aspectos-informticos' },
        { abbr: 'Tim', name: 'time', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-orientadas-a-aspectos-informticos' },
        { abbr: 'Co', name: 'code', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-orientadas-a-aspectos-informticos' },
        { abbr: 'Va', name: 'var', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-orientadas-a-aspectos-informticos' },
        { abbr: 'Sa', name: 'samp', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-orientadas-a-aspectos-informticos' },
        { abbr: 'Kb', name: 'kbd', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-orientadas-a-aspectos-informticos' },
        { abbr:  'Sub', name: 'sub', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-de-modificacin-de-significado' },
        { abbr: 'Sup', name: 'sup', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-de-modificacin-de-significado' },
        { abbr: 'I', name: 'i', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-para-fragmentos-de-texto' },
        { abbr: 'B', name: 'b', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-para-fragmentos-de-texto' },
        { abbr: 'U', name: 'u', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-para-fragmentos-de-texto' },
        { abbr: 'Mk', name: 'mark', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-para-fragmentos-de-texto' },
        { abbr: 'Sp', name: 'span', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-para-fragmentos-de-texto' },
        { abbr: 'Br', name: 'br', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-de-modificacin-de-significado' },
        { abbr: 'Wbr', name: 'wbr', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-de-modificacin-de-significado' },
        { abbr:  'Img', name: 'img', href: 'https://lenguajehtml.com/p/html/multimedia/etiquetas-html-de-imagenes' },
        { abbr: 'Pic', name: 'picture', href: 'https://lenguajehtml.com/p/html/multimedia/etiquetas-html-de-imagenes' },
        { abbr: 'Ifr', name: 'iframe', href: 'https://lenguajehtml.com/p/html/multimedia/etiquetas-html-de-contenido-externo#etiquetas-html-para-contenido-externo' },
        { abbr: 'Emb', name: 'embed', href: 'https://lenguajehtml.com/p/html/multimedia/etiquetas-html-de-contenido-externo#etiquetas-html-para-contenido-externo' },
        { abbr: 'Obj', name: 'object', href: 'https://lenguajehtml.com/p/html/multimedia/etiquetas-html-de-contenido-externo#etiquetas-html-para-contenido-externo' },
        { abbr: 'Par', name: 'param', href: 'https://lenguajehtml.com/p/html/multimedia/etiquetas-html-de-contenido-externo#etiquetas-html-para-contenido-externo' },
        { abbr: 'Vi', name: 'video', href: 'https://lenguajehtml.com/p/html/multimedia/etiquetas-html-de-video' },
        { abbr: 'Au', name: 'audio', href: 'https://lenguajehtml.com/p/html/multimedia/etiquetas-html-de-audio' },
        { abbr: 'Src', name: 'source', href: 'https://lenguajehtml.com/p/html/multimedia/etiquetas-html-de-video' },
        { abbr: 'Trk', name: 'track', href: 'https://lenguajehtml.com/p/html/multimedia/etiquetas-html-de-subtitulos' },
        { abbr: 'Map', name: 'map', href: 'https://lenguajehtml.com/p/html/semantica/enlaces-o-hipervinculos' },
        { abbr: 'Ar', name: 'area', href: 'https://lenguajehtml.com/p/html/semantica/enlaces-o-hipervinculos' },
        { abbr: 'Tb', name: 'table', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-tablas' },
        { abbr: 'Cap', name: 'caption', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-tablas' },
        { abbr: 'Cg', name: 'colgroup', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-tablas' },
        { abbr: 'Col', name: 'col', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-tablas' },
        { abbr: 'TBd', name: 'tbody', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-tablas' },
        { abbr: 'THd', name: 'thead', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-tablas' },
        { abbr: 'TFt', name: 'tfoot', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-tablas' },
        { abbr: 'Tr', name: 'tr', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-tablas' },
        { abbr: 'Th', name: 'th', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-tablas' },
        { abbr: 'Td', name: 'td', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-tablas' },
        { abbr: 'Frm', name: 'form', href: 'https://lenguajehtml.com/p/html/formularios/crear-un-formulario' },
        { abbr: 'Lab', name: 'label', href: 'https://lenguajehtml.com/p/html/formularios/crear-un-formulario' },
        { abbr: 'In', name: 'input', href: 'https://lenguajehtml.com/p/html/formularios/controles-campos-de-texto' },
        { abbr: 'But', name: 'button', href: 'https://lenguajehtml.com/p/html/formularios/botones-de-envio-de-formulario' },
        { abbr: 'Sel', name: 'select', href: 'https://lenguajehtml.com/p/html/formularios/controles-listas-de-seleccion' },
        { abbr: 'Dtl', name: 'datalist', href: 'https://lenguajehtml.com/p/html/formularios/controles-listas-de-seleccion' },
        { abbr: 'Og', name: 'optgroup', href: 'https://lenguajehtml.com/p/html/formularios/controles-listas-de-seleccion' },
        { abbr: 'O', name: 'option', href: 'https://lenguajehtml.com/p/html/formularios/controles-listas-de-seleccion' },
        { abbr: 'Ta', name: 'textarea', href: 'https://lenguajehtml.com/p/html/formularios/controles-campos-de-texto#campos-extensos-de-texto' },
        { abbr: 'Out', name: 'output', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto' },
        { abbr: 'Prg', name: 'progress', href: 'https://lenguajehtml.com/p/html/formularios/medidores-y-barras-de-progreso' },
        { abbr: 'Met', name: 'meter', href: 'https://lenguajehtml.com/p/html/formularios/medidores-y-barras-de-progreso' },
        { abbr: 'Fs', name: 'fieldset', href: 'https://lenguajehtml.com/p/html/formularios/organizacion-de-campos' },
        { abbr: 'Le', name: 'legend', href: 'https://lenguajehtml.com/p/html/formularios/organizacion-de-campos' },
        { abbr: 'Sc', name: 'script', href: 'https://lenguajehtml.com/p/html/scripting/etiquetas-html-scripts' },
        { abbr: 'NSc', name: 'noscript', href: 'https://lenguajehtml.com/p/html/scripting/etiquetas-html-scripts#la-etiqueta-noscript' },
        { abbr: 'Tp', name: 'template', href: 'https://lenguajehtml.com/p/html/scripting/etiquetas-html-scripts#la-etiqueta-template' },
        { abbr: 'Sl', name: 'slot', href: 'https://lenguajehtml.com/p/html/scripting/etiquetas-html-scripts' },
        { abbr: 'Cv', name: 'canvas', href: 'https://lenguajehtml.com/p/html/scripting/etiquetas-html-interactivas' },
        { abbr: 'Det', name: 'details', href: 'https://lenguajehtml.com/p/html/scripting/etiquetas-html-interactivas' },
        { abbr: 'Sum', name: 'summary', href: 'https://lenguajehtml.com/p/html/scripting/etiquetas-html-interactivas' },
        { abbr: 'Dia', name: 'dialog', href: 'https://lenguajehtml.com/p/html/scripting/etiquetas-html-interactivas' },
    ],
    semantics: [
        { abbr: 'Art', name: 'article', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-seccion' },
        { abbr: 'Sec', name: 'section', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-seccion' },
        { abbr: 'Nav', name: 'nav', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-seccion' },
        { abbr: 'h1', name: 'h1', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-seccion' },
        { abbr: 'h2', name: 'h2', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-seccion' },
        { abbr: 'h3', name: 'h3', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-seccion' },
        { abbr: 'h4', name: 'h4', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-seccion' },
        { abbr: 'h5', name: 'h5', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-seccion' },
        { abbr: 'h6', name: 'h6', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-seccion' },
        { abbr: 'Hdr', name: 'header', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-seccion' },
        { abbr: 'Ftr', name: 'footer', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-seccion' },
        { abbr: 'Asd', name: 'aside', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-seccion' },
        { abbr: 'Add', name: 'address', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-seccion' },
        { abbr: 'Rub', name: 'ruby', href: '#' },
        { abbr: 'Rb', name: 'rb', href: '#' },
        { abbr: 'Rt', name: 'rt', href: '#' },
        { abbr: 'Rtc', name: 'rtc', href: '#' },
        { abbr: 'Rp', name: 'rp', href: '#' },
        { abbr: 'Bdi', name: 'bdi', href: '#' },
        { abbr: 'Bdo', name: 'bdo', href: '#' },
        { abbr: 'Ins', name: 'ins', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-de-edicin' },
        { abbr: 'Del', name: 'del', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto#etiquetas-html-de-edicin' }
      ],
      deprecated: [
        { abbr: 'App', name: 'applet', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-obsoletas' },
        { abbr: 'Acr', name: 'acronym', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-obsoletas' },
        { abbr: 'Fr', name: 'frame', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-obsoletas' },
        { abbr: 'Frs', name: 'frameset', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-obsoletas' },
        { abbr: 'NFr', name: 'noframe', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-obsoletas' },
        { abbr: 'Fnt', name: 'font', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-obsoletas' },
        { abbr: 'Big', name: 'big', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-obsoletas' },
        { abbr: 'Blk', name: 'blink', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-obsoletas' },
        { abbr: 'Cen', name: 'center', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-obsoletas' },
        { abbr: 'Mrq', name: 'marquee', href: 'https://lenguajehtml.com/p/html/semantica/etiquetas-html-obsoletas' }
      ]
    }
  }
});
              
            
!
999px

Console