Cheatsheet Project

Table 1(Basic Html Tags)

Tag	Tag Name	Function	Example
<html>	Html Element	All elements in an html sheet are nested inside this tag.	<!DOCTYPE html> <html> all page contents are nested here such as... <head> </head> <body> </body> </html>
<head>	Head Element	Lists metadata for the page, such as stylesheets links and the document's <title> which is listed on the browser tab.	<!DOCTYPE html> <html> <head> ...Stylesheets link and page title goes here... </head> <body> </body> </html>
<body>	Body Element	Contains the content or "body" of an html document. Everything shown on the webpage goes here.	<!DOCTYPE html> <html> <head> </head> <body> ...webpage contents go here... </body> </html>
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>	Heading Elements	All output a heading with a different size, h1 being the largets and h6 being the smallest.	<h1>Heading 1</h1> - <h6>Heading 6</h6>
<p>	Paragraph Element	Contains a block of text.	...nested inside the body tag... <body> <p> text contents </p> </body>
<div>	Div Element	Used to group elements/content.	<div> <h1> Elements group 1 </h1> <p> Text for group 1 </p> </div>
<br>	Break Element	Used to add a line break between content(extra space).	<div> <h1> Elements group 1 </h1> <p> Text for group 1 </p> </div> <br> ...will add extra space between <div>'s... <div> <h1> Elements group 2 </h1> <p> Text for group 2 </p> </div>
<ol>, <ul>, <li>	Ordered list, Unordered list, List item	Ordered list is used to make a numbered or ordered list, Unordered list is used to make an unordered list without numbers and instead uses bullets, List item is the items that will be listed in either Ol or Ul.	<ul> <li>List Item</li> <li>List Item</li> <li>List Item</li> </ul> ...same format for <ol>...
<span>	Span Element	Isolates nested text from other text for styling purposes.	<p> Text inside the span element will show up <span>differently</span> from the rest.</p>
<video>	Video Element	Embeds a media player for video playback. Utilizes the src attribute.	<video src ="video.mp4" controls(adds media controls for the video) </video>
<img>	Image Element	Embeds an image and utilizes the src attribute.	<img src="cat-pic.jpeg"> ...does not have closing tags...
<a>	Anchor Element	Used to create hyperlinks leading to other webpages or other points on the same page. Utilizes the href attribute.	<a href="http://www.pagelink.com"></a> ...can also embed a link into a picture... <a href="http://www.pagelink.com"> <img src="cat-pic.jpeg"> </a>
<title>	Title Element	Defines the title of the html page which is displayed in the browser bar and the browser tab.	Nested in the <head> element. <head> <title> Title of webpage </title> </head>
<em>	Emphasis Element	Italicizes the text nested within.	<p>normal text <em>Italicized text</em> normal text</p>
<strong>	Strong Element	Emboldens the text nested within.	<p>normal text <strong>Bold text</strong> normal text</p>

Table 2(Attirbutes)

Attribute	Function	Example
name	Used in the opening tag of an element to change the behavior specificaly of a form element.	<input name="element name"> input content </input>
id	Used in the opening tag to identify an element uniquely.	<thead id="name of table head"> table head </thead>
class	Used in the opening tag to identify a group of elements with the same class attribute.	<table class="table1"> <thead> <tr> <th>heading name</th> <th>heading name</th> <th>heading name</th> </tr> </thead> </table>
alt	Used in the opening tag to provide alternate text when the given tag does not work inside the browser.	<img src="image.jpeg" alt="text displayed if image fails">
href	Used in the opening tag to link a webpage. Stands for Hyper Face Reference.	<a href="http://www.site.com">takes you to this site</a>
src	Used in the opening tag of an element to link the source for a photo or video.	<img src="file/path/computer.html">
target	Used in the opening anchor tag to add a target location for the given link.	<a href="https:www.google.com" target="_blank></a> this will open to google in a new tab