Article h1

Article h2

Article h3

Article h4

Article h5

Article h6

Links

Links are the basic means to move between pages. Relative url links open in the same tab while absolute url links open in a new tab.

Here are some button styles.

hgroup

The hgroup tag has an odd history, but it groups together a heading and a paragraph element as a subtitle.

Basic formatting

P- paragraph.

This page demonstrates the style formatting. Ideally, the stylesheet can be changed and this content should reformat accordingly.

(indent class demo). There are some common text formatting tags. There used to be bold and italic, however it is now understood that the purpose of boldening or italicize-ing a content can have different meanings (semantic context). By using the proper tags for the proper semantic context makes it easier to focus styling for that purpose. Non-semantic elements are slowly being phased out of specification, with some browsers maintaining old default styling for compatibility. The following is a ul- unordered li- list of some formatting tags and their semantic contextual purpose.

• b- bring attention - Used to mean bold, but it is not semantic. It has fallen out of favor.
• i- idiomatic - Used to be italic, but now it is somewhat semantic depending on context.
• em- emphasis - Stress emphasism, which may appear italicized.
• strong - Importance or urgency, which appears emboldened.
• mark - Highlighting.
• u- unarticulated annotation - Used to be called underline. But it is now preferable to use css text-decoration for underlining.
• s- strikethrough - Provides strikethrough, but it is preferable to use del- and ins- tags.
• dfn- definition - Marks a term in a sentence that defines the term.
• ul and li - An unordered list tag and a list item.
• Sub list items are just another set of ul and li within the last, like ul > ul > li.

Description list

The following is the use of dl- description list, dt- description term, and dd- description details tags.

Denim (semigloss finish)

Ceiling

Denim (eggshell finish)

Evening Sky (eggshell finish)

Layered on the walls

Message header

From: Me
To: You
Date: Mar, 7, 2025
Subject: Message header

(above: p > small) Basic arrangement for a message header, like an email.

Blocks

The following is a blockquote. Blockquote elements can have a cite attribute, but it requires special css or javascript to retrieve it.

Here is a blockquote style alone.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Another line in a blockquote.

This next example is a blockquote wrapped in figure tags. "Nineteen Eighty-Four" is wrapped with cite tags, which mark up a title inside a content of citation, which is all included between figcaption.

Code

For the following methods of displaying code, note that html tags render within these methods. The only way to avoid that is to replace the arrows. Here are relevant html entities:

• < - &lt;
• > - &gt;
• " - &quot;
•   - &nbsp; (non-breaking space character)
• & - &amp;

Here is a demonstration of code.

Preformatted

Pre- preformatted text tag renders the content without other styling, though we have added a class to handle word wrapping.

This is preformatted text with a basic class.
2nd. line, no line break, just a new line in raw html. 
    3rd. Indents in the raw html line will show up in rendering.
4th. Next line has line wrapping, but not word breaking.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is a pre element with a class with more formatting.
2nd.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Div class

Another method is to use a div with a class, and inner elements to identify the lines. Unfortunately, this doesn't show indents or spaces at the beginning of a line correctly.