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 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
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.
Do not begin on a new line and maintain their width. They cannot nest a block but they can wrap another inline level element.
These are the popular semantic elements to display text.
They are block level elements and come in rankings from
h6. They break up content and give hierarchy. They are also used for SEO
p is a block level element. Paragraphs are semantic since the content is wrapped with a
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
bsemantically 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.
isemantically values text to be rendered in an alternate voice
Division and Spans
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 are used for styling and to tell the difference between another
span. When choosing a value for id or class, choose something that has value to the context of that element.
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.
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>
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>
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>
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:
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:firstname.lastname@example.org?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
<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.
- Specify an id on the element to link to
- 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.
Not to be confused with the tags
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
Block level element used for a section of major navigation links on the page.
Reserved for primary sections including:
- Universal navigation
- Table of contents
- 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>
Block level element similar to
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.
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.
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
Block element level that goes at the bottom of the page
<footer>This is the footer</footer>