3.7 KiB
3.7 KiB
Lecture 1 (13:00) - HTML5 and Layout
- XHTML (2000) succeeded HTML4, allowing XML integration such as SVG, MathML and CML.
HTML5
- Flexible parsing and compatibility
- Moved towards platform combining HTML5, CSS and JS
- Improved semantic elements
- New input attributes ex. date, time, email, url
- Global attributes ex. id, tabindex, style
Doctypes
<!DOCTYPE html>
<?xml version="1.0" ?>
Comments
<!-- This is a comment -->
ID Attribute
- Global attribute.
- Must be unique between elements.
- Must start with a letter or underscore.
- Can be used by CSS or JS to identify elements.
Class Attribute
- Any HTML element can also carry a class attribute.
- Identifies collections of elements to manipulate as a group.
- Element can have multiple classes, separated with spaces.
- Class name should describe the class it belongs to.
Block Elements
- Some elements will always appear to start in new lines.
- Examples include
<h1>,<p>,<ul>,<li>.
Inline Elements
- Some elements will always appear to continue on the same line.
- Examples include
<a>,<b>,<em>,<img>.
Grouping Elements
Block
<div>Element allows for a group of elements to be grouped together within a single block element.- Without styling each div, they will start on new lines.
- HTML5 introduced alternatives for semantic reasons.
<article><section><header><aside><nav>
- Good practice to break a page into smaller sections.
Span
<span>element is the inline equivalent of<div>- Most commonly used in order to be able to controlthe appearance with CSS.
Lecture 2 (15:00)
Page Information
<meta>contained in<head>, contains information about the page.- Not visible to user, but used in search engine rankings and info.
- Common attributes are defined in pairs.
Name, Value <meta>
Description
- Description of page
- Used & Displayed by search engines
- max. 155 characters.
Keywords
- Comma separated list of search terms
- Not used by search engines anymore
Robots
- Indicated whether search engines should include page
noindex- Don't include this page.nofollow- Include this page but not linked pages.
Special Characters
- Some characters reserved by HTML
- To display them, they must be escaped.
- ex.
<,>
- ex.
- Or by using ASCII / Unicode Values
- ex.
<,>
- ex.
Traditional HTML Layout vs. HTML5
HTML5 Elements
<header>,<footer>. Used as either header or footer at the top or bottom of a page, respectively. Can also be used for an individual<section>or<article>within the page.<nav>. Contains major navigational blocks ex. Primary site navigation.<article>. Container for syndicated or singular sections ex. news or blog article.<aside>. Contained within<article>and contains relevant but not necessary information.<section>. Groups related items together ex. Grouping<article>elements, or splitting them up.<hgroup>. Groups heading elements (h1,h2, etc.. ) into one header.<figure>. Contains information referenced by the main flow of the document. Can be used for Images, Videos,Graphs, Diagrams, Code Samples, Text etc. Can use a<figcaption>element to define a caption.
Sectioning Elements
- HTML5 elements must strictly be used as designed.
- Where no element is valid,
<div>is still used. - Any content outside of
<header>,<footer>and<aside>is considered content, hence there is no "<content>" tag. <main>element is used to specify content however, but can only be used once and cannot be nested inside<section>or any similar element.