Text with Meaning

After this lesson, you can give meaning to code snippets, dates, and abbreviations in text.

BEGIN WITH A QUESTION

Understanding begins with a question.

‘p’ can be an ordinary letter or the name of an HTML element. Small markers clarify what is being read without turning every sentence into a complicated component.

Give meaning to code snippets, dates, and abbreviations in text.

UNDERSTAND THE CONCEPT

Code marks code

Code marks a computer code snippet. If the snippet contains tags, < must still be written as <. Code does not automatically disable tag parsing inside it. For multiple lines whose spacing should be preserved, pre can wrap code.

Time marks structured time

Time marks a date or time. The datetime attribute provides a machine-readable value, while its content can be comfortable for people. For example: <time datetime="2027-03-21">21 March 2027</time>. Exercise dates are sample data, not a real event schedule.

Abbr and when it is needed

Abbr marks an abbreviation. Title can add its expansion, but write the full form in visible text at first use so it does not depend on a tooltip. Ordinary words do not need span or another special element when there is no additional meaning.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<p>Use <code>&lt;p&gt;</code> for a paragraph.</p>
<p>Example date: <time datetime="2027-03-21">21 March 2027</time>.</p>
<p>HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>) gives a page structure.</p>

BROWSER RESULT

The sentence remains easy to read. Code, time, and abbr add context only where needed.

COMMON MISTAKES

<code><h1>Heading</h1></code>

H1 is still read as an element, not a text example. Use <h1>Title</h1> inside code to display the syntax.

TRY TOGETHER

Practice clarifies understanding.

Complete the attribute name for the machine-readable date value.

<time ="2027-03-21">21 March 2027</time>

Show a hint

The attribute name combines date and time.

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Notes for a fictional workshop

Write code displaying <h2>, time with datetime="2027-04-05" for a sample date, and abbr for HTML with its full form in title. Also write HTML's full form in the paragraph.

<p>The sample workshop discusses HTML on 5 April 2027.</p>
<p>H2 is used for subheadings.</p>

index.htmlHTMLLn 1, Col 12 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Code marks a snippet; it does not run or secure code.
Time can separate human-readable and machine-readable formats.
Write an abbreviation's expansion in the text; title is supplementary.

Meaningful textAttribute

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

Semantic HTML °Character reference °HTML attribute °

Library: Three languages behind one page ↗

Take the Chapter Trial →