Skillz: Bare Naked HTML5
Do you know what HTML looks like when the CSS covers are stripped away?
HTML provides the structure or skeleton of our web pages. Before we can work on the pretty, let’s take some time to examine how the browser uses HTML to structure the document flow of a web page.
The W3C maintains a list of all HTML elements currently part of the specification. It’s a handy reference list. You can find it here: http://dev.w3.org/html5/markup/elements-by-function.html. An additional handy list of elements can be found at HTML5 Doctor. Each element has a particular purpose in life for describing page content in a particular way. For example: the <p> element describes a paragraph of text; an <a> element (a for anchor) defines a reference point on a page*; and an <em> element describes a piece of text as being emphasized. Some page content isn’t content for reading and is, instead, a type of content called metadata. Metadata is a name for data that describes data. The <meta> element is a good example. This element is used to describe content that describes the page itself: author’s name, keywords, description, and so on. Other metadata-type elements include the <link> element (for linking stylesheets, among other things), the <style> element, and the <head> element.
As you can see from the specification list, there are quite a few elements to choose from. For this Skillz activity, create an HTML document that contains as many of the HTML elements listed as possible. Use the HTML5 Doctype. Use good HTML syntax: lowercase elements, quoted attribute values, closing tags. Also use indenting where appropriate to visually indicate nested elements. Use content with each element as appropriate (paragraph of text for the <p> element, list text for <li> elements, etc.). View the results as you go along in different browsers (the more the better–this includes mobile and other non-desktop platform browsers). Each browser has their own internal stylesheet that displays when no other styles are present. It’s useful to see how the browsers handle HTML straight up. If available, use the Inspect Element feature in the browser to see how the browser styles HTML by default. Most do so similarly, but you will find differences. You should also observe how different elements act in terms of their display types. Some elements may behave differently when they are nested within other elements.
Absolutely no styles. We are talking naked HTML here.
- You thought I was going to say the <a> element defines a hypertext link, didn’t you? It can do that, too, when the href (hypertext reference) attribute is used. Imagine the anchor tag as an actual ship’s anchor buried in a spot on a web page with a line from the anchor to another point or page.
This is an optional activity.
Materials & Technology
- Text editor
- Web browsers of all shapes and sizes
- Student web hosting account
- FTP software (optional)
- Examine how the HTML elements behave in browsers without CSS styles
- Learn the HTML elements
- HTML page posted to portal
- URL to Skillz posted to corresponding dropbox basket in eCompanion course shell
- Optionally, you can post the URL to the Show & Tell discussion