Heading 1: The Main Title (H1)

This is the largest heading and should appear at the very top of the page content. It serves as the primary title of the document.

Heading 2: Sub-Section Header (H2)

This section introduces basic inline formatting and links. Testing the visual hierarchy is important to ensure your CSS styles headings correctly, especially relative to the body text.

Heading 3: Minor Topic (H3)

Heading 4 (H4)

Heading 5 (H5)

Heading 6 (H6)

Inline Formatting Test

This paragraph tests basic bold text and italic text. You can also use bold italic text or ~~strikethrough text~~.

The <code> tag is used for inline code, like testing the document.getElementById('modal') function call.

Links and URLs

Here is a standard External Link that should change color on hover. This is an internal link to the About page: About Me Page.

Lists and Blockquotes

Unordered List

This list checks that bullet points (- or *) are rendered correctly, including spacing and list indentation.

• First item.
• Second item.
  • Sub-item one.
  • Sub-item two.
• Third item.

Ordered List

This list checks sequential numbering (1., 2., etc.).

1. First numbered step.
2. Second numbered step.
3. Third numbered step.
   1. Nested sub-step.
   2. Another sub-step.

Blockquote

This is a blockquote. It’s often used for citing sources or highlighting important text. The font style or border on this element should distinguish it clearly from the surrounding body text.

Quote Source: A Hypothetical Style Guide

Code Blocks and Tables

Fenced Code Block (Language Highlighting)

This block simulates a snippet of JavaScript code. Your syntax highlighter (if configured) should color the keywords (const, function, return).

var globalVar
/**
 * Constructor for <code>AjaxRequest</code> class
 * @param url the url for the request<p/>
 */
function AjaxRequest(url) {
    var urls = ['www.cnn.com', 5, globalVar]
    this.request = new XMLHttpRequest()
    url = url.replace(/^\s*(.*)/, '$1') // skip leading whitespace
    /* check the url to be in urls */
    var a = '\u1111z\n\u11ac'
    this.foo = new (function () {})()
    let a = true && false
    foo()
    // #
    const cons = 'abc'
    let a = true
    console.log(cons)
}
let myObj = {
    first: 'first',
    second: 3,
    o: {
        hello: 'world',
    },
}

typeof 'nice'
new Class()
class NameClass {}
foo({ abc: 'abcde' })
foo.bar({ foo: 'abc' });
obj.abc = function () {}

async () => {
    await Promise.resolve()
}

Table Rendering

Tables should have proper borders, alignment, and header styling.

Visual Separators and Images

Horizontal Rule

A horizontal rule (***, ---, or ___) should render as a clean line break across the content width.

Image Check

Ensure images are responsive (scaling down to fit the container) and that the alt text is applied.

Extended Content for Scrolling Test

This section is included purely to make the document longer, ensuring the vertical scrollbar appears correctly and the user can navigate the full height of your layout.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum eveniet in, quidem adipisci sunt rem et, nulla veritatis natus eum quos recusandae odio? Adipisci, dolorum! Distinctio, modi. Laudantium, voluptatibus nemo! Eos, iste. Sed commodi dolores, cumque, iure voluptate totam illum minus, doloremque animi nihil est aut. Quod, reiciendis. Voluptates cumque sint dolor? Quaerat voluptate quos, dolor sit amet.

Quia, eaque esse. Quaerat corporis aut distinctio doloribus. Adipisci, dolor laborum. Cumque, labore! Laborum, quas. Molestias, temporibus! Placeat, necessitatibus. Facilis, velit. Placeat, animi? Cumque deleniti praesentium vero. Labore, ipsum? Corporis, quos! Provident dolorum cumque, iste natus accusantium iure, ex ratione, voluptatum voluptatem sint amet.

• This is another list item to break up the flow.
• More text follows below.

Exercitationem iusto velit, cumque dolore natus, non aspernatur laboriosam, temporibus iste eaque voluptatibus minus. Fugiat, placeat. Sunt, sequi earum! Quam, laboriosam. Vitae, doloremque? Nemo, dolor. Necessitatibus beatae amet natus voluptatibus, asperiores, debitis vero, officia mollitia dolore quisquam ab distinctio in. Dignissimos, vero. Fugiat, rem? Facilis laboriosam, in iusto quos quaerat corporis? Doloremque, sint.

[End of Document Check]