Roadmap Completo para Aprender HTML5

[{"selector":"#anim-707f56f0-c568-4f83-918c-04a595f0756b [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-9d016100-0a4c-4a00-88e4-6fc86d923ae5","keyframes":{"transform":["translate3d(-115.28663%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-be6e3ab5-958a-4d13-9b05-c5d66f8cadeb","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d32f0072-c075-402d-b270-033db349fe72","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] HTML5 é a linguagem de marcação mais recente e é amplamente utilizada para criar estrutura e conteúdo de páginas da web .

Fundamentos Básicos

[{"selector":"#anim-88649cbe-5c51-4676-aef6-46f860b07e4e [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-169ed100-e9c7-4cfc-a0e3-621653dfba90","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e7a44978-948b-4498-b674-ddcca926a7fe","keyframes":{"transform":["translate3d(-115.28663%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-65b84e3c-cb2d-4cf6-8092-df00da6388da","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-156b6089-b097-492a-8499-946138e7fd51","keyframes":{"transform":["translate3d(115.18987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fac1a32a-7d1b-45ec-b4ce-fb144d2a606a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8be00733-0d32-40d0-8fb2-de02e7dc7778","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Tags principais: <html>, <head>, <title>, <body> . Organização correta.

Semântica HTML

[{"selector":"#anim-c2a00a03-cddc-4792-92bf-b058525113d5 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-31.28680067153245%, 0, 0) translate(-25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-d82e4e49-b579-45db-a71e-08689271dcb3","keyframes":{"transform":["translate3d(-114.87342%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d98f7118-b9b2-43c4-94b4-e4f5d1ae0c05","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cb91c9a4-23f3-45b7-8666-40ca57d4fa8f","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-92f2abe4-7a2e-4c4a-89d3-f97dbb1d3b30","keyframes":{"transform":["translate3d(115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a1a8cb78-1bd1-4b61-a717-148db946577b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-992a092a-31a3-415a-b045-d42f2424fea4","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Tags semânticas: <header>, <nav>, <section>, <article>, <footer> Estruturação do conteúdo

Formulários e Entrada de Dados

[{"selector":"#anim-d2c2c6d4-d5c5-459c-bc91-c880509bb674 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-071af72d-88b5-47f3-8a9e-006bcccc9ee8","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8a7089ad-d779-4459-b3cb-2dd3ddb1a8e6","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-172659bc-ca3c-4704-a9e3-1081020eadad","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7d5f690c-2e34-497a-88b8-e73b28239ea0","keyframes":{"transform":["translate3d(115.18987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d8d157f7-9eb0-4328-af80-e4f9e536f28d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4c252f53-0df4-4586-a4f4-a9e8ce98e1a1","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Elementos de formulário: <input>, <select>, <textarea>, <label>, <button> Criação de formulários interativos

Validação de Formulário

[{"selector":"#anim-6707e6d3-cac6-41e1-9291-93f176c95904 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-d7f191be-a4e9-4e61-bdfe-9227fae7788a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-143739da-47c6-4d02-af8a-c28279b0d22b","keyframes":{"transform":["translate3d(-114.87342%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d70d1733-90b3-4c26-ba52-2593c17c1485","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1dc34304-a934-4155-b17d-3b27d75f05c6","keyframes":{"transform":["translate3d(114.77986%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Técnicas de validação HTML5 Campo obrigatório, tipos de entrada (email, número, data) Mensagens de erro personalizadas

Multimídia

[{"selector":"#anim-bae96906-8872-447b-bf99-00e2196597a4 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(15.354729677761213%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-ff0c6b3c-7cca-416a-bb3f-9f4519aafdad","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1f4269fc-bc85-48b9-a0c3-09ba8c7d26cf","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-afee49dd-1b58-4b5e-a30a-3605226edc1a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-712e6c29-778f-4814-89de-dac4b971fe67","keyframes":{"transform":["translate3d(116.66665%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-be0e331e-69ca-49b5-8f34-5e5ad5135bab","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2f2c2bed-3db0-41bc-9255-1d5f05c8dde1","keyframes":{"transform":["translate3d(-115.38462%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Inserção de imagens: <img> , atributos alt Áudio e vídeo: <audio> , <video> , controle de reprodução