Skip to main content
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It defines the structure and content of a webpage using “tags” (etiquetas).

​
What is HTML?

HTML provides the foundation of every website by organizing content into a structured format that browsers can understand and display. Think of HTML as the skeleton of a webpage - it gives structure to text, images, forms, and other content.

​
Key Characteristics

  • Markup Language: Uses tags to annotate and structure content
  • Platform Independent: Works across all browsers and devices
  • Human Readable: Easy to learn and understand
  • Semantic: Modern HTML5 provides meaningful tags that describe content

​
HTML Document Example

Here’s a basic HTML5 document structure: 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My First Webpage</title>
</head>
<body>
  <h1>Welcome to HTML!</h1>
  <p>This is a paragraph of text.</p>
</body>
</html>

​
Breaking Down the Structure

<!DOCTYPE html>
The DOCTYPE declaration tells the browser which version of HTML is being used:
  • html without a version number means HTML5 (current version)
  • Required and must be the first line of the document
  • Not case-sensitive, but lowercase is conventional
<html lang="es">
The <html> element is the root element containing all other elements:
  • lang="es" attribute indicates the content language
    • "es" = Spanish
    • "en" = English
    • "pt" = Portuguese
  • Important for SEO and screen readers (accessibility)
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My First Webpage</title>
</head>
The <head> contains metadata - information about the document that isn’t directly visible:
  • Character encoding settings
  • Viewport configuration for responsive design
  • Page title, meta descriptions
  • Links to stylesheets and scripts
  • SEO and social media metadata
<body>
  <h1>Welcome to HTML!</h1>
  <p>This is a paragraph of text.</p>
</body>
The <body> contains all visible content:
  • Text, images, videos, forms
  • Semantic structure (header, main, footer)
  • Interactive elements (buttons, links)

​
Types of HTML Elements

HTML elements are categorized by their display behavior and semantic meaning:

​
1. Block-Level Elements

Block-level elements occupy the full width available and always start on a new line. 
<div>This is a generic block container</div>
<p>This is a paragraph</p>
<h1>This is a heading</h1>
<header>This is a header section</header>
Common block elements: <div>, <p>, <h1>-<h6>, <header>, <main>, <footer>, <section>, <article>, <nav>

​
2. Inline Elements

Inline elements only occupy the space they need and don’t start on a new line. 
<span>This is inline text</span>
<a href="#">This is a link</a>
<strong>This is bold text</strong>
<em>This is italic text</em>
Common inline elements: <span>, <a>, <img>, <strong>, <em>, <button>, <input>

​
3. Semantic Elements (HTML5)

Semantic elements give meaning to the content, improving SEO and accessibility. 
<header>Page header</header>
<nav>Navigation menu</nav>
<main>Main content area</main>
<article>Independent, self-contained content</article>
<section>Thematic grouping of content</section>
<aside>Related but secondary content</aside>
<footer>Page footer</footer>
Benefits:
  • Better SEO (search engines understand structure)
  • Improved accessibility (screen readers navigate better)
  • More maintainable code (easier to read and understand)

​
4. Void/Self-Closing Elements

Void elements have no content and don’t need a closing tag. 
<img src="image.jpg" alt="Description" />
<br />
<hr />
<input type="text" />
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
Common void elements: <img>, <br>, <hr>, <input>, <meta>, <link>

​
Comparing Approaches

<!-- Non-semantic approach -->
<div id="header">
  <div id="nav">...</div>
</div>
<div id="content">
  <div class="post">...</div>
</div>
<div id="footer">...</div>
Everything used generic <div> elements with IDs to indicate purpose.

​
Next Steps

Now that you understand the basics of HTML, you’re ready to dive deeper into:
  • Document Structure: Learn about the <head> and metadata
  • Semantic Elements: Master HTML5 semantic tags
  • Tags and Attributes: Understand how to configure elements
  • Forms and Inputs: Create interactive user input forms
  • Best Practices: Write clean, accessible, maintainable HTML

Try It Yourself

Create a simple HTML file with:
  1. A proper DOCTYPE declaration
  2. A title in the head section
  3. A heading and paragraph in the body
  4. At least one link to another page
Open it in your browser to see the result!

Build docs developers (and LLMs) love

Get started for freeTalk to us