HTML Elements Reference

HTML elements are semantic building blocks, not just tags. Each element has content-model rules, permitted attributes, and browser behavior that can affect layout or accessibility.

<link> #

<link> references external resources by URL. The most important attributes are:

• rel, which names the relationship;
• href, which points to the resource.

Typical uses include stylesheets and preconnect hints:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="/styles.css">

rel values are heavily overloaded, thus they should be read against the IANA link-relations registry when behavior is unclear.

<meta> #

<meta> provides metadata such as character encoding, viewport settings, or page description. It usually belongs in the document head and is often consumed by browsers, crawlers, or social-sharing systems.

<noscript> #

<noscript> contains fallback content for environments where JavaScript is disabled or unsupported.

It is useful for:

• progressive enhancement;
• theme bootstrap hints;
• warning messages for script-dependent features.

<p> #

<p> elements cannot be nested. If you write a paragraph inside another paragraph, the browser will implicitly close the outer paragraph.

That behavior matters because a template engine can accidentally emit invalid nesting even when hand-written HTML looks fine.

<p>
  First paragraph.
  <p>Second paragraph.</p>
</p>

The browser rewrites that markup into separate sibling paragraphs.

Layout And Semantics #

Elements are not interchangeable:

• structural elements define document hierarchy;
• phrasing elements define inline content;
• replaced elements such as images and canvases have host-defined rendering behavior.

When a page is built from templates, the element choice affects both styling and accessibility. A semantically correct element usually reduces the amount of CSS needed later.

Practical Rule #

Treat elements as contracts:

1. check the permitted content model;
2. check the required or meaningful attributes;
3. check how browsers repair invalid markup.

That habit prevents many layout bugs before they reach the page.