Styleguide

This is a secondary header. Here's where we'll talk about text stuff.

A paragraph with a link in it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime asperiores qui modi porro iusto quibusdam aut sapiente quasi nemo possimus, cum pariatur saepe molestiae. Ad quia error excepturi quod explicabo!

A paragraph with an abbreviation in it. FYI, lorem ipsum dolor sit amet consectetur adipisicing elit. Esse alias voluptatum omnis dolor laudantium tenetur autem natus consequuntur architecto amet qui, explicabo ea obcaecati ab optio molestiae, similique maiores sed?

This is a tertiary header

Let's talk about inline text semantics (h4 btw).

Here's a paragraph with a bunch of styling in it. This sentence is wrapped in a span tag. This sentence is wrapped in a code tag. This sentence is wrapped in an em tag. Let's do a strong tag next, wow! Here's an i tag at play; these are usually used for technical terms or taxonomical designations. If you've got a keyboard shortcut you're defining, you can use the kbd tag like so: ctrl + ⌘ + ⌥. Here we have an example of some marked or highlighted text. Damn, HTML is sick (this is an inline-quote element, or q tag). In addition to marking text, we can also strike it through, using either the s tag, or the del tag. If we're using del, we can also use ins where appropriate to semantically indicate a change in content over time. If you're indicating a date or time, you can communicate that semantically with the time tag, for instance 8:00 January 30th, 2021. Lastly, let's cover the use of superscript numerals, like ¹ or ⁶⁹, and subscript numerals, like ₄₂₀ or ₆₆₆ inline. How we lookin' so far?

This is a tertiary header

Here is a sentence that defines the phrase this particular phrase — it uses a dfn tag to indicate which phrase is being defined. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam aut voluptas libero perferendis, repellendus rem eum quas corrupti sit magni? Non sapiente ex, voluptates eius libero consequuntur. Molestias, quas nesciunt.

An h2 about block-level text content (and has a side-comment that uses the small tag.)

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo, eum sed! Molestias excepturi ut consequatur debitis voluptate voluptas vitae, alias odio, sapiente dolorem fugiat voluptatum explicabo laudantium optio quibusdam architecto!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque optio quas veniam explicabo rerum, architecto eaque molestias ea ab in debitis iure aliquid quia culpa ratione qui ad voluptate suscipit!

All credit to the author

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus laudantium pariatur iste distinctio reiciendis repellat beatae vero nostrum quae atque, neque ab optio tenetur recusandae. Minima explicabo provident necessitatibus delectus?

Another tertiary header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem beatae cupiditate qui! Doloribus, magni. Ut iusto at, totam, odit ex ipsa quibusdam, voluptas exercitationem est sit explicabo a velit iste.

A fourth-level heading before an address.

Here is our contact information.

Another h5 because I need a place to put an h6 and I can't skip header-levels.

Okay so this is a sixth-level header element but if we're being completely honest, why are you earnestly using an h6? This is tooooo small!

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus sapiente sint est ad quaerat. Eius at tempora sit magni repellendus laborum eaque quo numquam consequatur amet incidunt, iste vel placeat.

On now to code samples and mathematics.

A third-level header that comes right after a second-level header.

Typically when representing a code sample, we use a combination of the <pre> and <code> tags. The code tag on its own represents inline code, short fragments of output like a variable name. When we need multiple lines, and to preserve indentation, we can use the pre (or preformatted) tag, like so:

<div class="wow">
<p>This is a <pre> tag with a nested <code> tag, and some divs and paragraph tags inside.</p>
</div>
    

Slightly lesser-known than these, however, is the <samp> tag, which you can use to indicate some output from a computer (as opposed to input).

In mathematics and programming, it's often useful to define a variable — you can communicate this in HTML with the var tag, like I just did here.

Lists, lists, lists!

Here's a <dl> element. This is an h3 btw.

You can use the dl tag to represent a paired list of description terms (dt), and description definitions (dd).

Country (dt tag)

Norway (dd tag). Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Region

Central Norway. Accusantium officiis, vitae expedita doloribus consectetur repudiandae magnam id.

County

Trøndelag. Eligendi veniam mollitia laborum aliquid error possimus, aliquam illo, minus nemo aspernatur veritatis?

District

Dovre. Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Next, let's have an unordered list.

• Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo illo accusantium nihil dolor modi, sunt dolorum autem maiores architecto recusandae ipsum fugiat aliquam deleniti saepe nam ex, quisquam dicta rerum!

• Ab vitae a quaerat. Ducimus molestiae sunt eaque, neque iure saepe, velit quos eveniet ab assumenda nemo hic officia et commodi voluptatum excepturi quod voluptate dolorum, magnam omnis ea voluptatibus?

• Officia, dolorum amet sunt id consequuntur ipsa. Veritatis nulla et itaque expedita, accusantium quibusdam corporis dicta quasi molestiae consequuntur debitis! Eum pariatur culpa quo itaque inventore voluptate alias, consequuntur tempora?

• Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae illum mollitia, tenetur pariatur a dignissimos ducimus quos fuga praesentium! Placeat delectus doloremque tenetur aliquam. Cum quod nulla maxime at ab!

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum reprehenderit corrupti aliquid, obcaecati modi nulla explicabo amet nostrum quisquam ad exercitationem, perferendis, consequuntur nihil porro asperiores rem nesciunt doloribus nobis!

  • Dolore laboriosam numquam odio, molestias itaque vitae neque ullam aperiam enim facere magni a. Magni, nam quas, suscipit iure necessitatibus temporibus animi, nisi nemo nulla pariatur dignissimos molestias aspernatur sint!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit consequatur cupiditate tempora sequi minima rerum quis vitae doloribus vel odit asperiores quam libero perspiciatis, praesentium qui in accusantium aliquam velit!

And an ordered one.

1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quos explicabo, vel ad adipisci incidunt harum blanditiis tenetur ea, minima aliquid expedita dolorum, corrupti voluptates. Id cumque excepturi natus dicta!

2. Illum sint quidem, incidunt dolorum veniam nisi delectus saepe architecto explicabo reprehenderit consequuntur in eum cum necessitatibus numquam quisquam. Repellat soluta alias deserunt sequi dolorum corrupti velit cumque? Modi, quas.

3. Veniam at rerum quas repellendus, nobis repellat obcaecati doloremque, ducimus iusto, vero perferendis voluptatem. Laborum nesciunt hic deleniti vero nemo eius optio dolores quo repellendus doloribus. Amet eaque exercitationem quod.

Now like a blitz of weirdo combinations of them.

• Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum vitae voluptates facere possimus magnam debitis quasi quas aliquid, vero incidunt consequuntur excepturi dolorum. Sapiente, iusto animi saepe illum eius vitae?
  1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio necessitatibus, nesciunt quis dolor illo obcaecati maxime deleniti iure repellendus ratione rerum exercitationem quidem? Magnam commodi quibusdam vitae quia mollitia deserunt?
     1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid praesentium iusto eveniet facere impedit, dolor necessitatibus suscipit eos minus labore assumenda obcaecati iure quibusdam possimus molestiae odio totam reiciendis? Unde!
  2. Aliquam architecto maxime sint neque ipsum recusandae facere nam minima? Esse praesentium nobis maxime odit quos? Sit, harum. Non praesentium id quia ut repudiandae quos nobis delectus dolore molestiae magni.
     • Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates in harum sit qui sint, quis alias perspiciatis optio illo sed praesentium eum animi vero. Explicabo incidunt consequatur similique repellat eius!
     • Quod vero facilis magni dolore odio ducimus nam, nostrum enim repudiandae neque minima voluptatum labore, provident, esse eveniet molestiae dolorem mollitia impedit rerum recusandae in? Voluptatum ipsam impedit voluptate beatae.
     • Eos enim voluptatem dicta aliquid cumque quibusdam, et molestiae dolore consequatur saepe nostrum deserunt! Quasi, expedita rerum. Eius modi nostrum, quod ipsum, corporis quas, provident iusto explicabo officia deleniti voluptates.

Let's do a section for images, embeds, multimedia, etc.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam repellat quasi temporibus. Labore quae, quo nulla aspernatur repellendus eligendi consectetur. Illo modi officiis incidunt similique harum alias reprehenderit tempora nesciunt.

Let's do a horizontal rule next. It's not an image, true, but it could be fun! Let's try it. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus, nisi vitae! Exercitationem ipsam assumenda sed placeat quis tempore dolorem voluptatibus quod sint, suscipit rem beatae magni fuga iste qui sunt.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non quam quisquam, optio ducimus maxime at voluptate. Cum magni repellat nobis, minus ut odio tempora? Vel sapiente repellat officia ullam reprehenderit!

A table

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, fuga! Voluptate inventore ratione quam aperiam exercitationem dolorum, voluptatibus sapiente odit? Soluta atque sapiente laboriosam rerum pariatur, a ullam facilis sint.