HTML - HyperText Markup Language

The fundamental structure of the web

150+ Tags
Web Structure
Interactive

🌐 What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page through the use of elements and tags.

Code HTML

<!DOCTYPE html>
<html>
<head>
    <title>Mi Página</title>
</head>
<body>
    <h1>Hola Mundo</h1>
    <p>Mi primera página web</p>
</body>
</html>
→

Result in the Browser

mi-pagina.html

Hola Mundo

Mi primera página web

🏗️ Basic Structure

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Mi Página
</title>
</head>
<body>
<h1>
Bienvenido
</h1>
</body>
</html>

<!DOCTYPE html>

Document type declaration

<html>

Root element that contains the entire document

<head>

Metadata and page information

<body>

Visible content of the page

🔧 Types of Elements

Edit the HTML:

Result:

Edit the HTML:

Result:

Edit the HTML:

Result:

Edit the HTML:

Result:

Edit the HTML:

Result:

Edit the HTML:

Result:

🎯 HTML Attributes

Attributes Global

  • class - Specifies CSS
  • id - Unique identifier
  • style - Inline styles
  • title - Tooltip info

Attributes of Forms

  • type - Type of input
  • placeholder - Example text
  • required - Required field
  • disabled - Disabled

Attributes of Links

  • href - URL target
  • target - Where to open
  • rel - Relationship
  • download - Download file

Attributes of Multimedia

  • src - File source
  • alt - Alternative text
  • width/height - Dimensions
  • controls - Playback controls

Try the Attributes:

Result:

Este elemento cambiará con los atributos
<div>Este elemento cambiará con los atributos</div>

🏛️ HTML5 Semantics

<header>
Cabecera
<nav>
Navigation
<main>
<article>
Artículo
<section>
Section
<aside>
Contenido Lateral
<footer>
Page footer

Semantic Elements

<header>

Header of the page or section

<nav>

Main navigation

<main>

Main content

<article>

Independent content

<section>

Thematic section

<aside>

Related content

<footer>

Page footer

🎬 Multimedia

Code HTML:

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Tu navegador no soporta audio HTML5.</audio>

Result:

Code HTML:

<video width="640" height="360" controls poster="miniatura.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Tu navegador no soporta video HTML5.</video>

Result:

Code HTML:

<iframe 
    src="https://www.google.com/maps/embed?..."
    width="600" 
    height="450"
    frameborder="0"
    style="border:0"
    allowfullscreen>
</iframe>

Result:

📋 Forms Advanced

Form Builder:

Generated Code:

♿ Validation and Accessibility

HTML5 Validation

ARIA Attributes

75%

💪 HTML Live Editor

HTML:

Preview:

🛠️ Resources and Tools

Validators

References

Tools

💡 Best Practices

Semantics Correct

Use the HTML appropriate elements for each type of content

Accessibility

Include alt, labels and ARIA attributes where needed

Validation

Validate your HTML code regularly

Mobile First

Design for mobile devices first