If the cell is **Pinned** (see blue pin icon when you float the mouse over the cell), then the code is visible along with the result. If the cell is unpinned (gray pin icon, not selected to pin), then the code hides and you only see the results. This is simply a convention in this Observable interface. You can Pin and Unpin as you need.

<h1>Hello World!</h1> <!-- heading 1 is a large heading, with some margin also -->

<h2>Hello World!</h2> <!-- heading 2 is a little smaller (there's also h3, h4, h5, etc.) -->

<div>Hello World!</div> <!-- and the div has no specific margin or font-size, and just contains -->

this is just some text in a div<br />

but it can also include a <a href="https://arch.virginia.edu">link to the UVA Architecture website</a><br />

and it can also include an image <img src="https://www.arch.virginia.edu/shared-gallery/img/h52/A-Mark-SchoolofArchitecture-k.png" height="50"/><br />

or a different image <img src="http://thefirestarter.co.uk/wp-content/uploads/2015/12/anything-for-money.jpg" width="300"/>

p#fox {background-color: chocolate; font-size: 24px;}

i {color: blue;}

<rect x="100" y="100" width="180" height="120" style="fill:blue; stroke: red; stroke-width: 3" />

<circle cx="55" cy="55" r="50" />

<line x1="50" y1="250" x2="280" y2="50" />

<style>

circle {fill: yellow; stroke: gray;}

line {stroke: black; stroke-width: 2;}

</style>

</svg>