html cheat sheet


template

<!DOCTYPE html> <html> <head> <title>page title</title> </head> <body> page content... </body> </html>

headers

<h1>hello</h1> <h2>hello</h2> <h4>hello</h4> <h4>hello</h4> <h5>hello</h5>

paragraph

<p>hello</p>

block element

<div>hello</div>

span

hi <span>hello</span> there

horizontal line

<hr>

images

<img src="hello.jpg">

links

<a href="http://google.com">hello</a>

ordered list

<ol> <li>1</li> <li>2</li> <li>3</li> </ol>

unordered list

<ul> <li>1</li> <li>2</li> <li>3</li> </ul>

line break

<br>

applying class to element

<span class="className">hello</span>

applying id to element

<div id="idName">hello</div>

applying fonts to html

visit fonts.google.com select font(s) click "select this style" <!--add to header--> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapi s.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet"> <!--copy this from google fonts--> <!--see css cheat sheet for adding fonts to elements-->