HTML Text Basics

When writing technical tutorials, choose elements that distinguish source code, user input, and program output.

The Code Element

Use <code> for a fragment of computer code.

<p>Use <code>console.log()</code> to print a value in JavaScript.</p>

The Kbd Element

Use <kbd> to represent keyboard input, such as a key or key combination.

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save on many Windows applications.</p>

Keyboard shortcuts may vary by operating system and application. Explain the appropriate shortcut for your audience.

The Samp Element

Use <samp> for sample output from a computer program.

<p>Program output:
  <samp>File saved successfully.</samp>
</p>

The Pre Element

Use <pre> when whitespace and line breaks should be preserved as preformatted text.

<pre>
Name: Bikram
Role: Developer
Location: Odisha
</pre>

The browser normally preserves whitespace and line breaks inside preformatted text. It is commonly combined with code when presenting a multi-line code sample.

<pre><code>function greet() {
  console.log("Hello, Codementrix!");
}</code></pre>

In a real HTML source file, escape characters such as < and > when you need to display HTML tags as text rather than have the browser interpret them as markup.

12. Complete Working Example: A Technical Blog Article

The following example combines headings, paragraphs, emphasis, quotations, abbreviations, citations, and code-related text in a realistic article.

<article>
  <h1>Why Learn HTML?</h1>

  <p>
    <abbr title="HyperText Markup Language">HTML</abbr>
    is essential for structuring content on the web.
  </p>

  <h2>Start with the Basics</h2>

  <p>
    Learn the meaning of <strong>elements</strong>,
    attributes, headings and paragraphs before moving
    to advanced topics.
  </p>

  <h2>Practice Regularly</h2>

  <p>
    You should <em>practice every day</em> to improve
    your understanding of web development.
  </p>

  <blockquote>
    <p>Small, consistent steps can build strong skills.</p>
  </blockquote>

  <h2>Try an Example</h2>

  <p>Create a paragraph using the <code>p</code> element.</p>

  <pre><code>&lt;p&gt;Hello, world!&lt;/p&gt;</code></pre>

  <p>
    Learn more from
    <cite>HTML Living Standard</cite>
    and other reliable technical references.
  </p>
</article>

This example uses semantic elements to describe the purpose of the content. It does not depend on visual styling alone to communicate the structure.

13. Common Mistakes and How to Avoid Them