Summary of Chapter 2 Shay Howe a Beginner Guide to HTML and CSS

This is just a summary of this tutorial for reference purposes. I learn by typing things down.

To go to the original tutorial go here

Environment * Ruby 1.9.2p320 * Rails 3.2.3 * MAC OSX 10.7.3 * Editing with TextMate * iterm2

Semantics

Semantics in HTML gives the content on the page meaning and structure

Semantics give value to the content and not only for styling. With semantics you can explain clearly what the content is about.

Block and Inline Level Elements

All elements are either block or inline level

Block

They begin on a new line and occupy all the available width. They can be nested inside another block and can wrap inline level elements.

Inline level

Do not begin on a new line and maintain their width. They cannot nest a block but they can wrap another inline level element.

Typography

These are the popular semantic elements to display text.

Headings

They are block level elements and come in rankings from h1 to h6. They break up content and give hierarchy. They are also used for SEO

Paragraphs

p is a block level element. Paragraphs are semantic since the content is wrapped with a p element.

Bold Text with Strong

  • strong (inline level element) is semantically used to denote text with a strong importance, as the case of wanting to bold text

  • b semantically means stylistically offset (whatever that means). And it says is not the best case for text deserving strong importance.

Italicize Text with Emphasis

There are two tags to italicize text:

  • em (inline level element) is the most popular option for italicizing text. It means to place a stressed emphasis on text.

  • i semantically values text to be rendered in an alternate voice

Division and Spans

Div and span are HTML elements used for containers of content. They are generic containers and don’t come with semantic value, unless they are given a class or id.

id or class are used for styling and to tell the difference between another div or span. When choosing a value for id or class, choose something that has value to the context of that element.

Div

It is block level element used for large sections of a website to build the layout and design.

Used to tie styles to blocks of content. For example used if a paragraph of the content needs to stand out. Then wrap it with a div, which would have a style attached to it.

Span

It is an inline element used for smaller sections of text inside a block element. For example, a paragraph.

Example of semantic div

The class on this div gives semantic value to this element, which are social media names.

<div class="social">
    <p> Twitter </p>
    <p> Linkedin </p>
</div>
Example of semantic span
<p>This is a CMS, <span class="CMS"> Wordpress </span> for blogging </p>

Hyperlinks

Defined using the a inline element, and href to (hyperlink) reference the link. Use the title attribute for SEO.

In HTML5 a is not only an inline element but is also able to wrap a block or another inline element.

<a href="http://hackatrain.com" title="Hackatrain | Building Software Inside A Train">Hackatrain/a>

Relative paths

Used for linking pages inside the same website. The domain is not in the href attribute value.

<a href="/about.html" title="About the Hackatrain">About</a>

Absolute paths

Linking pages outside the website.

<a href="http://google.com" title="Google About the Hackatrain">Google</a>

Link to Email Address

To create a link to email use this:

href="mailto:tom@tom.com"

You can add other values such as subject=, where multiple words are spaced using %20. And body= using %20 for spaces and %0A for line breaks.

To separate values: email, subject and title. Use ? after the email and & after the title.

<a href="mailto:tom@tom.com?subject=Buy%20Me%20Beer&body=Brewskies%20at%20Hooters%0AGoogle%20it" title="Buy Me Beer at Hooters">Hooters</a>

Open Links in a new window

Use the attribute target with a value of _blank

<a href="http://google.com" title="Google Tom" target="_blank">Google Me</a>

Linking to Elements in the same page

This can be used to jump into a section of the same page.

  1. Specify an id on the element to link to
  2. Add the id to an href attribute with a leading #

This is an example:

I could have this on top like a table of contents on a page:

<a href="#rules" title="Hackatrain Rules">The Rules</a>

Then under the section for an item of the table of contents I can do this:

<div id="rules">Hackatrain Rules</div>

When I click at the link on the table of contents it would jump into such section.

HTML5 Structural Elements

With HTML5 I have more options for semantic code than just div to declare a block section.

Header

Not to be confused with the tags head or heading (used for h1 to h6). Used to identify the heading of a page or a segment of a page.

I can use more than one header on a page.

Use one header at the beginning of the page and more could appear on other elements like articles and sections.

This header goes inside the body tag of a page

<header>...</header>

Navigation

Block level element used for a section of major navigation links on the page.

Reserved for primary sections including:

  • Universal navigation
  • Table of contents
  • Breadcrumbs
  • Previous/next links

Links included in the nav should link to other parts of the same website. Other off links should not be in the nav and use only the a element.

<nav>
    <ul>
        <li><a href="/">Blog</a></li>
        <li><a href="/contact-us">Contact Us</a></li>
    </ul>
</nav>

Article

Block level element similar to div or section used as a block of published content that can be reusable, like a blog.

Determine if the content in the element can be replicated and distributed somewhere else, for example using an RSS feed.

<article>Some article</article>

Section

Used if the block element is a record in a database and is not needed as a CSS style hook.

Sections are used to break up a page and they would have a proper heading.

<section>Whatever</section>

Aside

Block level element defines content around document or section. It can be used many times per page.

It will appear on a new line and occupy the full width. If you want it to show on the sides you need to float it

<aside>Float this</aside>

Footer

Block element level that goes at the bottom of the page

<footer>This is the footer</footer>
CSS, HTML, HTML & CSS Tutorial, Shay Howe, elements, semantics