Bold, italics, bullet points, links and pictures
â Back to Web CodingTwo tags, and the difference between them matters more than it looks:
<p>This is <strong>important</strong>.</p>
<p>This is <em>said with emphasis</em>.</p>
<p>This is <mark>highlighted</mark>.</p>
Try it â this is live
They exist, and they only change the look. <strong> and <em> change the meaning â a screen reader actually reads them with more force, so a blind visitor hears what you meant. Same appearance, more care.
A list is two tags: one for the list itself, one for each item.
Bulleted â order does not matter (ul, for unordered):
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Dragon food</li>
</ul>
Try it â this is live
Numbered â order does matter (ol, for ordered):
<ol>
<li>Wake up</li>
<li>Write some HTML</li>
<li>Rule the world</li>
</ol>
Try it â this is live
You never type the bullets or the numbers. You say this is a list, these are its items, and the browser counts for you. Add an item in the middle of an ol and everything below renumbers itself.
The tag that built the internet. <a> stands for anchor, and it needs an attribute to say where it goes:
hrefthe attribute name â "hypertext reference""https://âĻ"its value, always in quotesVisit Examplethe words you actually click<p>Go and read about <a href="https://en.wikipedia.org/wiki/Octopus">octopuses</a>.</p>
<p>Or visit <a href="html.html">another page in this folder</a>.</p>
Try it â this is live
A full address starting https:// goes anywhere on the web. A bare name like about.html means a file sitting next to this one â that is how the pages of one site link to each other.
<img> is different in two ways. It has no closing tag â there is nothing to put inside it â and it needs two attributes:
<img src="img/example-photo.svg"
alt="A cartoon cat asleep on a keyboard"
width="120">
Try it â this is live
That picture lives in a file next to this page. Change the src to a name that does not exist and the browser shows the alt text instead â which is the first reason to write one.
alt describes the picture for anyone who cannot see it â a blind visitor, or anybody whose connection dropped. Writing it is a two-second kindness, and every professional does it.
Two more tags with nothing inside them:
<p>Roses are red<br>Violets are blue</p>
<hr>
<p>A horizontal rule divides one part from the next.</p>
Try it â this is live
Press Enter twenty times in your HTML and the browser shows one space. It collapses all runs of whitespace. If you want a new line, you have to ask for one â <br> for a line break, or a new <p> for a new paragraph.
strong and em carry meaning, not just looks.ul + li for bullets; ol + li when the order matters.<a href="âĻ"> makes a link. Attributes go in the opening tag, values in quotes.<img src="âĻ" alt="âĻ"> has no closing tag and always needs alt.<br> or a new paragraph.