Chuleta o cheatsheet de HTML5 (lenguaje de marcado HTML) en formato PDF, muy útil para desarrolladores frontend, diseñadores o programadores web.

¡Ojo! Hago directos en Twitch sobre desarrollo web, ¿Te apuntas? ManzDev

desarrollo
60

Escrito por

Si eres diseñador o desarrollador de frontend, programador o simplemente te interesa el diseño de páginas webs, quizás esta chuleta (cheat sheet) te interese. Se trata del Lenguaje HTML, un lenguaje de marcado que se ideó con el propósito de definir la estructura de una página o documento web, que tiene como finalidad reunir una serie de información en diferentes formatos (texto, imágenes, video, audio, etc...).

Con la llegada y soporte de HTML5 en la mayoría de los navegadores, es el momento perfecto para aprender todo lo relacionado con HTML5: etiquetas de texto, agrupación, semánticas, formularios, validaciones, multimedia, etc...

HTML5 Cheat Sheet (Desarrollo web, chuleta HTML)
HTML5 Cheat Sheet (Desarrollo web, chuleta HTML)

Esta cheatsheet te será muy útil si estás aprendiendo, tienes mala memoria o quieres tener en un sólo lugar de consulta rápida los nombres, atributos y valores asociados a cada elemento HTML.

Contenido

La cheatsheet contiene información sobre las siguientes características de HTML5, dividido en dos páginas. La primera de ellas contiene en su mayoría características básicas de HTML como etiquetas de formato o agrupación de contenido, así como muchas novedades multimedia de HTML5, mientras que la segunda incorpora etiquetas relacionadas con los formularios HTML5.

Primera página:

HTML5 Cheatsheet. Página 1
HTML5 Cheatsheet. Página 1
  • Sintaxis general de HTML (elementos, atributos y valores)
  • Etiquetas de formato de texto
  • Etiquetas de agrupación
  • Etiquetas de listas (y definiciones)
  • Etiquetas de tablas
  • Etiquetas de sección (semánticas)
  • Etiquetas de scripting
  • Etiquetas multimedia (imagen, recursos, video, audio, subtítulos...)

Segunda página:

HTML5 Cheatsheet. Página 2
HTML5 Cheatsheet. Página 2
  • Etiquetas generales del documento HTML
  • Atributos globales (para cualquier elemento)
  • Atributos comunes en formularios
  • Etiquetas de cabecera y metadatos
  • Etiquetas de formulario
  • Etiquetas de campos de entrada de datos (input, select, textarea, datalist...)
  • Etiquetas de formularios de HTML5 (keygen, progress, details, dialog, meter...)
  • Restricciones de formulario (validaciones)

Leyenda

Los esquemas de colores tienen cierto significado, que detallo a continuación:

  • Naranja: Elementos (etiquetas HTML)
  • Naranja con franja negra al inicio: Elementos sin etiqueta de cierre
  • Verde: Atributo del elemento
  • Verde con franja roja al final: Atributo booleano (sin valor)
  • Azul: Posible valor del atributo (en negro la opción por defecto, si la tiene)
  • Morado: Formatos sugeridos para usar con el elemento

Consideraciones

Se agradecerá cualquier tipo de sugerencia, difusión o apunte sobre la cheatsheet.

Descarga

He abandonado la opción de publicar esta cheatsheet bajo un formato de pago porque creo en otra forma de hacer las cosas. Confío en que todo el que sepa valorar el trabajo ajeno que ha supuesto la elaboración de esta chuleta realizará una donación con la cantidad que estime justa.

Agradezco toda difusión que se haga de esta chuleta. Por favor, si lo hacéis, utilizad el enlace de este artículo (o el de la propia página de la chuleta), no utilicen enlaces directos o que puedan hacer hotlinking. Si tienes cualquier tipo de problema con la descarga o donación, contacta conmigo y lo resolveré inmediatamente:

LenguajeHTML

URL | LenguajeHTML

Recuerda que también tienes LenguajeCSS.com, donde encontrarás otra cheatsheet de frontend, en este caso de CSS3 (lenguaje de hojas de estilo). También tienes otras chuletas anteriores que he realizado, como una cheat sheet de PHP o una cheat sheet de ModRewrite.

¿Quieres aprender a usar todo esto? Con la organización de la Oficina de Software Libre de la Universidad de La Laguna y de la Fundación General de la Universidad de La Laguna (Tenerife), imparto un curso de Desarrollo web con HTML5 en el que aprenderás a desarrollar páginas webs utilizando todas las características de la cheatsheet.

Temario y enlaces de inscripción | Curso de Desarrollo web con HTML5

RELACIONADOS Emezeta Card PHP Cheat Sheet (v0.2) RELACIONADOS Javascript Cheatsheet (Chuleta JS) RELACIONADOS Formatos de audio: Todo lo que deberías saber
x Emezeta Card PHP Cheat Sheet (v0.2)
Manz

60 comentarios

1 2

usuario
1

Deja también alguna dirección de Bitcoin para donaciones, más que nada porque permiten donar sin gastar mucho en comisiones o incluso "donar gratis" mediante páginas que dan pequeñas cantidades, usando tu dirección.

  • 6
GalaxyLJGD
2

Muy buena tabla, me servirá de mucho ahorita que estoy aprendiendo HTML, te donaría algo, pero mi situación económica no me lo permite, lo mas que te puedo dar es gracias

  • 3
Michael Wilson
3

Just donated 20 euros! Thank you for creating the html and css cheat sheets. If you finish the html cheat sheet in English, please let me know! Thank you! Michael

  • 4
leslie flores
10

Estoy empezando a conocer este medio. Gracias por el aporte. En este momento me es imposible contribuir económicamente, pero te aseguro que cualquier momento lo haré. Se el valor del conocimiento. Es mi promesa.

Beatriz
12

Hola que tal, gracias por aportar información adecuada para las personas como yo que no tienen conocimiento de ingles. Estas plantillas son útiles por si no te acuerdas de algo. Por mucho que digan no puedes mantener tanta información en la cabeza, sobre todo si manejas otros programas o llevas mucho tiempo sin usarlos.

RobertBentley
14

The great and unfathomable article, I begin to get familiar with the HTML5 however I saw your HTML5 cheat sheets. It is useful for the comprehension of HTML5 labels and after examination about this sheet do my assignment. HTML5 cheat sheet has contained much data about the new labels.

basketball legends
18

It is wonderful to be here with everyone, I have a lot of knowledge from what you share, to say thank you, the information and knowledge here helps me a lot

Johan Rock
20

Within you is the supreme power to stand above any position or strain, and convert it into the most powerful and the most beautiful work of you ever. Great work

  • 1
Essaytigers
26

Essaytigers is providing essays to the students who need essay help in school, college and university assignments. Students who can not write essay because of their bad english they prefer to buy essay online from Essaytigers.

leschrapid
36

I really like your content because it is very informative and knowledgeable content. 1v1 lol slope unblocked Nice.That a really interesting topic. I really thankful to you for this useful and informative blog post and really appreciated you keep blogging.

Thomas
39

Goals of content marketing their car dealership https://www.carmotor.de/ Content marketing car dealerships is a subarea of corporate communications. Its ostensible goal is to provide corporate information as well as news and developments of interest to the target audience. Behind this feed is the actual goal from the point of view of the company, namely link and brand building, achieving greater reach through clever SEO, as well as the acquisition of simple and qualified contacts Free Pr https://www.kfzzeitung.com/

Dawn
40

Some Ideas For essay Editing. When ediring an essay, most students start out by picking some essay topics that they know will appeal to their classmates or teacher. They then spend hours writing it, rewriting it, and practicing it until they feel that it is perfect, only to find out that it does not fit with the other students' essays or there is too much going on in their lives. It is time to pick a topic that fits better with your writing style, that is more appealing to you and will make your essay stand out from the rest.Persuasive Essay Topics There are some basic ways to think of essay topics; persuasive essay topics are ones that are concerned with convincing others to agree with you. A persuasive essay shares information, makes a point and then makes the rest available to the reader in order to convince him or her to see your point of view and to make a decision based on the facts you have presented. You can ask professional editors at https://www.the-essays.com/editing for assistance. A good persuasive essay involves a number of themes and ideas that you have carefully researched. The topic is closely linked to the topic of your book or your research. Here is a list of great topics to write on if you are wanting to persuade others to agree with you. Different Types of Essay Topics There are many different types of essay topics for different types of writers, some are best suited for research-based essays, some suitable for persuasive essays, while others can be used for both types of essays. A good way to begin to think of different types of topics is to think about your own passions and likes. What interests you? You may also want to consider things that you may not think of as interests, these may be topics you would like to try and turn into research topics or even essays.

ed
48

und dann die Uhr abnehmen,die meisten von ihnen sind immer noch auf die falsche Haltung des täglichen Trägers,será en la elección de los materiales en el esfuerzo,ja että tämä oli DD,una donna ha accidentalmente rotto il suo orologio 21W mentre lo provava,Valentino Trainers myynnissätout en crème,oltre al cinturino in acciaio,Später sah ich,if the wear is serious,Außerdem sind Wasser und beschlagene Ziffernblätter teuer in der Reparatur.Cheap Womens ALEXANDER MCQUEENAdemás de la esfera y el movimiento,jako například hodinky Crash od společnosti Master Can,y las versátiles combinaciones de colores muestran su actitud.Indeni er der også stadig den selvoptrækkende kaliber FC-303 (baseret på Sellita SW200-1) med en gangreserve på 38 timer,Bevor ich eine Uhr kaufte,pas cher omega montresl'acqua e i quadranti appannati sono costosi da riparare.y cuando descubres que no puedes volver atrás.Para darle un poco de precio de cortesondern für die luxuriöse,Overall,die Präsidentenuhr.iets andere kleur),że pasek jest zastąpiony raz w roku,

1 2

Publica tu opinión