GDWD 105 Interactive Coding Cheat Sheet

HTML

HTML Tags and Comments

<-- This is an HTML comment -->

<div> This div has tags on the same line. </div>

<div>
This div has opening and closing tags
on different lines.
</div>

HTML Attributes and Children

<div id="myIdValue" class="myClassValue">
This div has three different children
<img src="srcValue" alt="altValue">
<div id="myOtherIdValue" class="myClassValue">
This div is both a child and a parent
</div>
</div>

Void Elements

Here are some common void elements you may encounter in our class.

(Remember that void elements are HTML elements that should NOT have a closing tag. Every other HTML tag SHOULD have a closing tag.)

<head> Elements

<link> - Link (to external resources)
<meta> - Metadata

<body> Elements

<br> - Line Break
<hr> - Horizontal Rule
<img> - Image
<col> - Column, used in a <colgroup> element, in a <table>
<input> - Input Field, used in a <form> element
<source> - Source, used in a <audio> or <video> element

Semantic Elements

Here are some common semantic elements you may encounter in our class.

(Remember that semantic elements generally do not affect a page visually, but they do give MEANING to elements within a page.)

<header></header> - Header
<nav></nav> - Navigation
<main></main> - Main
<section></section> - Section
<article></article> - Article
<summary></summary> - Summary
<details></details> - Details
<aside></article> - Aside
<footer></footer> - Footer

CSS

CSS Rules (Selectors and Declaration Blocks)

div {
font-style: italic;
line-height: 24px;
}

section.large #explanation {
linear-gradient: to top left, green 10%, red 90%;
border: 5px dashed darkgreen;
}

CSS Properties and Comments

<div style="color:red;">
This div has an inline CSS style
</div>

/* This is a CSS comment */

body {
background-color: pink;
font-family: Courier New;
}