General
- W3Schools.
- Mozilla Developer Network (MDN).
- W3C.
- WebPlatform.
- HTML5Doctor.
- Learn to Code HTML & CSS (Shay Howe).
Tools
- HTML5 Boilerplate – A template.
- W3C HTML Validator.
- Eric Meyer’s CSS Reset.
- Nicolas Gallagher’s Normalize.css Reset – Rather than just removing all styling it sets a unified, cross-browser default.
Know This
- Elements – “define structure and content of objects within a page.”
- Tags – “The use of less-than and greater-than angle brackets surrounding an element creates what is known as a tag.“
- Attributes – “Attributes are properties used to provide additional information about an element. ”
- These are placed within the opening tag.
- Document Type Declaration – Always start HTML documents with this: <!DOCTYPE html>
- Character Encoding of Page – <meta charset=”utf-8″>
- Reset – Removes default stylings that are per-browser based, included at beginning of CSS stylesheet.
- Ordered Lists: <ol><li></li></ol>
- Undordered Lists: <ul><li></li></ul>
- Comments: <!– –>
- Bolding Text: <strong></strong>
- Italicizing Text: <em></em>
- Tables:
<table>
<thead>
<tr>
<th colspan=”2″>Table Name</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column</td>
</tr>
</tbody>
</table> - Divisions (Div): <div></div>
- Span: <span></span>
Basic Structure
<!DOCTYPE HTML>
<html>
<head>
<title>Title Goes Here</title>
</head>
<body>
<div>
<h1>Subject of Page</h1>
<p>Paragraph Text.</p>
<p>Paragraph Text.</p>
</div>
</body>
</html>
Basic HTML
You’ll need to know these by heart. Note the property/value pairs in some HTML tags are called attributes.
- HTML <html></html>
- Head <head></head>
- <link href=”” rel=”” />
- CSS: <link href=”main.css” rel=”stylesheet” />
- If including a font style sheet, have it first, so main stylesheet has access to font.
- The lower down the header the CSS file, the higher its precedence (importance).
- Body <body></body>
- Div <div></div> – Groups portions of the page together.
- Headings <h1>
- Paragraphs <p></p>
- Links <a href=””></a>
- Images <img src=””>
- Lists <ul></ul>
- List Items <li></li>
Other HTML
- What is the purpose of the role attribute in HTML? (Stackoverflow)