HTML

HTML

Hyper Text Markup Language

Standardized by the W3C - currently HTML 5

Describes structure and content of a document

Machine and human readable

Syntax

Structure

<!DOCTYPE	html>   -> document type
<html>            -> document element (single root element)
<head>
<meta	charset="utf-8"/>
<meta	name="author"	content="WE"/>
<title>Title</title>
</head>
<body>
<h1>First	order	header</h1>
<p>Paragraph	content</p>
</body>
</html>

Document type

HTML, XHTML (XML), "Quirks mode"

<?xml	version="1.0"	encoding="UTF-8"?>
<!DOCTYPE	html PUBLIC	"-//W3C//DTD	XHTML	1.1//EN" http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Element

<tagname attribute="value">content</tagname>

tag name is the elements name

content between "start tag" and "end tag"

<div
id="someID"
class="someClass"
title="Text	displayed	as tooltip"
lang="en"
data-loaded="false"
style="display:block;">
Content </div>

Generic Elements

Block element takes up full width, forced line break

<h1>, <p>, <div>, <section>,…

Inline element takes up as much as necessary

<span>, <a>, <em>, <strong>,…

Grouping Elements

<p>Lorem	ipsum	dolorem	sit	amet…</p>
Contact:	<address>Name:	Jane	Doe</address>
<pre>public static void main(){}</pre>
<figure>
<blockquote>Any	idiot	can	put	up	a	website.</blockquote>
<footer>
<figcaption>Some	quote</figcaption>
<cite>Patricia	Briggs</cite>
</footer>
</figure>
<ul>
<li>Some	element</li>
<li>Another	element</li>
</ul>
<ol>
<li>First	element</li>
<li>Second	element</li>
</ol>

Links and Anchors

Links refer to documents or elements within other documents.

Anchors define bookmarks within a document, which can be used by links with fragments.

<a href="http://www.w3.org/html">HTML	Standard</a>
<a href="index.html#registration">Registration</a>
<a href=“#timetamble”>Timetable/Lectures</a>
<a name="name1">Link text</a>
<a id="id1">Link text</a>

Forms

<input type="submit" value="Submit" /><input type="checkbox" name="…" value="…" /><input type="radio" name="…" value="…" /><select>
<option value="option1">option1</option>
…
</select><input type="text"/> <input type="password" /><textarea type="text" rows="2" cols="50"> </textarea><input type="file"/><input type="hidden" name="…" value="…" /><!-- New in HTML 5 -->
<input	list="browsers"	/>
<datalist	id="browsers">
<option	value="IE"	/>
<option	value="Firefox"	/>
<option	value="Chrome"	/>
</datalist><input	type="number"	min="1"	max="5"	/><input	type="text"	placeholder="First	name"	/>

Grouping Forms

<fieldset>
<legend>Choose your favourite course</legend>
<p>
<input type="radio"	id="we"	name="course">
<label for="we">Web	Engineering</label>
</p>
<p>
<input type="radio"	id="ssd"	name="course">
<label for=“ssd”>Semi-structured	Data</label>
</p>
</fieldset>

Sending Forms

HTML forms only allow GET and POST requests.

Example

<!DOCTYPE	html>
<html>
<head>
<title>A	HTML5	Document</title>
</head>
<body>
<p>This	is	a	sample	<a href="...">HTML	5</a>	document.</p>
<form action=“/processForm” method="post">
<p>
<label for="userName">Your	name:</label>
<input type="text" id="userName" name="userName" />
</p>
<p><input type="submit" value="Submit the form" name="action" /></p>
</form>
</body>
</html>

Process

  1. Filling form out

    [ Your Name: Yahya ]

  1. pressing submit
  1. POST request with data as message body

    userName="Yahya"

  1. Web Server responds with another HTML

Element Semantics

For accessibility, search engines, maintainability.

<div id="header">...</div>    -->    <header>...</header>

correct use of headings <h1>, <h2>, <h3>, ...

Using <em> to emphasize

Content Structure

Universal Accessibility

Common Disabilities

  • Vision Problems
  • Hearing Problems
  • Movement Problem
  • Reading Difficulty

Web Content Accessibility Guidelines (WCAG 2.0):

Four Principles of Accessibility

  1. Perceivable (for audio-visual impaired people)

    alt Attribute: <img alt="Man walking dog down the street" …>

    Use proper semantics

  1. Operable

    Can all functions be performed with a keyboard? Is completing tasks easy?

  1. Understandable

    Is text clearly written? Do my navigation and forms flow intuitively?

  1. Robust

    compatible with future technologies, assistive technologies, most devices, slow devices, slow internet connection

Good Practice - Examples

Using CSS to hide (a portion of the link) text 

.accessibility {	position:	absolute;
left:	-10000px; /*	off	screen	*/
width:	1px;
height:	1px;
overflow:	hidden; }

Supplementing link text with the title attribute (H33) 

<a href="http://example.com/WORLD/africa/kenya.elephants.ap/index.html"
title="Read more about failed elephant evacuation">
Evacuation Crumbles Under Jumbo load
</a>

Using alt attributes on img elements (H37)

<img src="ipa-logo.jpg" alt="Interactive Programming and Analysis Lab" />

Using semantic markup to mark emphasized or special text (H49)

What she <em>Evacuation<em> meant to say was...
This is an excerpt from <cite>The story of my life</cite>: ...

Bad Practice - Examples

...
<form action="/login">
<p>
<font color="#29672D"><b>Login	form
<table>
<td>User name <br>
Password
<td>
<td> <input name="1"> <br>
<input name="2">
<input type="submit" value="submit">
</table>
<span>not	registered?	click	<a href="register"> here
</form>
...

Issues with:

  • Screen Reader Linearization → (no logical) binding of label and field - Where do I fill in what?
  • Color blindness and myopia
  • Understanding what "here" means → Link title is just "here"
  • No semantics of "Login form" → Only increased size