HTML CHEAT SHEET
Basic HTML Structure:
<html>
<head>
<title>website title</title>
</head>
<body>
content of website ...
</body>
</html>
Common Blog Tags:
● <h?> heading </h?> Heading (h1 for largest to h6 for smallest)
● <p> paragraph </p> Paragraph of Text
● <b> bold </b> Make text between tags bold
● <i> italic </i> Make text between tags italic
● <a href="url"> link name </a> Create a link to another page or website
● <div> ... </div> Divide up page content into sections, and applying styles
● <img src="filename.jpg"> Show an image
● <ul> <li> list </li> </ul> Unordered, bullet-point list
● <br> Line Break (force a new line)
● <span style="color:red"> red </span> Use CSS style to change text color
Text Formatting:
● <h?> ... </h?> Heading (?= 1 for largest to 6 for smallest, eg h1)
● <b> ... </b> Bold Text
● <i> ... </i> Italic Text
● <u> ... </u> Underline Text
● <strong> ... </strong> Strong - Shown as Bold in most browsers
● <em> ... </em> Emphasis - Shown as Italics in most browsers
Linking Tags:
● <a href="url"> link text </a> Basic Link
Lists:
● <ol> ... </ol> Ordered List
● <ul> ... </ul> Un-ordered List
● <li> ... </li> List Item (within ordered or unordered)
Tables:
● <table> ... </table> Define a Table
● <tr> ... </tr> Table Row within
table
● <th> ... </th> Header Cell within table row
● <td> ... </td> Table Cell within table row
Miscellaneous Tags:
● <!-- ... --> Comment within HTML source code
● <!DOCTYPE html ... > Document type definition
● <meta> ... </meta> META information tag
Visual Studio Code:
● Cmd + tab Switch screen from visual studio code to chrome
● Cmd + s Save file
● Cmd + r Refresh
● Cmd + b Hide sidebar