More HTML Markup

Document outline

It’s important to think of your web page as a document outline. In most typical outlines, you have a series of headings, paragraphs, lists, figures (images) and sections.

I. This is a main heading.
    A. This is a sub heading.
    B. This is another sub heading.
        1. A paragraph could go here outlining one point from above.
        2. Another paragraph could go here.
    C. Here is another section.

In much the same fashion, a web page could be constructed as an outline. It’s important to learn the different HTML tags to build your document outline.

<article>

    <heading>
        <h1>This is a main heading</h1>
        <p>Here is a paragraph under the main heading</p>
    </heading>

    <p>Some general text in this article. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <figure>
        <img src="example.jpg" alt="An example image">
        <figcaption>This is a caption for the above image</figcaption>
    </figure>

</article>

Heading tags and paragraphs

Remember that headings, like <h1>, are ways to signify titles and headers of a document. The <h1> tag is the most important header.

<h1>This is the main heading for this article or document</h1>
<p>By Jeremy Rue</p>

Paragraphs tags can also be used for any other blocks of text.

Bold and Italic

There is an older way of identifying words that should be bold or italic by using <b> and <i>. A newer way is to use the more semantically appropriate tags <strong> and <em>. These tags have more meaning, because they don’t just describe how the text should look, rather they describe the function of the text; i.e. this word should be “emphasized” in some way.

<p>Here is a paragraph where a part of the text is <em>emphasized</em> and I only surround the words I want to emphasize using the em tag.</p>

Blockquotes and Quotation

These are used for signifying a quote. It is typically displayed as offset a slight bit, and often a left-border. But this isn’t the default look.

<blockquote>
Design is not just what it looks like and feels like. Design is how it works.
<br>
- Steve Jobs, 2012
</blockquote>

And this is how it would look:

Design is not just what it looks like and feels like. Design is how it works.
- Steve Jobs, 2012

Abbreviations and Citations

These are increasingly important HTML tags as they help build relationships in the data structure. In the case of citations, you can use them to insure you’re properly making references to original content.

<p><cite>A Brief History of Time</cite> by Steven Hawking</p>

The abbreviation tag is helpful for screen readers, and assisted services devices. It also helps anyone who might not know what an abbreviation stands for to find out by hovering their mouse over the world.

<p><abbr title="Senior Lecturer">Sr. Lect.</abbr> Paul Grabowicz</p>

An example of the pop-up that shows when you hover the mouse:

Address format

The address tag is used to give semantic meaning to a physical address or just contact information. While the dream of HTML was to make the web more systematic, the truth is addresses are difficult to parse. A new formation called “microformat” created several CSS classnames that have meaning to web services like Google. You can create an address tag using something called the “vcard” or “hcard” format. There is an online generator that makes it simple to do. Fill in only the fields you need.

<address>
    <strong>UC Berkeley New Media</strong><br>
    121 North Gate Hall, SPC 5860<br>
    Berkeley, CA 94720<br>
</address>

Lists

There are three types of lists, but only two are really used most often.

• The <ul> being unordered lists is probably the most common, and should be thought of as bullet points.
• The <ol> being ordered lists is best thought of as a numbered list where the browser will created the numbering for you.
• Definition lists, <dl>, <dt> and <dd>, are probably the least used. They are usually lists where there is a heading term (dt, think “definition term”) then a definition item (dd, think definition-definition?)

Links

While we studied the basic link format in Web Skills, it’s important to learn a little bit about the additional features of links. First, the basic link format with an optional title added:

<a href="http://google.com" title="Visit Google">Google</a>

We can also link to pages or any file within the site folder. As long as we don’t begin the link with http, it will search our own webserver folder for those files. This is useful for linking to a .pdf file, for example.

<a href="assets/doc.pdf" title="Foia request">Link to the document (PDF)</a>

How should the link open can be determined by an attribute called “target.” The target attribute has several possible values:

<a href="https://google.com" taget="_blank">Open Google in a new window</a>

Lastly, it is possible to link to another section within a page by linking to the id of a tag. In the href attribute, start the URL with a pound-symbol.

<a href="#about">This link takes you to the bottom</a>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2 id="about">About this page</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Figure and Figcaption

These are still not very widely used, but could be important in the future. The <figure> and <figcaption> elements allow for a more semantic way to attach a caption to a photograph. The idea is to wrap all of the photos in a <figure> element, and then include one <figcaption> that captions one or more of those photos.

<figure>
    <img src="photo.jpg" alt="picture of a flower">
    <figcaption>This photograph of a rose on driftwood, was taken in 1932 by Ansel Adams</figcaption>
</figure>

Exercise

Copy the following text, then mark it up with all of the tags we learned about in class.

Example Exercise
This is an example exercise page for Intro to Interactives

Your job is to mark up this text with HTML. You will want to use as many tags that we learned today in class as you can. Remember, you will want to really emphasize some words, and possibly make other powerful words stand out in some way, like making them bold.

If you need help be sure to Google your questions. You can also visit the Mozilla Developer Network (MDN) page, which has lots of great resources. https://developer.mozilla.org

Be sure to check out the sections on:

HTML and HTML5
CSS and CSS3
JavaScript

For inspiration, remember this quote from Steve Krug's book Don't Make Me Think:

“If there's one thing you learn by working on a lot of different Web sites, it's that almost any design idea—no matter how appallingly bad—can be made usable in the right circumstances, with enough effort.” 
― Steve Krug

Here is a nice picture of a typewriter:
http://newmedia.report/images/decorative/typewriter.jpg

Contact Us
If you have questions, you can always reach us at the UC Berkeley Journalism School at:
121 North Gate Hall, SPC 5860
Berkeley, CA 94720