HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB ///

Web Components

Deploy lists, connect pages with anchors, and render images. The foundation of navigation and media.

● common-tags.html

NODE_1

010203040506

📦

System:Beyond headings and paragraphs, HTML uses common tags to build complex layouts. Today we explore lists, links, and images—the 'big three' of interactive web content.

Tag Hierarchy

NAVIGATE COMMON WEB ELEMENTS.

Lists & Logic

Unordered lists (UL) use bullets. Ordered lists (OL) use numbers. Every child must be an (LI).

Validation Node

Which element is the correct child for a <ul> tag?

🌐

Developer Nexus

Hyperlink Network

SYNCED

Share your custom navigation components and complex list structures with the community.

Support Us

HTML Common Tags

Pascual Vila

Senior Web Architect // Code Syllabus

Once you master basic typography, you must learn to link documents and embed media. These tags form the interactive fabric of the internet.

1. Lists: UL & OL

Websites are largely made of lists. Navigation menus, sidebars, and footers are typically ul (unordered list) elements. Use ol when the sequence of items is critical, such as a ranking or procedure.

2. Anchors: The A Tag

The a tag is what makes the web a "web". By using the href attribute, you connect one page to another. Remember to use target="_blank" sparingly to keep users from being overwhelmed by new tabs.

3. Visuals: The IMG Tag

Images are embedded via the img tag. Because it doesn't wrap text, it is a void element. Always include an alt attribute; without it, your site is invisible to search engines and screen readers.

Access Full Technical Log+

Detailed technical overview of attribute syntax (key="value"), absolute vs relative paths for images/links, and the concept of nested lists for dropdown menus.

Note: Anchor tags can also link to IDs within the same page using #id syntax.

The Lexicon

href: Hypertext Reference. Define la dirección URL a la que apunta el enlace.
src: Source. Atributo obligatorio en imágenes para definir la ruta del archivo.
alt: Alternative Text. Descripción esencial para accesibilidad y SEO.
target: Determina dónde se abre el enlace (usar _blank para pestañas nuevas).
li: List Item. El contenedor individual para elementos dentro de un <ul> o <ol>.
Void Element: Etiquetas que no tienen cierre (como <img> o <br>) porque no contienen texto.