Web Development

Dr Derek Bridge
School of Computer Science & Information Technology
University College Cork

Lecture Objectives

learn HTML tags for specifying page structure, and when to use them
learn HTML tags for distinguishing words or phrases from the rest of the text, and when to use them

In a web page, we may want to group together consecutive elements if they are logically related.
- E.g. a heading and subsequent paragraphs may form a section.
Why?
- These chunks can be targets for CSS & JavaScript.
- These chunks may give info to screen-readers & search engine crawlers.

In earlier versions of HTML, we grouped the elements of a document using div.
But div is very generic.
Web developers used a lot of id attributes to reveal the purpose of each div.
Automatically-generated HTML also tends to contain a lot of div elements.

header: A group of introductory elements
nav: A group of page or site navigation links (a navigation menu)
main: The main content of the page (only one per page; never nested within the other elements on this slide)
aside: A group of content that is tangentially related to the page or surrounding context (e.g. an advertising sidebar)
footer: Information about the page or section or article (author, copyright, etc.)
div: Is still available, but used only as a last resort —when nothing else is suitable—and should be much rarer (except in automatically-generated HTML)!

An HTML5 section is a thematic grouping—usually part of a larger whole.
An HTML5 article is also a thematic grouping—but this time one that is self-contained.
You can nest sections & articles within other sections & articles.

Rule-of-thumb: if you can imagine copying the content and reusing it elsewhere—on another page—or distributing it for others to use on their sites, then use article.

Press releases and news stories
Blog posts
Adverts

Sections or articles should generally not contain just one paragraph.
- The validator will warn you that a heading is needed.
- In any case, sections and articles are supposed to group elements together.
Use headings of an appropriate rank (h1-h6) for the level of nesting.
Try to make the right choice between section and article.
- But there are no real consequences so don't over-think it!

In a web page, we may want to mark-up words or phrases to draw attention to them.
- E.g. a phrase may need to stand out because it is important.
Why?
- These elements can be targets for CSS & JavaScript.
- These elements may give info to screen-readers & search-engine crawlers.

One way to highlight a word or phrase is to use the span element.
But just like div, span is very generic.
It is used as a last resort—to mark up a run of text when nothing else is suitable.

em, the emphasis element: to emphasize a word or phrase, especially for contrast.
strong, the strong importance element: to draw special attention to a word or phrase because it is important, serious or urgent.
i, the interesting text element: when you need to distinguish a word or phrase from the surrounding text for some reason, e.g. titles, names, technical terms and phrases in a foreign language.
b, the bring to attention element: to distinguish keywords or key phrases from surrounding text.

That's not a bee! It's a wasp!
Save your work to disk frequently.
If it's not your own work, you will score zero.
Well, Introduction to Programming is my favourite module.
CS1117 teaches you how to write programs and how to test them.
Litost is a Czech word that is virtually untranslateable but means something like a state of agony and torment created by the sudden sight of one's own misery.

b does not mean 'bold' and i does not mean 'italic'.
(However, your browser's default CSS will display b and strong as bold and i and em in italic.)
Not every word or phrase needs to be marked-up!
Don't over-do it!
Only mark them up if they need to be distinguished from the surrounding text.
Try to make the right choice between em, strong, i and b.
But there are no major consequences so don't over-think it!