<div>
div is a block container: it starts on a new line and fills the available width. It groups and lays out, and it adds no meaning at all.
The template's typography
Every sample below is the real HTML element, never a styled stand-in. Copy the markup and you take the semantics with it, the part screen readers and search engines actually read.
Headings
Six levels that describe the structure of the document, not the size of the text. Skip a level and you break the map a screen reader navigates by.
<h1>
Sphinx of black quartz, judge my vow.
<h2>
Sphinx of black quartz, judge my vow.
<h3>
Sphinx of black quartz, judge my vow.
<h4>
Sphinx of black quartz, judge my vow.
<h5>
Sphinx of black quartz, judge my vow.
<h6>
Sphinx of black quartz, judge my vow.
Paragraphs
The paragraph is the unit of reading. Use hr to separate topics and pre when spaces and line breaks are part of the content.
<p>
The browser collapses the spaces and line breaks of your source: write the text however it feels comfortable, because the line is set by the width of the column.
A comfortable column runs about 65 characters per line. Any wider and the eye loses the line every time it travels back to the left.
<hr>
<pre>
project/
app/
pages/ routes
assets/css/ style
i18n/
locales/ es, pt-BR, enBlock and inline
Two containers with no meaning of their own. When an element that does mean something exists, that is the one to use.
<span>
span is an inline container: it wraps a run of text without breaking the line. It paints or marks part of a sentence.
Formatting
Every effect has an element that carries the meaning. Bold for taste is a utility; bold because it matters is strong.
<strong>Text of high importance, not merely thicker.
<em>Emphasis that changes the meaning of the sentence.
<mark>A run highlighted for its relevance in this context.
<small>Side note, legal notice or fine print.
<del>Text a revision took out.
<ins>Text a revision put in.
<sub>Subscript, for formulas and notes.
<sup>Superscript, for powers and references.
Quotations
Markup to quote someone, expand an abbreviation, give a contact address and reverse the direction of reading.
<blockquote> + <cite>
Semantics is not decoration: it is the only part of the markup that keeps working when the CSS never loads. EchoSistema style manual
<q>
A short quotation sits inside the sentence, like this: the quotation marks come from the browser, following the language of the document
<abbr>
The language of the web is HTML and the abbreviation always carries its full form in the title.
<address>
EchoSistema, 42 Platform Avenue, suite 3, Austin<bdo dir="rtl">
This text reads backwards
Code
Four elements that say where the text came from: what you write, what you press, what the machine answered and what stands for a value.
<code>font-family: var(--font-mono)
<kbd>Ctrl + K
<samp>Build finished in 3.4 s
<var>columnWidth
Links
The same element moves within the page, opens the mail client, dials a phone and leaves the site. Only the destination changes.
<a href>
A link takes you to an anchor on this very page, hello@echosistema.online or to an external site.
The external link opens in another tab and carries rel noopener: without it, the page you opened gets a reference back to ours.
Images
An image arrives with its description and its dimensions. figure ties the image to its caption, and picture chooses the source by screen width.
<figure> + <figcaption>
<picture> + <source>
picture chooses the source by width or format; srcset inside an img chooses the density. Here, above 40rem you get the flag of Spain instead of the previous one.
Semantic elements
The landmarks of the page. A screen reader jumps from one to the next, and each name promises something different.
<header>
The head of the page or of a section: title, logo and whatever introduces it.
<nav>
A block of primary navigation links, not just any list of links.
<main>
The content unique to this page, one per document.
<section>
A thematic stretch of the content, with a heading of its own.
<article>
A piece that stands on its own, even away from this page.
<aside>
Related but secondary content, such as a sidebar.
<footer>
The foot of the page or section: authorship, contact and legal links.
<figure>
Content referenced from the text, with an optional caption.
<details>
A block that opens and closes, with keyboard and state, without a line of script.
<time>
A date or time the machine reads from the datetime attribute.
The structure assembled: the same landmarks, one inside the other, dressed by the system.
<header>
The head of the page or of a section: title, logo and whatever introduces it.
<section>
A thematic stretch of the content, with a heading of its own.
<article> + <time>
A piece that stands on its own, even away from this page.
<details> + <summary>
Why prefer details over a hand-built accordion?
Because the browser already gives you keyboard, focus, open and closed state, and even find-in-page. Script comes in only when the behaviour asks for more than the element gives.
Entities
When the character is HTML syntax or is missing from your keyboard, you write it by name.
| Code | Renders | When to use it |
|---|---|---|
| ␣ | A space that refuses to break the line between two words. |
< | < | Less-than sign, to show markup without it being parsed. |
> | > | Greater-than sign, closing the pair above. |
& | & | The literal ampersand, which in raw text opens an entity. |
" | " | Double quote inside the value of an attribute. |
© | © | Copyright symbol, the one in the footer. |
… | … | An ellipsis as a single typographic character. |
× | × | Multiplication sign, the correct one for dimensions. |
URL encoding
An address only travels in safe characters. Everything else goes out as a percent sign and two digits.
| Character | Encoded | Why |
|---|---|---|
| ␣ | %20 | A space cuts the address short in servers and in mail clients. |
| @ | %40 | It separates user from host, so inside a value it goes encoded. |
| / | %2F | It separates path segments; when it is data, it goes encoded. |
| ? | %3F | It opens the query string, so as plain text it goes encoded. |
| & | %26 | It separates one parameter from the next inside the query. |
| # | %23 | It opens the fragment, the part of the address that never reaches the server. |
Attributes
What each element promises beyond its own name. These eight show up on nearly every page.
lang
The language of this run: it guides pronunciation, quotation marks and hyphenation.
title
Helper text shown on hover; never the only place the information lives.
alt
The description of the image for anyone who cannot see it, and for when it fails to load.
href
The destination of the link: a route, an anchor, an email or a phone number.
id
A unique name in the document, target of anchors and of form labels.
class
The styling hook, repeatable: name the role, never the colour.
data
A value owned by the application, available in the element's dataset.
aria
What accessibility needs and the markup does not say; the right element always wins.
Families
Three families with fixed roles. None of them is there for taste: each one has its place in the system.
Manrope
Display and body
Manrope sets the headings and the running text. It is the main voice of the system.
Montserrat
Secondary
Montserrat comes in for the tagline and institutional accents, always in short runs.
JetBrains Mono
Monospaced
JetBrains Mono for code, commands and anything read column by column.
Weights
The five weights the site actually loads. Outside this list the browser synthesises, and synthetic bold smears the stroke of Manrope.
Sphinx of black quartz, judge my vow. 400
Sphinx of black quartz, judge my vow. 500
Sphinx of black quartz, judge my vow. 600
Sphinx of black quartz, judge my vow. 700
Sphinx of black quartz, judge my vow. 800
Rules
Four decisions that hold up everything above.
Measure
A long paragraph stops at about 65 characters per line. In a wide column the eye loses the line on the way back to the left.
Hierarchy
Heading levels descend one at a time. Size is chosen afterwards: the order of the document comes first.
Weight
Two weights per screen are enough. When everything is heavy, nothing stands out.
Semantics before style
Pick the element for what it means and paint it later. A utility changes in a minute; the semantics is what machines read.