Notes from Code School's Front End Formation: Level 1
Updated Elements in HTML5
- doctype- meta declaration
- script tag
- link tag
Doctype
In HTML 4.01, there were three different doctypes:
- strict
- transitional
- frameset
 |
| HTML 4.01 Doctypes |
HTML5:
<! DOCTYPE html>
Meta Declaration
The meta declaration is the tag you put inside the <head> of your document to specify the character encoding for your whole document.
Again, the prior version was long and complicated:
HTML 4.01:
<meta http-equiv="Content-Type" content="text/html, charset=UTF-8">
HTML5:
<meta charset="UTF-8">
Script Tag
The script tag is what you use to reference external JavaScript files or write inline JavaScript.
In 4.01 we specify the type attribute, but in HTML5, the type is inferred by the filetype, and no longer needed.
HTML 4.01:
<script type="text/javascript" src="file.js"></script>
HTML5:
<script src="file.js"></script>
Link Tag
HTML 4.01:
<link rel="stylesheet" type="text/css" href="file.css" />
HTML5:
<link rel="stylesheet" href="file.css" />
Again the browser will infer the type from the file extension.
Again the browser will infer the type from the file extension.
Existing Tag Updates
Traditionally presentational, the <i>, <b>, and <em> and <strong> tags have been given semantic meanings.
In HTML 4.01 and prior, the <i> and <b> tags were font style elements.
- the <i> tag rendered an italic font style
- the <b> tag a bold font style
Now in HTML5, the <i> tag represents text that is in an "alternate voice" or "mood". The <b> tag is now used to "stylistically off-set" text.
Example uses for <i> tag:
- taxonomic designation
- technical term
- idiomatic phrase from another language
- transliteration
- A thought
- A ship name in Western texts
e.g.
<p><i>I hope this works</i>, he thought</p>
Example uses of the <b> tag:
- Keywords in document abstract
- Product Names in a Review
- Actionable words in an interactive document
- Article lead
e.g. An article lead, with class lead for additional clarification using the <b> tag.
<p><b class="lead">The event takes place this coming Saturday, and over 3,000 people have already registered.</b></p>
In HTML 4.01 and prior, <em> meant emphasis, and <strong> meant strong emphasis.
Now, in HTML5, <em> means "stress emphasis", and <strong> means "strong importance".
e.g. Here the word before is stress emphasized, and the date is given strong importance.
<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2013</strong>.</p>
No comments:
Post a Comment