In this article, we'll explore the most common Vim key bindings that will help you navigate your text editor seamlessly.

Table of Content

• Vim Modes
• How to Navigate using Vim Key Bindings
• How to Edit Text in Normal Mode
• Insert Mode
• Visual Mode
• More Navigation Commands
• Programming Specific Key Bindings
• Conclusion

Vim Modes

Vim operates in distinct modes, each designed for specific tasks:

• Normal Mode: Default state for efficient movement, deletion, searching, and more.
• Insert Mode: Allows you to type text directly into your file.
• Visual Mode: Enables text selection for manipulation.

How to Navigate using Vim Key Bindings

Basic Movement

Here are some basic movement keys:

h  --> move left
j  --> move down
k  --> move up
l  --> move right

Moving to Top and Bottom

You can use these keys to move to the top or bottom of the page:

gg  --> Move to the first line of the page
G   --> Move to the last line of the page

Moving to a Specific Line

You can move to a specific using : followed by the line number:

:number   --> Go to the line number

Moving Within a Line

You can use these keys move to the start or end of a line:

$  --> Go to the end of the line
0  --> Go to the start of the line

Moving Through Words

Here are some keys for moving through lines of text:

b  --> Go to the previous word
w  --> Go to the next word

How to Edit Text in Normal Mode

Deletion and Copying

You can delete or copy characters using these keys:

x   --> Delete the character under the cursor
dd  --> Delete the entire line
yy  --> Copy (yank) the entire line
p   --> Paste the previously deleted or copied text after the cursor

Undo and Redo

u          --> Undo the last action
Ctrl + r   --> Redo the undone action

Searching and Replacing

/              --> Start searching forward
?              --> Start searching backward
:s/old/new/g   --> Replace all occurrences of "old" with "new" in the entire file

Insert Mode

In Insert mode, you can type text directly into your file. Here are some key bindings to help you navigate in this mode:

Esc   --> Return to Normal Mode
i     --> Start inserting text before the cursor
a     --> Start inserting text after the cursor
o     --> Open a new line below the current line and start inserting text

Visual Mode

Visual mode is useful for selecting and manipulating text visually. Here are some key bindings:

v          --> Start character-wise visual mode
V          --> Start line-wise visual mode
Ctrl + v   --> Start block-wise visual mode
d          --> Delete the selected text
y          --> Copy (yank) the selected text
p          --> Paste the copied text after the cursor

More Navigation Commands

Scrolling

Ctrl + u   --> Move half a screen up
Ctrl + d   --> Move half a screen down
Ctrl + b   --> Move one full screen up
Ctrl + f   --> Move one full screen down

Jumping between Words and Paragraphs

(  --> Jump to the beginning of the previous sentence
)  --> Jump to the beginning of the next sentence
{  --> Jump to the beginning of the previous paragraph
}  --> Jump to the beginning of the next paragraph

These commands provide a comprehensive overview of the essential Vim key bindings for efficient navigation and text manipulation.

Programming-Specific Vim Key Bindings

Moving Between Functions

In a code file, navigating between functions is a common task. Vim makes it efficient with these keys:

]]  --> Move to the beginning of the next function
[[  --> Move to the beginning of the previous function

These commands are invaluable for quickly jumping between different parts of your code.

Indentation

Maintaining consistent code indentation is crucial. Vim enhances this with these keys:

>>  --> Indent the current line to the right
<<  --> Indent the current line to the left

Effortlessly adjust the indentation to adhere to coding standards and improve code readability.

Folding

Code folding aids in managing large files. Vim provides powerful folding commands:

zf{motion}  --> Create a fold (replace {motion} with a movement command)
zo          --> Open a fold
zc          --> Close a fold
zr          --> Reduce folding level throughout the file
zm          --> Increase folding level throughout the file

Use folding to collapse and expand sections, this makes it easier to focus on specific parts of your code.

Code Commenting

Efficiently comment and uncomment code with:

gcc  --> Comment/uncomment the current line
gc{motion}  --> Comment/uncomment the lines covered by {motion}

Speed up the commenting process and maintain code documentation effortlessly.

Matching Parentheses

Effortlessly navigate and understand code structure with:

%  --> Move to the matching parenthesis, bracket, or brace

This makes it easier to navigate complex code by quickly jumping between corresponding code blocks.

Conclusion

In essence, mastering Vim key bindings unlocks a world of efficient text editing. From basic movements to advanced coding tasks, Vim's modes and commands streamline navigation and manipulation.

By embracing these key bindings, you'll enhance productivity and enjoy a more seamless editing experience. Happy coding in Vim!

If you have any feedback, then you can DM me on Twitter or LinkedIn.

You can use this article as a reference guide whether you're a beginner or experienced developer.

What Makes Up an HTML Document?

The following tags define the basic HTML document structure:

• <html> tag – This tag acts as a container for every other element in the document except the <!DOCTYPE _html_> tag.
• <head> tag– Includes all the document's metadata.
• <title> tag – Defines the title of the document which is displayed in the browser's title bar.
• <body> tag – Acts as a container for the document's content that gets displayed on the browser.

Here's what all that looks like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> My HTML Cheat Sheet </title>
  </head>
  <body></body>
</html>

<!DOCTYPE _html_> specifies that we are working with an HTML5 document.

The following tags give additional information to the HTML document:

• <meta> tag – This tag can be used to define additional information about the webpage.
• <link> tag – Used to link the document to an external resource.
• <style> tag – Used for defining styles for the document.
• <script> tag – Used to write code snippets (usually JavaScript) or to link the document to an external script.

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>My HTML Cheat Sheet</title>

    <style>
      * {
        font-size: 100px;
      }
    </style>

    <script>
      alert('This is an alert');
    </script>
 </head>

HTML Document Structure

When you're fleshing out your HTML document, you'll use certain tags to create the structure.

The <h1> to <h6> tags show different levels of headings in a document, with

being the largest and

being the smallest.

<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>

You use the <p> tag to create a paragraph.

<p> This is a paragraph </p>

The <div> tag can be used to divide and style separate sections of the document. It also acts as a parent container for other elements. Here's how it works:

<div class="newsSection">
  <h1> This is the news section </h1>
  <p> Welcome to the news section! </p>
</div>

<div class="contactSection">
  <h1> This is the contact us section </h1>
  <p> Hello world! </p>
</div>

We also have the <span> tag. This is similar to <div> but you use it as an inline container.

<p> I love <span class="keyword"> coding! </span></p>

There's the <br/> tag, which we use for creating line breaks. This has no closing tag.

<p> I love <br/> freeCodeCamp </p>

The <hr/> tag is used to create a horizontal line. It also has no closing tag.

Images in HTML

In HTML, we use the <img/> tag to display images.

Here are some attributes of the <img/> tag:

• src is used to specify the path to the location of the image on your computer or the web.
• alt defines an alternate text that displays if the image cannot be rendered. The alt text is also good for screen readers.
• height specifies the height of the image.
• width specifies the width of the image.
• border specifies the thickness of the borders, which is set to 0 if no border is added.

<img src="ihechikara.png" alt="a picture of Ihechikara" width="300" height="300">

Text Formatting in HTML

We have many ways to format text in HTML. Let's go over them now briefly.

• <i> displays text in italics.
• <b> displays text in bold.
• <strong> displays text in bold. Used to make important emphasis.
• <em> another emphasis tag that displays text in italics.
• <sub> defines subscript text, like the two atoms of oxygen in CO₂.
• <sup> defines a superscript like the power of a number, 10².
• <small> reduces the size of text.
• <del> defines deleted text by striking a line through the text.
• <ins> defines inserted text which is usually underlined.
• <blockquote> is used to enclose a section of text quoted from another source.
• <q> is used for shorter inline quotes.
• <cite> is used for citing the author of a quote.
• <address> is used for showing the author's contact information.
• <abbr> denotes an abbreviation.
• <code> displays code snippets.
• <mark> highlights text.

<p><i> italic text </i></p>
<p><b>bold text </b></p>
<p><strong> strong text </strong></p>
<p><em> strong text </em></p>
<p><sub> subscripted text </sub></p>
<p><sup> superscripted text </sup></p>
<p><small> small text </small></p>
<p><del> deleted text </del></p>
<p><ins> inserted text </ins></p>
<p><blockquote> quoted text </blockquote></p>
<p><q> short quoted text </q></p>
<p><cite> cited text </cite></p>
<p><address> address </address></p>
<p><abbr> inserted text </abbr></p>
<p><code> code snippet </code></p>
<p><mark> marked text </mark></p>

Links

The <a> tag, also known as the anchor tag, is used to define hyperlinks that link to other pages (external web pages included) or to a section of the same page.

Here are some attributes of the <a> tag:

• href specifies the URL the link takes the user to when clicked.
• download specifies that the target or resource clicked is downloadable.
• target specifies where the link is to be opened. This could be in the same or separate window.

<a href="https://www.freecodecamp.org/" target="_blank"> Learn to code </a>

Lists

The <ol> tag defines an ordered list while the <ul> tag defines an unordered list.

The <li> tag is used to create items in the list.

<!-- Unordered list -->
<ul>
  <li> HTML </li>
  <li> CSS </li>
  <li> JavaScrip t</li>
</ul>

<!-- Ordered list -->
<ol>
  <li> HTML </li>
  <li> CSS </li>
  <li> JavaScript </li>
</ol>

Forms

The <form> tag is used to create a form in HTML. Forms are used to get user inputs. Here are some attributes associated with the <form> element:

• action specifies where the form information goes when submitted.
• target specifies where to display the form's response.
• autocomplete can have a value of on or off.
• novalidate specifies that the form should not be validated.
• method specifies the HTTP method used when sending form data.
• name specifies the name of the form.
• required specifies that an input element cannot be left empty.
• autofocus gives focus to the input elements when the page loads.
• disabled disables an input element so the user can longer interact with it.
• placeholder is used to give users a hint on what information is required for an input element.

Here are other input elements associated with forms:

• <textarea> for getting user text input with multiple lines.
• <select> specifies a list of options the user can choose from.
• <option> creates an option under the select element.
• <input> specifies an input field where the user can enter data. This has a type attribute that specifies what type of data the user can input.
• <button> creates a button.

<form action="/info_url/" method="post">

    <label for="firstName"> First name: </label>
    <input type="text" 
           name="firstName" 
           placeholder="first name" 
           required
    >

    <label for="lastName"> Last name: </label>
    <input type="text" 
           name="lastName" 
           placeholder="last name" 
           required
    >

    <label for="bio"> Bio: </label>
    <textarea name="bio"></textarea>

    <select id="age">
      <option value="15-18">15-18</option>
      <option value="19-25">19-25</option>
      <option value="26-30">26-30</option>
      <option value="31-36">31-36</option>
    </select>

    <input type="submit" value="Submit">

  </form>

Tables

• The <table> tag defines a HTML table.
• <thead> specifies information for each column in a table.
• <tbody> specifies the body or content of the table.
• <tfoot> specifies the footer information of the table.
• <tr> denotes a row in the table.
• <td> denotes a single cell in the table.
• <th> denotes the value column's heading.

<table>

  <thead>
    <tr>
      <th> Course </th>
      <th> Progress </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td> HTML </td>
      <td> 90% </td>
    </tr>
    <tr>
      <td> CSS </td>
      <td> 80% </td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td> JavaScript </td>
      <td> 95% </td>
    </tr>
  </tfoot>

</table>

Tags introduced in HTML5

Here are some tags introduced in HTML5:

• <header> specifies the webpage header
• <footer> specifies the webpage footer.
• <main> specifies a main content section.
• <article> specifies an article's section, usually for content that can stand alone on the webpage.
• <section> is used to create separate sections.
• <aside> is usually used to when placing items in a sidebar.
• <time> is used for formatting date and time.
• <figure> is used for figures like charts.
• <figcaption> denotes a description of a figure.
• <nav> is used to nest navigation links.
• <meter> is used to measure data within a range.
• <progress> is used as a progress bar.
• <dialog> is used to create a dialog box.
• <audio> is used to embed an audio file in the web page.
• <video> is used to embed video.

  <header>
    <h1> Welcome </h1>
    <h3> Hello World! </h3>
  </header>

  <nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About us</a></li>
    </ul>
  </nav>

  <article>

    <h1> An article about us </h1> 
    <p> Article content </p>

    <aside>
      <p> It's sunny today </p>
    </aside>

  </article>

  Progress: <progress min="0" max="100" value="50"> </progress>

  <footer> Copyright 2022-2099. All Rights Reserved. </footer>

Conclusion

In this article, we have seen a lot of HTML tags, elements, and attributes commonly used by developers. This is not all there is, but should serve as a good reference resource.

I hope you found this helpful. Thank you for reading.

I assembled this list for my own uses as a programmer, and wanted to share it with you.

Before I show you the list, here's how to generate a list of prime numbers of your own using a few popular languages.

How to Create a List of Primes Using the Sieve of Eratosthenes

An illustration of how the Sieve of Eratosthenes Works step-by-step. Image credit: Wikipedia.

Here is JavaScript code to generate a list of an arbitrarily large number of prime numbers.

Because this is JavaScript, you can even open up your browser's JavaScript console and run this code for yourself.

function getPrimes(max) {
    var sieve = [];
    var i;
    var j;
    var primes = [];
    for (i = 2; i <= max; ++i) {
        if (!sieve[i]) {
            primes.push(i);
            for (j = i << 1; j <= max; j += i) {
                sieve[j] = true;
            }
        }
    }
    return primes;
}
getPrimes(1000);

Full Prime Number List up to 20,000

Here is the full list of primes. Note that I've intentionally left out commas, so programmers won't have to remove them before copy-pasting them into their code.

2
3
5
7
11
13
17
19
23
29
31
37
41
43
47
53
59
61
67
71
73
79
83
89
97
101
103
107
109
113
127
131
137
139
149
151
157
163
167
173
179
181
191
193
197
199
211
223
227
229
233
239
241
251
257
263
269
271
277
281
283
293
307
311
313
317
331
337
347
349
353
359
367
373
379
383
389
397
401
409
419
421
431
433
439
443
449
457
461
463
467
479
487
491
499
503
509
521
523
541
547
557
563
569
571
577
587
593
599
601
607
613
617
619
631
641
643
647
653
659
661
673
677
683
691
701
709
719
727
733
739
743
751
757
761
769
773
787
797
809
811
821
823
827
829
839
853
857
859
863
877
881
883
887
907
911
919
929
937
941
947
953
967
971
977
983
991
997
1009
1013
1019
1021
1031
1033
1039
1049
1051
1061
1063
1069
1087
1091
1093
1097
1103
1109
1117
1123
1129
1151
1153
1163
1171
1181
1187
1193
1201
1213
1217
1223
1229
1231
1237
1249
1259
1277
1279
1283
1289
1291
1297
1301
1303
1307
1319
1321
1327
1361
1367
1373
1381
1399
1409
1423
1427
1429
1433
1439
1447
1451
1453
1459
1471
1481
1483
1487
1489
1493
1499
1511
1523
1531
1543
1549
1553
1559
1567
1571
1579
1583
1597
1601
1607
1609
1613
1619
1621
1627
1637
1657
1663
1667
1669
1693
1697
1699
1709
1721
1723
1733
1741
1747
1753
1759
1777
1783
1787
1789
1801
1811
1823
1831
1847
1861
1867
1871
1873
1877
1879
1889
1901
1907
1913
1931
1933
1949
1951
1973
1979
1987
1993
1997
1999
2003
2011
2017
2027
2029
2039
2053
2063
2069
2081
2083
2087
2089
2099
2111
2113
2129
2131
2137
2141
2143
2153
2161
2179
2203
2207
2213
2221
2237
2239
2243
2251
2267
2269
2273
2281
2287
2293
2297
2309
2311
2333
2339
2341
2347
2351
2357
2371
2377
2381
2383
2389
2393
2399
2411
2417
2423
2437
2441
2447
2459
2467
2473
2477
2503
2521
2531
2539
2543
2549
2551
2557
2579
2591
2593
2609
2617
2621
2633
2647
2657
2659
2663
2671
2677
2683
2687
2689
2693
2699
2707
2711
2713
2719
2729
2731
2741
2749
2753
2767
2777
2789
2791
2797
2801
2803
2819
2833
2837
2843
2851
2857
2861
2879
2887
2897
2903
2909
2917
2927
2939
2953
2957
2963
2969
2971
2999
3001
3011
3019
3023
3037
3041
3049
3061
3067
3079
3083
3089
3109
3119
3121
3137
3163
3167
3169
3181
3187
3191
3203
3209
3217
3221
3229
3251
3253
3257
3259
3271
3299
3301
3307
3313
3319
3323
3329
3331
3343
3347
3359
3361
3371
3373
3389
3391
3407
3413
3433
3449
3457
3461
3463
3467
3469
3491
3499
3511
3517
3527
3529
3533
3539
3541
3547
3557
3559
3571
3581
3583
3593
3607
3613
3617
3623
3631
3637
3643
3659
3671
3673
3677
3691
3697
3701
3709
3719
3727
3733
3739
3761
3767
3769
3779
3793
3797
3803
3821
3823
3833
3847
3851
3853
3863
3877
3881
3889
3907
3911
3917
3919
3923
3929
3931
3943
3947
3967
3989
4001
4003
4007
4013
4019
4021
4027
4049
4051
4057
4073
4079
4091
4093
4099
4111
4127
4129
4133
4139
4153
4157
4159
4177
4201
4211
4217
4219
4229
4231
4241
4243
4253
4259
4261
4271
4273
4283
4289
4297
4327
4337
4339
4349
4357
4363
4373
4391
4397
4409
4421
4423
4441
4447
4451
4457
4463
4481
4483
4493
4507
4513
4517
4519
4523
4547
4549
4561
4567
4583
4591
4597
4603
4621
4637
4639
4643
4649
4651
4657
4663
4673
4679
4691
4703
4721
4723
4729
4733
4751
4759
4783
4787
4789
4793
4799
4801
4813
4817
4831
4861
4871
4877
4889
4903
4909
4919
4931
4933
4937
4943
4951
4957
4967
4969
4973
4987
4993
4999
5003
5009
5011
5021
5023
5039
5051
5059
5077
5081
5087
5099
5101
5107
5113
5119
5147
5153
5167
5171
5179
5189
5197
5209
5227
5231
5233
5237
5261
5273
5279
5281
5297
5303
5309
5323
5333
5347
5351
5381
5387
5393
5399
5407
5413
5417
5419
5431
5437
5441
5443
5449
5471
5477
5479
5483
5501
5503
5507
5519
5521
5527
5531
5557
5563
5569
5573
5581
5591
5623
5639
5641
5647
5651
5653
5657
5659
5669
5683
5689
5693
5701
5711
5717
5737
5741
5743
5749
5779
5783
5791
5801
5807
5813
5821
5827
5839
5843
5849
5851
5857
5861
5867
5869
5879
5881
5897
5903
5923
5927
5939
5953
5981
5987
6007
6011
6029
6037
6043
6047
6053
6067
6073
6079
6089
6091
6101
6113
6121
6131
6133
6143
6151
6163
6173
6197
6199
6203
6211
6217
6221
6229
6247
6257
6263
6269
6271
6277
6287
6299
6301
6311
6317
6323
6329
6337
6343
6353
6359
6361
6367
6373
6379
6389
6397
6421
6427
6449
6451
6469
6473
6481
6491
6521
6529
6547
6551
6553
6563
6569
6571
6577
6581
6599
6607
6619
6637
6653
6659
6661
6673
6679
6689
6691
6701
6703
6709
6719
6733
6737
6761
6763
6779
6781
6791
6793
6803
6823
6827
6829
6833
6841
6857
6863
6869
6871
6883
6899
6907
6911
6917
6947
6949
6959
6961
6967
6971
6977
6983
6991
6997
7001
7013
7019
7027
7039
7043
7057
7069
7079
7103
7109
7121
7127
7129
7151
7159
7177
7187
7193
7207
7211
7213
7219
7229
7237
7243
7247
7253
7283
7297
7307
7309
7321
7331
7333
7349
7351
7369
7393
7411
7417
7433
7451
7457
7459
7477
7481
7487
7489
7499
7507
7517
7523
7529
7537
7541
7547
7549
7559
7561
7573
7577
7583
7589
7591
7603
7607
7621
7639
7643
7649
7669
7673
7681
7687
7691
7699
7703
7717
7723
7727
7741
7753
7757
7759
7789
7793
7817
7823
7829
7841
7853
7867
7873
7877
7879
7883
7901
7907
7919
7927
7933
7937
7949
7951
7963
7993
8009
8011
8017
8039
8053
8059
8069
8081
8087
8089
8093
8101
8111
8117
8123
8147
8161
8167
8171
8179
8191
8209
8219
8221
8231
8233
8237
8243
8263
8269
8273
8287
8291
8293
8297
8311
8317
8329
8353
8363
8369
8377
8387
8389
8419
8423
8429
8431
8443
8447
8461
8467
8501
8513
8521
8527
8537
8539
8543
8563
8573
8581
8597
8599
8609
8623
8627
8629
8641
8647
8663
8669
8677
8681
8689
8693
8699
8707
8713
8719
8731
8737
8741
8747
8753
8761
8779
8783
8803
8807
8819
8821
8831
8837
8839
8849
8861
8863
8867
8887
8893
8923
8929
8933
8941
8951
8963
8969
8971
8999
9001
9007
9011
9013
9029
9041
9043
9049
9059
9067
9091
9103
9109
9127
9133
9137
9151
9157
9161
9173
9181
9187
9199
9203
9209
9221
9227
9239
9241
9257
9277
9281
9283
9293
9311
9319
9323
9337
9341
9343
9349
9371
9377
9391
9397
9403
9413
9419
9421
9431
9433
9437
9439
9461
9463
9467
9473
9479
9491
9497
9511
9521
9533
9539
9547
9551
9587
9601
9613
9619
9623
9629
9631
9643
9649
9661
9677
9679
9689
9697
9719
9721
9733
9739
9743
9749
9767
9769
9781
9787
9791
9803
9811
9817
9829
9833
9839
9851
9857
9859
9871
9883
9887
9901
9907
9923
9929
9931
9941
9949
9967
9973
10007
10009
10037
10039
10061
10067
10069
10079
10091
10093
10099
10103
10111
10133
10139
10141
10151
10159
10163
10169
10177
10181
10193
10211
10223
10243
10247
10253
10259
10267
10271
10273
10289
10301
10303
10313
10321
10331
10333
10337
10343
10357
10369
10391
10399
10427
10429
10433
10453
10457
10459
10463
10477
10487
10499
10501
10513
10529
10531
10559
10567
10589
10597
10601
10607
10613
10627
10631
10639
10651
10657
10663
10667
10687
10691
10709
10711
10723
10729
10733
10739
10753
10771
10781
10789
10799
10831
10837
10847
10853
10859
10861
10867
10883
10889
10891
10903
10909
10937
10939
10949
10957
10973
10979
10987
10993
11003
11027
11047
11057
11059
11069
11071
11083
11087
11093
11113
11117
11119
11131
11149
11159
11161
11171
11173
11177
11197
11213
11239
11243
11251
11257
11261
11273
11279
11287
11299
11311
11317
11321
11329
11351
11353
11369
11383
11393
11399
11411
11423
11437
11443
11447
11467
11471
11483
11489
11491
11497
11503
11519
11527
11549
11551
11579
11587
11593
11597
11617
11621
11633
11657
11677
11681
11689
11699
11701
11717
11719
11731
11743
11777
11779
11783
11789
11801
11807
11813
11821
11827
11831
11833
11839
11863
11867
11887
11897
11903
11909
11923
11927
11933
11939
11941
11953
11959
11969
11971
11981
11987
12007
12011
12037
12041
12043
12049
12071
12073
12097
12101
12107
12109
12113
12119
12143
12149
12157
12161
12163
12197
12203
12211
12227
12239
12241
12251
12253
12263
12269
12277
12281
12289
12301
12323
12329
12343
12347
12373
12377
12379
12391
12401
12409
12413
12421
12433
12437
12451
12457
12473
12479
12487
12491
12497
12503
12511
12517
12527
12539
12541
12547
12553
12569
12577
12583
12589
12601
12611
12613
12619
12637
12641
12647
12653
12659
12671
12689
12697
12703
12713
12721
12739
12743
12757
12763
12781
12791
12799
12809
12821
12823
12829
12841
12853
12889
12893
12899
12907
12911
12917
12919
12923
12941
12953
12959
12967
12973
12979
12983
13001
13003
13007
13009
13033
13037
13043
13049
13063
13093
13099
13103
13109
13121
13127
13147
13151
13159
13163
13171
13177
13183
13187
13217
13219
13229
13241
13249
13259
13267
13291
13297
13309
13313
13327
13331
13337
13339
13367
13381
13397
13399
13411
13417
13421
13441
13451
13457
13463
13469
13477
13487
13499
13513
13523
13537
13553
13567
13577
13591
13597
13613
13619
13627
13633
13649
13669
13679
13681
13687
13691
13693
13697
13709
13711
13721
13723
13729
13751
13757
13759
13763
13781
13789
13799
13807
13829
13831
13841
13859
13873
13877
13879
13883
13901
13903
13907
13913
13921
13931
13933
13963
13967
13997
13999
14009
14011
14029
14033
14051
14057
14071
14081
14083
14087
14107
14143
14149
14153
14159
14173
14177
14197
14207
14221
14243
14249
14251
14281
14293
14303
14321
14323
14327
14341
14347
14369
14387
14389
14401
14407
14411
14419
14423
14431
14437
14447
14449
14461
14479
14489
14503
14519
14533
14537
14543
14549
14551
14557
14561
14563
14591
14593
14621
14627
14629
14633
14639
14653
14657
14669
14683
14699
14713
14717
14723
14731
14737
14741
14747
14753
14759
14767
14771
14779
14783
14797
14813
14821
14827
14831
14843
14851
14867
14869
14879
14887
14891
14897
14923
14929
14939
14947
14951
14957
14969
14983
15013
15017
15031
15053
15061
15073
15077
15083
15091
15101
15107
15121
15131
15137
15139
15149
15161
15173
15187
15193
15199
15217
15227
15233
15241
15259
15263
15269
15271
15277
15287
15289
15299
15307
15313
15319
15329
15331
15349
15359
15361
15373
15377
15383
15391
15401
15413
15427
15439
15443
15451
15461
15467
15473
15493
15497
15511
15527
15541
15551
15559
15569
15581
15583
15601
15607
15619
15629
15641
15643
15647
15649
15661
15667
15671
15679
15683
15727
15731
15733
15737
15739
15749
15761
15767
15773
15787
15791
15797
15803
15809
15817
15823
15859
15877
15881
15887
15889
15901
15907
15913
15919
15923
15937
15959
15971
15973
15991
16001
16007
16033
16057
16061
16063
16067
16069
16073
16087
16091
16097
16103
16111
16127
16139
16141
16183
16187
16189
16193
16217
16223
16229
16231
16249
16253
16267
16273
16301
16319
16333
16339
16349
16361
16363
16369
16381
16411
16417
16421
16427
16433
16447
16451
16453
16477
16481
16487
16493
16519
16529
16547
16553
16561
16567
16573
16603
16607
16619
16631
16633
16649
16651
16657
16661
16673
16691
16693
16699
16703
16729
16741
16747
16759
16763
16787
16811
16823
16829
16831
16843
16871
16879
16883
16889
16901
16903
16921
16927
16931
16937
16943
16963
16979
16981
16987
16993
17011
17021
17027
17029
17033
17041
17047
17053
17077
17093
17099
17107
17117
17123
17137
17159
17167
17183
17189
17191
17203
17207
17209
17231
17239
17257
17291
17293
17299
17317
17321
17327
17333
17341
17351
17359
17377
17383
17387
17389
17393
17401
17417
17419
17431
17443
17449
17467
17471
17477
17483
17489
17491
17497
17509
17519
17539
17551
17569
17573
17579
17581
17597
17599
17609
17623
17627
17657
17659
17669
17681
17683
17707
17713
17729
17737
17747
17749
17761
17783
17789
17791
17807
17827
17837
17839
17851
17863
17881
17891
17903
17909
17911
17921
17923
17929
17939
17957
17959
17971
17977
17981
17987
17989
18013
18041
18043
18047
18049
18059
18061
18077
18089
18097
18119
18121
18127
18131
18133
18143
18149
18169
18181
18191
18199
18211
18217
18223
18229
18233
18251
18253
18257
18269
18287
18289
18301
18307
18311
18313
18329
18341
18353
18367
18371
18379
18397
18401
18413
18427
18433
18439
18443
18451
18457
18461
18481
18493
18503
18517
18521
18523
18539
18541
18553
18583
18587
18593
18617
18637
18661
18671
18679
18691
18701
18713
18719
18731
18743
18749
18757
18773
18787
18793
18797
18803
18839
18859
18869
18899
18911
18913
18917
18919
18947
18959
18973
18979
19001
19009
19013
19031
19037
19051
19069
19073
19079
19081
19087
19121
19139
19141
19157
19163
19181
19183
19207
19211
19213
19219
19231
19237
19249
19259
19267
19273
19289
19301
19309
19319
19333
19373
19379
19381
19387
19391
19403
19417
19421
19423
19427
19429
19433
19441
19447
19457
19463
19469
19471
19477
19483
19489
19501
19507
19531
19541
19543
19553
19559
19571
19577
19583
19597
19603
19609
19661
19681
19687
19697
19699
19709
19717
19727
19739
19751
19753
19759
19763
19777
19793
19801
19813
19819
19841
19843
19853
19861
19867
19889
19891
19913
19919
19927
19937
19949
19961
19963
19973
19979
19991
19993
19997

These HTML Entities are particularly helpful for, say, manually inserting whitespace into your HTML.

Each of these codes starts with an ampersand and ends with a semicolon.

You can use these anywhere in your HTML to reliably create that character. It should render the same regardless of which language your users' browsers are set to.

Some of symbols these have easier-to-remember codes. For example, the Euro currency character (€) is €

Where possible, I've used these easier-to-remember codes instead of their numeric codes.

How to Use the   whitespace character code

For example, if you wanted to insert a whitespace character, you could do something like this:

<span>Superpower:&nbsp;listening</span>

You can even insert several of these in a row to create make-shift text padding:

<span>Superpower:&nbsp;&nbsp;&nbsp;listening</span>

How to Make a Newline in HMTL using the newline character code

If you wanted to force a newline:

<p>This is paragraph text and &#13; woops there is a new line.</p>

And yes, you can use several of these back-to-back, too:

<p>This is paragraph text and &#13;&#13;&#13; woops there are several new lines.</p>

A Full List of Commonly-Used HTML Entity Character Codes

Below is a nice ASCII-formatted table of the most commonly-used symbols and characters. It took me a while to assemble all of these get them looking good.

As a developer, when I search for these codes I often get results that are image-based. These are inaccessible to people with visual disabilities, and make it hard for everyone to copy-paste the codes.

So if you find this helpful, please link to it and share it with your friends so more people can benefit from it. ?

+----------+--------+-----------------------------+
|  &code   | symbol |         description         |
+----------+--------+-----------------------------+
| !    | !      | exclamation point           |
| "    | "      | double quotation mark       |
| #    | #      | hash symbol (octothorpe)    |
| $    | $      | dollar sign                 |
| %    | %      | percentate sign             |
| &    | &      | ampersand                   |
| '    | '      | apostrophe                  |
| (    | (      | left parenthesis            |
| )    | )      | right parenthesis           |
| *    | *      | asterisk                    |
| +    | +      | plus sign                   |
| ,    | ,      | comma                       |
| -    | -      | hyphen                      |
| .    | .      | period                      |
| /    | /      | forward slash               |
| 0    | 0      | the number 0                |
| 1    | 1      | the number 1                |
| 2    | 2      | the number 2                |
| 3    | 3      | the number 3                |
| 4    | 4      | the number 4                |
| 5    | 5      | the number 5                |
| 6    | 6      | the number 6                |
| 7    | 7      | the number 7                |
| 8    | 8      | the number 8                |
| 9    | 9      | the number 9                |
| :    | :      | colon                       |
| &#59;    | ;      | semicolon                   |
| &#60;    | <      | less-than symbol            |
| &#61;    | =      | equals symbol               |
| &#62;    | >      | greater-than symbol         |
| &#63;    | ?      | question mark               |
| &#64;    | @      | at symbol                   |
| &#65;    | A      | uppercase A                 |
| &#66;    | B      | uppercase B                 |
| &#67;    | C      | uppercase C                 |
| &#68;    | D      | uppercase D                 |
| &#69;    | E      | uppercase E                 |
| &#70;    | F      | uppercase F                 |
| &#71;    | G      | uppercase G                 |
| &#72;    | H      | uppercase H                 |
| &#73;    | I      | uppercase I                 |
| &#74;    | J      | uppercase J                 |
| &#75;    | K      | uppercase K                 |
| &#76;    | L      | uppercase L                 |
| &#77;    | M      | uppercase M                 |
| &#78;    | N      | uppercase N                 |
| &#79;    | O      | uppercase O                 |
| &#80;    | P      | uppercase P                 |
| &#81;    | Q      | uppercase Q                 |
| &#82;    | R      | uppercase R                 |
| &#83;    | S      | uppercase S                 |
| &#84;    | T      | uppercase T                 |
| &#85;    | U      | uppercase U                 |
| &#86;    | V      | uppercase V                 |
| &#87;    | W      | uppercase W                 |
| &#88;    | X      | uppercase X                 |
| &#89;    | Y      | uppercase Y                 |
| &#90;    | Z      | uppercase Z                 |
| &#91;    | [      | left square bracket         |
| &#92;    | \      | backslash                   |
| &#93;    | ]      | right square bracket        |
| &#94;    | ^      | caret                       |
| &#95;    | _      | underscore                  |
| &#96;    | `      | backtick                    |
| &#97;    | a      | lowercase a                 |
| &#98;    | b      | lowercase b                 |
| &#99;    | c      | lowercase c                 |
| &#100;   | d      | lowercase d                 |
| &#101;   | e      | lowercase e                 |
| &#102;   | f      | lowercase f                 |
| &#103;   | g      | lowercase g                 |
| &#104;   | h      | lowercase h                 |
| &#105;   | i      | lowercase i                 |
| &#106;   | j      | lowercase j                 |
| &#107;   | k      | lowercase k                 |
| &#108;   | l      | lowercase l                 |
| &#109;   | m      | lowercase m                 |
| &#110;   | n      | lowercase n                 |
| &#111;   | o      | lowercase o                 |
| &#112;   | p      | lowercase p                 |
| &#113;   | q      | lowercase q                 |
| &#114;   | r      | lowercase r                 |
| &#115;   | s      | lowercase s                 |
| &#116;   | t      | lowercase t                 |
| &#117;   | u      | lowercase u                 |
| &#118;   | v      | lowercase v                 |
| &#119;   | w      | lowercase w                 |
| &#120;   | x      | lowercase x                 |
| &#121;   | y      | lowercase y                 |
| &#122;   | z      | lowercase z                 |
| &#123;   | {      | left curly brace            |
| &#124;   | |      | vertical bar                |
| &#125;   | }      | right curly brace           |
| &#126;   | ~      | tilde                       |
| &larr;   | ←      | left arrow                  |
| &uarr;   | ↑      | up arrow                    |
| &rarr;   | →      | right arrow                 |
| &darr;   | ↓      | down arrow                  |
| &harr;   | ↔      | left-right arrow            |
| &lArr;   | ⇐      | left double arrow           |
| &uArr;   | ⇑      | up double arrow             |
| &rArr;   | ⇒      | right double arrow          |
| &dArr;   | ⇓      | down double arrow           |
| &hArr;   | ⇔      | left-right double arrow     |
| &lsquo;  | ‘      | left single smart quote     |
| &rsquo;  | ’      | right single smart quote    |
| &ldquo;  | “      | left double smart quote     |
| &rdquo;  | ”      | right double smart quote    |
| &#8218;  | ‚      | single low quotation mark   |
| &#8222;  | „      | double low quotation mark   |
| &ndash;  | -      | en dash                     |
| &mdash;  | –      | em dash                     |
| &nbsp;   |        | nonbreaking space           |
| &iexcl;  | ¡      | inverted exclamation mark   |
| &sect;   | §      | section sign (used in law)  |
| &brvbar; | ¦      | broken vertical bar         |
| &copy;   | ©      | copyright symbol            |
| &reg;    | ®      | registered trademark symbol |
| &#8482;  | ™      | trademark sign              |
| &cent;   | ¢      | cent sign                   |
| &pound;  | £      | Pound Sterling sign         |
| &yen;    | ¥      | Yen sign                    |
| &euro;   | €      | Euro sign                   |
| &plusmn; | ±      | plus-or-minus sign          |
| &micro;  | µ      | micro symbol (mu)           |
| &183;    | ·      | middle dot character        |
| &deg;    | °      | degree sign                 |
| &sup1;   | ¹      | superscript one             |
| &sup2;   | ²      | superscript two (squared)   |
| &sup3;   | ³      | superscript three (cubed)   |
| &para;   | ¶      | paragraph sign              |
| &middot; | ·      | middle dot                  |
| &frac14; | ¼      | one quarter fraction        |
| &frac12; | ½      | one half fraction           |
| &frac34; | ¾      | three quarters fraction     |
| &iquest; | ¿      | inverted question mark      |
| &#8224;  | †      | dagger                      |
| &#8225;  | ‡      | double dagger               |
| &#8226;  | •      | bullet                      |
| &#8230;  | …      | ellipsis (three dots)       |
+----------+--------+-----------------------------+