JavaScript Curriculum
Text on the Page
easyThe Nexus portal needs a homepage with a welcome message, a mission statement, and some fine print. Before you can style anything, you need to mark up the content with the right elements — structure first, appearance second.
Text on the Page
The web is mostly text. Before CSS gave us colors and fonts, HTML's text elements did double duty: they conveyed meaning and appearance. Today, CSS handles appearance — but HTML still owns meaning. Choosing the right text element matters for search engines, screen readers, and other developers reading your code.
Headings: Six Levels of Hierarchy
HTML gives you six heading levels, <h1> through <h6>. They create an outline of your page — a hierarchy that both humans and machines use to navigate.
Click any heading to inspect its properties →
<h1>Page title — one per page
Default size
32.00px
Em value
2em
Font weight
700 (bold)
ARIA level
level 1
When to use
The main topic of the entire page. Should match or relate to the <title>. Only ever use one h1.
Using multiple h1 elements confuses the document outline and is bad for SEO and screen reader navigation.
Inline Text Elements
Below the heading level, a set of inline elements add meaning to runs of text within a paragraph:
<strong></strong>Strong importance — bold
Semantic importance. Screen readers may stress it. Different from <b> which is purely visual boldness with no semantic weight.
Renders as:
Our freshly brewed espresso is made with single-origin beans.
HTML:
<strong>freshly brewed espresso</strong>The Key Distinction: Inline vs Block
Every HTML element has a default display behaviour. Understanding this early makes CSS layout make sense:
Flow within text — only as wide as their content
<span>inline<a>inline<strong>inline<em>inline<code>inlineStack vertically — stretch to full available width
<h2>Section Heading<p>A paragraph of text…<div>Generic container<ul>• List item • item<blockquote>"A blockquote"💡 CSS display: block or display: inline overrides any element's default display type
When to Use br
The <br> element should be reserved for content where line breaks are part of the meaning — not as a spacing hack. Good uses: postal addresses, poetry, and song lyrics. Bad use: two <br> tags to add space between paragraphs (use CSS margin instead).
Challenge
Mark up a company homepage section using semantic text elements. Use an h1 for the company name, an h2 for a tagline section, a paragraph with strong and em emphasis, a br for a short address, and small for legal disclaimer text.
Text on the Page
easyThe Nexus portal needs a homepage with a welcome message, a mission statement, and some fine print. Before you can style anything, you need to mark up the content with the right elements — structure first, appearance second.
Text on the Page
The web is mostly text. Before CSS gave us colors and fonts, HTML's text elements did double duty: they conveyed meaning and appearance. Today, CSS handles appearance — but HTML still owns meaning. Choosing the right text element matters for search engines, screen readers, and other developers reading your code.
Headings: Six Levels of Hierarchy
HTML gives you six heading levels, <h1> through <h6>. They create an outline of your page — a hierarchy that both humans and machines use to navigate.
Click any heading to inspect its properties →
<h1>Page title — one per page
Default size
32.00px
Em value
2em
Font weight
700 (bold)
ARIA level
level 1
When to use
The main topic of the entire page. Should match or relate to the <title>. Only ever use one h1.
Using multiple h1 elements confuses the document outline and is bad for SEO and screen reader navigation.
Inline Text Elements
Below the heading level, a set of inline elements add meaning to runs of text within a paragraph:
<strong></strong>Strong importance — bold
Semantic importance. Screen readers may stress it. Different from <b> which is purely visual boldness with no semantic weight.
Renders as:
Our freshly brewed espresso is made with single-origin beans.
HTML:
<strong>freshly brewed espresso</strong>The Key Distinction: Inline vs Block
Every HTML element has a default display behaviour. Understanding this early makes CSS layout make sense:
Flow within text — only as wide as their content
<span>inline<a>inline<strong>inline<em>inline<code>inlineStack vertically — stretch to full available width
<h2>Section Heading<p>A paragraph of text…<div>Generic container<ul>• List item • item<blockquote>"A blockquote"💡 CSS display: block or display: inline overrides any element's default display type
When to Use br
The <br> element should be reserved for content where line breaks are part of the meaning — not as a spacing hack. Good uses: postal addresses, poetry, and song lyrics. Bad use: two <br> tags to add space between paragraphs (use CSS margin instead).
Challenge
Mark up a company homepage section using semantic text elements. Use an h1 for the company name, an h2 for a tagline section, a paragraph with strong and em emphasis, a br for a short address, and small for legal disclaimer text.