23 | This is the title of the article
24 | Here is a nav element with an ordered list to kick us off:
25 |
26 |
27 | Inline Text Formatting
28 |
29 | Block-Level Text Content
30 |
31 | Images & Embeds
32 | Tables
33 |
34 |
35 |
36 |
37 | § This is a
38 | secondary header. Here's where we'll talk about text stuff.
39 |
40 |
41 | A paragraph with a link in it. Lorem ipsum dolor sit
42 | amet consectetur adipisicing elit. Maxime asperiores qui modi porro
43 | iusto quibusdam aut sapiente quasi nemo possimus, cum pariatur saepe
44 | molestiae. Ad quia error excepturi quod explicabo!
45 |
46 |
47 | A paragraph with an abbreviation in it.
48 | FYI , lorem ipsum dolor sit
49 | amet consectetur adipisicing elit. Esse alias voluptatum omnis dolor
50 | laudantium tenetur autem natus consequuntur architecto amet qui,
51 | explicabo ea obcaecati ab optio molestiae, similique maiores sed?
52 |
53 | This is a tertiary header
54 | Let's talk about inline text semantics (h4 btw) .
55 |
56 | Here's a paragraph with a bunch of styling in it.
57 | This sentence is wrapped in a span tag.
58 | This sentence is wrapped in a code tag.
59 | This sentence is wrapped in an em tag.
60 | Let's do a strong tag next, wow!
61 | Here's an i tag at play; these are usually used for technical terms
63 | or taxonomical designations . If you've got a keyboard shortcut you're defining, you can use the
65 | kbd tag like so: ctrl + ⌘ + ⌥ . Here we have an example of
66 | some marked or highlighted text .
67 | Damn, HTML is sick (this is an inline-quote element, or q tag) .
68 | In addition to marking text, we can also strike it through ,
69 | using either the s tag, or the del tag. If we're
70 | using del, we can also use ins where appropriate to
71 | semantically indicate a change in content over time. If you're
72 | indicating a date or time, you can communicate that semantically with
73 | the time tag, for instance
74 | 8:00 January 30th, 2021 .
75 | Lastly, let's cover the use of superscript numerals, like
76 | 1 or 69 , and sub script numerals, like
77 | 420 or 666 inline. How we lookin' so far?
78 |
79 | This is a tertiary header
80 |
81 | Here is a sentence that defines the phrase
82 | this particular phrase — it uses a dfn
tag to
83 | indicate which phrase is being defined. Lorem ipsum dolor sit amet
84 | consectetur adipisicing elit. Magnam aut voluptas libero perferendis,
85 | repellendus rem eum quas corrupti sit magni? Non sapiente ex,
86 | voluptates eius libero consequuntur. Molestias, quas nesciunt.
87 |
88 |
89 |
90 |
91 | §
92 | An h2
about block-level text content
93 | (and has a side-comment that uses the small tag.)
94 |
95 |
96 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo, eum
97 | sed! Molestias excepturi ut consequatur debitis voluptate voluptas
98 | vitae, alias odio, sapiente dolorem fugiat voluptatum explicabo
99 | laudantium optio quibusdam architecto!
100 |
101 |
102 |
103 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque
104 | optio quas veniam explicabo rerum, architecto eaque molestias ea ab
105 | in debitis iure aliquid quia culpa ratione qui ad voluptate
106 | suscipit!
107 |
108 | All credit to the author
109 |
110 |
111 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus
112 | laudantium pariatur iste distinctio reiciendis repellat beatae vero
113 | nostrum quae atque, neque ab optio tenetur recusandae. Minima
114 | explicabo provident necessitatibus delectus?
115 |
116 | Another tertiary header
117 |
118 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem beatae
119 | cupiditate qui! Doloribus, magni. Ut iusto at, totam, odit ex ipsa
120 | quibusdam, voluptas exercitationem est sit explicabo a velit iste.
121 |
122 | A fourth-level heading before an address.
123 | Here is our contact information.
124 |
125 |
126 | You can contact us by email at
127 | webmaster@html.com , or by snail mail at:
128 |
129 |
130 | 14390 Air & Space Museum Pkwy
131 | Ste. 320
132 | Chantilly, VA 20151
133 | United States
134 |
135 |
136 |
137 | Heading level 5 to kick off an aside
138 |
139 | Here's an aside bit of content Lorem ipsum dolor sit amet
140 | consectetur adipisicing elit. Ad inventore deleniti accusamus,
141 | veritatis quaerat fugit facilis asperiores porro rem reprehenderit,
142 | consequatur optio aperiam ut hic voluptatem odit quibusdam omnis
143 | placeat.
144 |
145 |
146 |
147 | Another h5 because I need a place to put an h6 and I can't skip
148 | header-levels.
149 |
150 |
151 | Okay so this is a sixth-level header element but if we're being
152 | completely honest, why are you earnestly using an h6? This is tooooo
153 | small!
154 |
155 |
156 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus
157 | sapiente sint est ad quaerat. Eius at tempora sit magni repellendus
158 | laborum eaque quo numquam consequatur amet incidunt, iste vel placeat.
159 |
160 |
161 |
162 | On now to code samples and mathematics.
163 |
164 | A third-level header that comes right after a second-level header.
165 |
166 |
167 |
168 | Typically when representing a code sample, we use a combination of the
169 | <pre>
and <code>
tags. The code
170 | tag on its own represents inline code, short fragments of output like
171 | a variable name. When we need multiple lines, and to preserve
172 | indentation, we can use the pre
(or preformatted) tag,
173 | like so:
174 |
175 |
176 | <div class="wow">
177 | <p>This is a <pre> tag with a nested <code> tag, and some divs and paragraph tags inside.</p>
178 | </div>
179 |
180 |
181 | Slightly lesser-known than these, however, is the <samp> tag,
182 | which you can use to indicate some output from a computer (as opposed
183 | to input).
184 |
185 |
186 | $ error: pathspec 'feature/please-release-me-from-this-prison' did not
187 | match any file(s) known to git
188 |
189 |
190 | In mathematics and programming, it's often useful to define a variable
191 | — you can communicate this in HTML with the var tag, like I
192 | just did here.
193 |
194 |
195 |
196 | Lists, lists, lists!
197 |
198 | Here's a <dl> element. This is an h3
199 | btw .
200 |
201 |
202 | You can use the dl tag to represent a paired list of description terms
203 | (dt), and description definitions (dd).
204 |
205 |
206 | Country (dt tag)
207 |
208 | Norway (dd tag). Lorem ipsum, dolor sit amet consectetur adipisicing
209 | elit.
210 |
211 | Region
212 |
213 | Central Norway. Accusantium officiis, vitae expedita doloribus
214 | consectetur repudiandae magnam id.
215 |
216 | County
217 |
218 | Trøndelag. Eligendi veniam mollitia laborum aliquid error possimus,
219 | aliquam illo, minus nemo aspernatur veritatis?
220 |
221 | District
222 |
223 | Dovre. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
224 |
225 |
226 | Next, let's have an unordered list.
227 |
228 |
229 |
230 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo illo
231 | accusantium nihil dolor modi, sunt dolorum autem maiores
232 | architecto recusandae ipsum fugiat aliquam deleniti saepe nam ex,
233 | quisquam dicta rerum!
234 |
235 |
236 |
237 |
238 | Ab vitae a quaerat. Ducimus molestiae sunt eaque, neque iure
239 | saepe, velit quos eveniet ab assumenda nemo hic officia et commodi
240 | voluptatum excepturi quod voluptate dolorum, magnam omnis ea
241 | voluptatibus?
242 |
243 |
244 |
245 |
246 | Officia, dolorum amet sunt id consequuntur ipsa. Veritatis nulla
247 | et itaque expedita, accusantium quibusdam corporis dicta quasi
248 | molestiae consequuntur debitis! Eum pariatur culpa quo itaque
249 | inventore voluptate alias, consequuntur tempora?
250 |
251 |
252 |
253 |
254 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
255 | illum mollitia, tenetur pariatur a dignissimos ducimus quos fuga
256 | praesentium! Placeat delectus doloremque tenetur aliquam. Cum quod
257 | nulla maxime at ab!
258 |
259 |
260 |
261 |
262 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum
263 | reprehenderit corrupti aliquid, obcaecati modi nulla explicabo
264 | amet nostrum quisquam ad exercitationem, perferendis,
265 | consequuntur nihil porro asperiores rem nesciunt doloribus
266 | nobis!
267 |
268 |
269 |
270 |
271 | Dolore laboriosam numquam odio, molestias itaque vitae neque
272 | ullam aperiam enim facere magni a. Magni, nam quas, suscipit
273 | iure necessitatibus temporibus animi, nisi nemo nulla pariatur
274 | dignissimos molestias aspernatur sint!
275 |
276 |
277 |
278 |
279 |
280 |
281 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit
282 | consequatur cupiditate tempora sequi minima rerum quis vitae doloribus
283 | vel odit asperiores quam libero perspiciatis, praesentium qui in
284 | accusantium aliquam velit!
285 |
286 | And an ordered one.
287 |
288 |
289 |
290 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias
291 | quos explicabo, vel ad adipisci incidunt harum blanditiis tenetur
292 | ea, minima aliquid expedita dolorum, corrupti voluptates. Id
293 | cumque excepturi natus dicta!
294 |
295 |
296 |
297 |
298 | Illum sint quidem, incidunt dolorum veniam nisi delectus saepe
299 | architecto explicabo reprehenderit consequuntur in eum cum
300 | necessitatibus numquam quisquam. Repellat soluta alias deserunt
301 | sequi dolorum corrupti velit cumque? Modi, quas.
302 |
303 |
304 |
305 |
306 | Veniam at rerum quas repellendus, nobis repellat obcaecati
307 | doloremque, ducimus iusto, vero perferendis voluptatem. Laborum
308 | nesciunt hic deleniti vero nemo eius optio dolores quo repellendus
309 | doloribus. Amet eaque exercitationem quod.
310 |
311 |
312 |
313 | Now like a blitz of weirdo combinations of them.
314 |
315 |
316 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum vitae
317 | voluptates facere possimus magnam debitis quasi quas aliquid, vero
318 | incidunt consequuntur excepturi dolorum. Sapiente, iusto animi saepe
319 | illum eius vitae?
320 |
321 |
322 | Lorem ipsum dolor sit amet consectetur adipisicing elit.
323 | Distinctio necessitatibus, nesciunt quis dolor illo obcaecati
324 | maxime deleniti iure repellendus ratione rerum exercitationem
325 | quidem? Magnam commodi quibusdam vitae quia mollitia deserunt?
326 |
327 |
328 | Lorem ipsum dolor sit amet consectetur adipisicing elit.
329 | Aliquid praesentium iusto eveniet facere impedit, dolor
330 | necessitatibus suscipit eos minus labore assumenda obcaecati
331 | iure quibusdam possimus molestiae odio totam reiciendis?
332 | Unde!
333 |
334 |
335 |
336 |
337 | Aliquam architecto maxime sint neque ipsum recusandae facere nam
338 | minima? Esse praesentium nobis maxime odit quos? Sit, harum. Non
339 | praesentium id quia ut repudiandae quos nobis delectus dolore
340 | molestiae magni.
341 |
342 |
343 | Lorem ipsum, dolor sit amet consectetur adipisicing elit.
344 | Voluptates in harum sit qui sint, quis alias perspiciatis
345 | optio illo sed praesentium eum animi vero. Explicabo
346 | incidunt consequatur similique repellat eius!
347 |
348 |
349 | Quod vero facilis magni dolore odio ducimus nam, nostrum
350 | enim repudiandae neque minima voluptatum labore, provident,
351 | esse eveniet molestiae dolorem mollitia impedit rerum
352 | recusandae in? Voluptatum ipsam impedit voluptate beatae.
353 |
354 |
355 | Eos enim voluptatem dicta aliquid cumque quibusdam, et
356 | molestiae dolore consequatur saepe nostrum deserunt! Quasi,
357 | expedita rerum. Eius modi nostrum, quod ipsum, corporis
358 | quas, provident iusto explicabo officia deleniti voluptates.
359 |
360 |
361 |
362 |
363 |
364 |
365 |
366 |
367 |
368 | § Let's do a section
369 | for images, embeds, multimedia, etc.
370 |
371 |
372 |
373 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam
374 | repellat quasi temporibus. Labore quae, quo nulla aspernatur
375 | repellendus eligendi consectetur. Illo modi officiis incidunt
376 | similique harum alias reprehenderit tempora nesciunt.
377 |
378 |
379 |
380 |
381 | Maybe we do a little figure
with
382 | figcaption
? Lorem ipsum dolor sit, amet consectetur
383 | adipisicing elit. Quod delectus nam sed perferendis magnam dicta.
384 | Magni perferendis, accusamus qui cupiditate quidem nemo temporibus
385 | fugiat eveniet unde ab libero assumenda at.
386 |
387 |
388 |
389 | Let's do a horizontal rule next. It's not an image, true, but
390 | it could be fun! Let's try it. Lorem ipsum dolor sit amet consectetur,
391 | adipisicing elit. Necessitatibus, nisi vitae! Exercitationem ipsam
392 | assumenda sed placeat quis tempore dolorem voluptatibus quod sint,
393 | suscipit rem beatae magni fuga iste qui sunt.
394 |
395 |
396 |
397 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non quam
398 | quisquam, optio ducimus maxime at voluptate. Cum magni repellat nobis,
399 | minus ut odio tempora? Vel sapiente repellat officia ullam
400 | reprehenderit!
401 |
402 |
403 |
404 |
405 | § A table
406 |
407 |
408 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, fuga!
409 | Voluptate inventore ratione quam aperiam exercitationem dolorum,
410 | voluptatibus sapiente odit? Soluta atque sapiente laboriosam rerum
411 | pariatur, a ullam facilis sint.
412 |
413 |
414 |
415 |
416 | lorem
417 | ipsum
418 | lorem
419 | amet
420 | adipiscing
421 |
422 |
423 |
424 |
425 | consectetur
426 |
427 | Voluptate inventore ratione quam aperiam exercitationem dolorum,
428 | voluptatibus sapiente odit? Soluta atque sapiente laboriosam
429 | rerum pariatur, a ullam facilis sint.
430 |
431 |
432 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
433 | cupiditate laborum quasi, dolorem neque ab nulla reprehenderit
434 | doloribus unde iste aliquam est similique in modi animi
435 | repellendus eos error corporis?
436 |
437 | consequatur
438 | voluptate
439 |
440 |
441 | vitae
442 | alias odio
443 | sapiente
444 |
445 | Non quam quisquam, optio ducimus maxime at voluptate. Cum magni
446 | repellat nobis, minus ut odio tempora? Vel sapiente repellat
447 | officia ullam reprehenderit!
448 |
449 | explicabo
450 |
451 |
452 | lorem
453 | optio
454 | quibusdam
455 |
456 | Voluptate inventore ratione quam aperiam exercitationem dolorum,
457 | voluptatibus sapiente odit? Soluta atque sapiente laboriosam
458 | rerum pariatur, a ullam facilis sint.
459 |
460 |
461 | Non quam quisquam, optio ducimus maxime at voluptate. Cum magni
462 | repellat nobis, minus ut odio tempora? Vel sapiente repellat
463 | officia ullam reprehenderit!
464 |
465 |
466 |
467 |
468 |
469 |
470 |
471 |
472 |
--------------------------------------------------------------------------------