Phase 1 — HTML Fundamentals
#2 Text elements
h1-h6, p, strong, em, lists
Headings
HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). Use them to create a clear hierarchy:
Headings
<h1>Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>Use only one <h1> per page. Don't skip heading levels — go from <h2> to <h3>, not from <h2> to <h5>.
Paragraphs and inline text
The <p> tag creates paragraphs. Inside paragraphs, use inline elements for emphasis and meaning:
Inline text elements
<p>
This is <strong>bold</strong> text and this is <em>italic</em> text.
You can also use <mark>highlighted text</mark>,
<small>small text</small>, and <code>inline code</code>.
</p>
<p>
Use <abbr title="HyperText Markup Language">HTML</abbr> for abbreviations
and <time datetime="2024-01-15">January 15, 2024</time> for dates.
</p>Lists
HTML offers three types of lists: unordered (<ul>), ordered (<ol>), and description (<dl>):
Lists
<!-- Unordered list -->
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
<!-- Ordered list -->
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
<!-- Description list -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>Blockquotes and preformatted text
Blockquotes and pre
<blockquote cite="https://example.com">
<p>The Web is for everyone.</p>
<footer>— Tim Berners-Lee</footer>
</blockquote>
<pre><code>function hello() {
console.log("Hello!");
}</code></pre>Your turn
Try the text element commands below:
terminal — browser