What is a chemical bond?
Salt, water, diamond and copper are all atoms holding on to each other, in three different ways. Pick any two elements and see which bond they make, watch sodium hand chlorine an electron, shatter a salt crystal, bend copper, slide the sheets of a pencil lead, melt ice one hydrogen bond at a time, and add up the bonds in a gas flame.
▶ Play with it · Read the 60-second explainer · Watch the 40-second video
- Atoms join to lose energy. Two hydrogen atoms settle 74 pm apart, 436 kJ/mol lower in energy than when separate. How hard each atom pulls on electrons, its electronegativity, decides the kind of bond: a difference under 0.4 is shared fairly, up to about 1.7 is a lopsided polar bond, and over 1.7 one atom takes the electron. These cut-offs are rules of thumb.
- Ionic: give and take. Moving sodium's outer electron to chlorine costs 147 kJ/mol, but the + and − ions then attract and pay back far more. They stack into a lattice, each ion with six unlike neighbours 282 pm away. So salt has no molecules, is hard, melts at 801 °C, shatters when a layer slips, and conducts only when molten or dissolved.
- Covalent: share. Non-metals share pairs of electrons and form molecules with exact shapes. Electron pairs keep apart: methane is a tetrahedron (109.5°), water is bent to 104.5° by its two lone pairs, CO₂ is straight. In diamond every carbon holds four others; in graphite three, in sheets that slide.
- Metallic: pool. And water's weak bonds. Metal atoms pool their outer electrons in a sea, so copper conducts, shines and bends. The sea drifts at under 1 mm/s. Between water molecules, hydrogen bonds 22 times weaker than a covalent bond make water boil at 100 °C instead of about −90 °C, and make ice float.
- Breaking costs, making pays. Breaking a bond always takes energy; making one gives it out. Burning methane costs 2,660 kJ to break bonds and returns 3,464 kJ: about 800 kJ of heat. The octet rule has exceptions: BF₃ has six electrons, SF₆ twelve, NO an odd one, and even xenon bonds.
| Term | Meaning |
|---|---|
| Chemical bond | A lasting pull between atoms that holds them together because joined they have less energy than apart. |
| Electronegativity | How strongly an atom pulls shared electrons towards itself. Pauling's scale runs from 0.79 (caesium) to 3.98 (fluorine). |
| Ionic bond | The electric attraction between ions of opposite charge, formed when one atom gives electrons to another. |
| Covalent bond | A bond made by two atoms sharing a pair of electrons. A polar covalent bond is shared unequally. |
| Metallic bond | The attraction between positive metal ions and the sea of free electrons they share. |
| Octet rule | A rule of thumb: atoms tend to gain, lose or share electrons until they have eight in the outer shell. It has exceptions. |
| Hydrogen bond | A weak pull between a slightly positive hydrogen on one molecule and a slightly negative oxygen, nitrogen or fluorine on another. |
| Bond energy | The energy needed to break a bond. The same energy is given out when the bond forms. |
From tables of 'affinity' to a photograph of the bonds in a single molecule: 300 years of asking what holds matter together.
- 1807 · Electricity pulls compounds apart (Humphry Davy, Royal Institution, London)
- 1819 · Berzelius: every compound is plus joined to minus (Jöns Jacob Berzelius, Stockholm, Sweden (published in Paris))
- 1852 · Each element has a combining power (Edward Frankland, Manchester, England)
- 1858 · Carbon makes four bonds, and chains (August Kekulé and Archibald Scott Couper, Heidelberg, Germany and Paris, France)
- 1874 · Carbon's four bonds point to the corners of a tetrahedron (Jacobus van 't Hoff and Joseph Le Bel, Utrecht, Netherlands and Paris, France)
- 1913 · X-rays show salt has no molecules (William Henry Bragg and William Lawrence Bragg, Leeds and Cambridge, England)
- 1916 · Lewis: a bond is a shared pair of electrons (Gilbert N. Lewis, University of California, Berkeley)
- 1920 · The hydrogen bond is named in water (Wendell Latimer and Worth Rodebush, University of California, Berkeley)
The full story, with 20 moments, charts, people and 38 sources: glassbox.how/e/bondclear/history. The data lives in history.json.
Made with the Glassbox studio from this box's storyboard (window.glassbox.director). Free to reuse under CC BY 4.0.
| File | What | Size |
|---|---|---|
glassbox/reel.mp4 |
Reel / Short, with captions and soundtrack | 1080×1920 |
glassbox/video.mp4 |
YouTube video, with captions and soundtrack | 1920×1080 |
glassbox/slide-1…10.jpg |
Instagram carousel | 1080×1350 |
glassbox/thumb.jpg |
YouTube thumbnail | 1280×720 |
glassbox/cover.jpg |
Share card and repo social preview | 1200×630 |
glassbox/history-reel.mp4 |
“History in 10 moments” Reel / Short | 1080×1920 |
glassbox/history-slide-*.jpg |
History carousel | 1080×1350 |
glassbox/post.json |
Post copy and schedule used by the publish kit |
This box has no accounts and no ads, and it ships its own fonts and libraries. When you run it yourself it sends nothing anywhere. On glassbox.how, the site's /bar.js also loads Glassbox's analytics: Google Analytics to count visits (it asks first in the EU, UK and Switzerland, and stays off when your browser sends Global Privacy Control or Do Not Track) and ClickTrust to detect bots.
It remembers a few things in your own browser only, and never sends them anywhere:
| Browser storage key | What it holds |
|---|---|
bondclear.v1 |
Which chapters you have opened, your best quiz scores, and sound on or off. |
Exactly what each one sees is at glassbox.how/privacy.
- Code: MIT. Use it, change it, ship it.
- Explanations, text, images and videos (
glassbox.json,glassbox/): CC BY 4.0. Credit “Glassbox, glassbox.how/e/bondclear”. - Third-party parts keep their own licences: three.js (MIT), Geist, Instrument Serif (SIL OFL 1.1).
- The Glassbox name and logo aren't covered by either licence. See the terms.
Found a mistake? Open an issue. Corrections happen in public.
It's plain HTML, CSS and JavaScript. No build step and no dependencies. Run locally, it contacts no other website.
python3 -m http.server 8000Three.js and the fonts ship in vendor/ and fonts/, so it also works offline.
Then open http://localhost:8000.
| File | What |
|---|---|
index.html, css/app.css |
The page and its styles |
js/app.js, js/stage.js, js/ui.js, js/kit.js |
The shared Glassbox 3D engine: chapters, 3D stage, controls, quiz, video director |
js/chapters/*.js |
One file per chapter: the 3D model, controls, text, key terms, quiz and video scenes |
js/bond.js |
Shared data and parts: Pauling electronegativities and the bond-type rule of thumb, real molecular geometries, the salt, diamond, graphite, copper and ice lattices, ball-and-stick drawing, chart boards |
glassbox.json |
Title, question, explainer beats, key terms, browser storage and credits shown on glassbox.how |
reel in each chapter |
The storyboard the Glassbox studio records into short videos |
glassbox/ |
The published video, slides, thumbnail and post copy |
fonts/, vendor/three/ |
Self-hosted Geist and Instrument Serif (SIL OFL 1.1) and three.js (MIT) |