Codeskill

Learn to code, step by step

Crafting Text Content

Paragraphs, headings, and formatting

The HTML elements you use most for text: paragraphs, headings, emphasis, line breaks, quotes, and lists. Good structure makes content easier to read – for humans and for browsers.

The paragraph tag <p>

The <p> tag is probably the most common tag in HTML. It wraps a block of text, separated from surrounding content by blank lines.

<p>This is a paragraph. It contains a block of text that is separated from other blocks by empty spaces.</p>

Paragraphs are block-level elements. They take up the full width available and start on a new line before and after.

Headings: <h1> to <h6>

Headings structure your content. HTML provides six levels – <h1> is the largest and most important, <h6> the smallest.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<!-- Continue until h6 -->

Use headings to break content into logical sections. Typically <h1> is the main page title, with lower levels for subsections.

Emphasis and strong importance

Use <em> for emphasis (usually shown in italics) and <strong> for strong importance (usually shown in bold). Both carry meaning for screen readers, not just visual styling.

<p>This is an <em>emphasised</em> word, and this is a <strong>strongly emphasised</strong> word.</p>

The <br> and <hr> tags

<br> inserts a single line break without starting a new paragraph. <hr> creates a horizontal rule – a thematic break between sections.

<p>This is a line.<br>This is another line, on a new line.</p>
<hr>

Quotations: <blockquote> and <q>

Use <blockquote> for longer quotes and <q> for short inline quotes (browsers typically add quotation marks around <q> content).

<blockquote>This is a longer block of quoted text.</blockquote>
<p>Here is a shorter <q>inline quote</q> within a paragraph.</p>

Preformatted text: <pre>

The <pre> tag displays text exactly as written in the HTML, preserving spaces and line breaks.

<pre>
This text will maintain its spaces
and line breaks.
</pre>

Code and variable elements: <code> and <var>

Use <code> for code snippets and <var> for variables.

<p>Use the <code>&lt;p&gt;</code> tag for paragraphs.</p>
<p>The value of x is <var>x</var>.</p>

Lists for organising content

Lists group related items neatly. There are unordered lists (<ul>), ordered lists (<ol>), and list items (<li>).

<ul>
    <li>Unordered list item 1</li>
    <li>Unordered list item 2</li>
</ul>

<ol>
    <li>Ordered list item 1</li>
    <li>Ordered list item 2</li>
</ol>

Styling text with CSS

HTML structures content; CSS styles it. You can change colours, fonts, and more for paragraphs and headings:

p {
    color: navy;
    font-family: Arial, sans-serif;
}

h1 {
    color: maroon;
    font-family: 'Times New Roman', serif;
}

Put this CSS in a <style> block inside your <head>, or link to an external stylesheet.

Accessibility considerations

Use headings to structure your document logically – screen readers navigate by heading level. Use <em> and <strong> for emphasis and importance rather than relying on bold or italic styling alone.

Try it yourself

Build a page and experiment with these elements. See how they work together and how they change the look of your content. The goal is readable, well-structured text – not just making things look pretty.

PreviousDiving into Tags