Skip to main content

Fundamental Elements in HTML

Fundamental elements in HTML

Discover the fundamental elements of HTML, such as headings, paragraphs, lists, links, and images. Learn how to properly structure your web pages with clear and practical examples.

Common Elements and Tags​

HTML uses tags to define the structure and content of a web page. Each tag has a specific purpose and consists of an opening tag and a closing tag. Tags can contain attributes that provide additional information about the element.

Containers​

Containers are elements that group other elements. The most common is<div>which is used to create sections on a page.

HTML
<div>
  <h1>Título de la Sección</h1>
  <p>Este es un párrafo dentro de un contenedor.</p>
</div>

Headings​

These are used for titles and subtitles. They range from<h1>(the most important) until<h6>(the least important).

HTML
<h1>Título Principal</h1>
<h2>Subtítulo</h2>

Paragraphs​

They are created with the tag<p>

HTML
<p>Este es un párrafo de texto.</p>

The label<span>It's an online container used for special text, to wrap part of a text or part of a document.

HTML
<p>Este es un <span style="color:blue">ejemplo</span> de etiqueta span.</p>

They are created with the tag<a>and are used to navigate between pages.

HTML
<a href="https://www.ejemplo.com">Visita Ejemplo</a>

Images​

Inserted with the tag<img>

HTML
<img src="imagen.jpg" alt="Descripción de la imagen" />

Attributes​

Attributes provide additional information about elements. They are placed within the opening tag.

href​

Used in the tag<a>to define the link's URL.

HTML
<a href="https://www.ejemplo.com">Visita Ejemplo</a>

src​

Used in the tag<img>to define the image path.

HTML
<img src="imagen.jpg" alt="Descripción de la imagen" />

alt​

Provides alternative text for images, important for accessibility.

HTML
<img src="imagen.jpg" alt="Descripción de la imagen" />
Resources
Exercises

💻Get your hands on the code with these simple challenges: