HTML Notes

1
http://learn.shayhowe.com/html-css/elements-semantics
Lesson 1
Terminology, Syntax, & Introduction

In this Lesson 1
HTML

CSS
Common Terms Structure & Syntax Referencing CSS
Common Terms Structure & Syntax Selectors Reset
Before beginning our journey to learn HTML and CSS it is important to understand the differences between the two languages, their syntax, and some common terminology. As an overview, HTML is a hyper text markup language created to give content structure and meaning. CSS, also known as cascading style sheets, is a presentation language created to give content style and appearance. To put this into laymen terms, HTML determines the structure and meaning of content on a web page while CSS determines the style and appearance of this content. The two languages are independent of one another. CSS should not reside within an HTML document and vice versa. Taking this concept a bit further, the HTML p element is used to display a paragraph of text on a web page. The p element is specifically used here as it provides the most value for the content, thus being the most semantic element. CSS then uses a type selector of p which can determine the color, font size, font weight, and other stylistic properties of the paragraph. More on this to come.
Common HTML Terms

When getting started with HTML you are likely to hear new, and often strange, terms. Over time you will become more and more familiar with all of them but three terms you should learn today include tags, elements, and attributes.
Elements
Elements are designators that define objects within a page, including structure and content. Some of the more popular elements include h1 through h6, p, a, div, span, strong, and em.
<a>
Tags
Elements are often made of multiple sets of tags, identified as opening and closing tags. Opening tags mark the beginning of an element, such as <div>. Closing tags mark the end of an element and begin with a forward slash, such as </div>.
<a>...</a>
Attributes
Attributes are properties used to provide additional instruction to given elements. More commonly, attributes are used to assign an id, class, or title to an element, to give media elements a source (src), or to provide a hyperlink reference (href).
<a href="http://www.shayhowe.com/">Shay Howe</a>
Common HTML Terms Example Shay Howe
HTML Document Structure & Syntax

All HTML documents have a required structure that includes the following declaration and tags: doctype, html, head, and body. The doctype declaration is used to instruct web browsers which version of HTML is being used and is placed at the very beginning of the HTML document. Following the doctype declaration, html tags signify the beginning and end of the document. The head of the document is used to outline any meta data, the document title, and links to any external files. Any context included within the head tags is not visible within the actual web page itself. All of the content visible within the web page will fall within the body tags. A general HTML document structure looks like the following:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">
3
<title>Hello World</title> </head> <body> <h1>Hello World</h1> <p>This is a website.</p> </body> </html>
Common CSS Terms

In addition to HTML terms, there are some common CSS terms you will want to familiarize yourself with. The more you work with HTML and CSS the more these terms will become second nature.
Selectors
A selector determines exactly which element, or elements, the corresponding styles will be applied to. Selectors can include a combination of different IDs, classes, types, and other attributes all depending on how specific you wish to be. Selectors can be identified as everything that comes before the first curly brace, {.
p { ... }
Properties
A property determines the style that will be applied to an element. Properties can be identified as the text coming immediately before a colon. There are an abundant number of properties you can use, and new ones are continually being added.
p { color: #ff0; font-size: 16px; }
Values
A value determines the behavior of a property. Values can be identified as the text in-between the colon and semicolon.
CSS Structure & Syntax

CSS works by using selectors to apply styles to HTML elements. All CSS styles cascade, allowing different styles to be inherited by multiple elements.
As an example, it is possible to set one style for all of the text on a page to be of a specific color, size, and weight. Then by using a more targeted selector that style can be overwritten for a unique element.
Fig. 1.01 CSS syntax outline. The following syntax demonstrates how styles would be applied to every paragraph.
Long vs. Short Hand

In CSS there are multiple different ways to declare values for a property. With long hand CSS you stack multiple declarations, one after the other for each property and value. With short hand CSS you use one property and list multiple values. It is best to use short hand CSS as it requires less code. Not all properties support short hand CSS so make sure you are using the correct property and value structure.
/* Long Hand */ p { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; } /* Short Hand */ p { padding: 10px 20px; } /* Short Hand */ p { padding: 10px; }
Comments within HTML & CSS HTML and CSS give you the ability to leave comments within the code. These comments can be used to help with organization, set reminders, and manage code more effectively. Comments become especially useful when there are multiple people working on the same code. Any content wrapped within comments will not be rendered on the page.
HTML comments wrap the content starting with . CSS comments wrap the content starting with /* and end with */.
Selectors
Selectors, as mentioned earlier, are the determining factor as to which elements are to be stylized. In so, it is important to fully understand how to use selectors and how they can be leveraged. Some of the most common selectors include elements, IDs, and classes, or some combination of the three.
Type Selectors
Type selectors are the most basic selector. Simply enough, elements without any necessary attributes are targeted to apply styles. Type selectors are preferred whenever possible as they require less code and are easy to manage.
HTML
<p>...</p>
CSS
p { ... }
Class Selectors
Class selectors allow you to apply the same style to an array of elements by giving them all the same class attribute. Classes are denoted in CSS by identifying the class with a leading period. It is permissible to use the same class attribute on multiple elements on a page.
HTML
<div class="awesome">...</div>
CSS
.awesome { ... }
ID Selectors
ID selectors are similar to class selectors however they are used to target only one unique element at a time. Instead of using the class attribute, IDs naturally use the ID attribute. In place of a period, as with classes, IDs are denoted by identifying the ID with a leading hash sign. IDs are only allowed to be used once per page and should ideally be reserved for significant elements.
HTML
6
<div id="shayhowe">...</div>
CSS
#shayhowe { ... }
Combining Selectors
A beauty of CSS is the ability to combine selectors and inherit styles. This allows you to start with a more generic selector and work your way to being more specific as necessary. In addition, you can combine different selectors to be as specific as you wish.
ul#social li { padding: 0 3px; } ul#social li a { height: 17px; width: 16px; } ul#social li.tumblr a { background: url('tumblr.png') 0 0 no-repeat; }
Additional Selectors
Selectors can be extremely powerful and the selectors outlined above are only the beginning. Many more advanced selectors exist and are readily available. Before dropping classes or IDs on random elements check and see if there might be a better selector to do the job for you. It is also worth mentioning that not all advance selectors work in every browser, particularly with new selectors introduced in CSS3. If a selector doesnt seem to be working properly check its browser support.
Referencing CSS
Once content is in place you may begin to style the HTML with CSS. There are a handful of different ways to reference CSS, some of which are better than others. The best practice for referencing CSS is to include all of your styles within a single external stylesheet, referenced within the heading of a page. Using an external stylesheet allows you to use the same styles across an entire website and quickly make changes site wide. Other options include internal and inline styles. These options are generally frowned upon as they make updating websites cumbersome and unwieldy.
 <link rel="stylesheet" href="file.css">
7
 <style type="text/css"> p { color: #f60; font-size: 16px; } </style>  <p style="color: #f60; font-size: 16px;">Lorem ipsum dolor sit amet...</p>
Using External CSS Stylesheets

As mentioned above, the best way to reference CSS is with an external stylesheet. Doing so allows you to use one set of styles across an entire website. Making changes to the style of a website becomes painless, and users download less data overall to properly render the styles. Within the head of the HTML document, the link element is used to define the relationship between the HTML file and the CSS file. Since you are linking to CSS the rel attribute with a value of stylesheet is used to specify the relationship. Furthermore, the href attribute is used to identify the location, or path, of the CSS file. In order for the CSS to render, the path of the href attribute value must directly correlate to where the CSS file is stored. In the example above the file.css is stored within the root directory, the same location as the HTML file. Should the CSS be within a subdirectory, the href attribute value would need to correlate this path accordingly. For example, if the file.css is stored within a subdirectory call styles the href attribute value would be styles/file.css, using a forward slash to indicate different directories.
<head> <link rel="stylesheet" href="styles/file.css"> </head>
Reset
By default every web browser has its own interpretation on how different elements are to be stylized. How Chrome decides to render an input field is likely going to be much different than how Internet Explorer renders an input field. To combat for cross browser compatibility CSS resets have become widely used. Cross Browser Compatibility & Testing As mentioned, different browsers render pages in different ways. Its important to recognize the value in cross browser compatibility and testing. Websites dont need to look the same in every browser but they should be close. What browsers you wish to support and to what degree is a decision you will need to make in accordance with what is best for your website.
CSS resets include a handful of rule sets that take every common HTML element and scale them down to one unified style. These resets involve removing any sizing, margins, paddings, or additional styles. Resets need to be the very first CSS styles to be rendered to ensure that all the styles there after are being applied to the skeleton of a page. There are a ton of different resets available to use, all of which have their own forte. My personal favorite is Eric Meyers reset, which has been adapted to include a reset for the new HTML5 elements. Erics reset is short and to the point, but feel free to research your own resets and find what youre comfortable using. Code Validation As proficient as we all are, we do make mistakes. Thankfully when writing HTML and CSS we have a validator that can check our work. The W3C has built both HTML and CSS validators that will scan your code looking for mistakes. Validating your code not only helps it render properly across all browsers, it also teaches you the best practices for writing code.
Lesson 2
Elements & Semantics

In this Lesson 2
HTML

CSS
Semantics Overview Divisions & Spans Typography Hyperlinks HTML5 Structural Elements
D.R.Y.
With a basic understanding of HTML and CSS in hand it is time to dig a little deeper and see what actually assembles these two languages. In order to start building web pages you need to learn a little about which HTML elements are used to display different types of content. You will also want to know how these different elements behave, to help ensure you achieve your desired outcome. Additionally, once you begin writing code you want to make sure that you are doing so semantically. Writing semantic code includes keeping your code organized and making well informed decisions.
Semantics Overview
Semantics have been mentioned a number of times thus far, so exactly what are semantics? Semantics within HTML is the practice of giving content on the page meaning and structure. These semantics portray the value of content on a page, and are not solely used for styling purposes. Using semantic code provides a handful of benefits, including giving computers, screen readers, search engines, and other devices the ability to adequately read and understand web pages. Additionaly, semantic code is easier to manage and work with, knowing clearly what each piece of content is about.
Divisions & Spans

Divisions, or divs, and spans are HTML elements that act as a container for different content. As a generic container they do not come with any overarching meaning or semantic value. Paragraphs are semantic in that when content is wrapped within a p element it is known as a paragraph. Divs and spans do not hold such meaning and are simply containers. Both divs and spans, however, are extremely valuable when building a website in that they give you the ability to apply targeted CSS styles. A div is a block level element commonly used to identify large sections of a website, helping build the layout and design. A span on the other hand, is an inline element commonly used to identify smaller sections of text within a block level element, such as a paragraph. Block vs. Inline Elements All elements are either block or inline level elements. Whats the difference? Block level elements begin on a new line on a page and occupy the full available width. Block level elements may be nested inside one another, as well as wrap inline level elements. Inline level elements do not begin on a new line and fall into the normal flow of a document, maintaining their necessary width. Inline level elements cannot nest a block level element, however they can nest another inline level element. Divs and spans can have added value when given a class or id. A class or id is typically added for styling purposes and to signify the difference between another div or span. Choosing a class or id name is where semantics can come into play. When choosing a class or id attribute value it is important to choose something that has value to the actual context of that element. For example, if you have a div with an orange background that contains social media links your first inclination might be to give the div a class of orange. What happens if that orange background is later changed to blue? Having a class of orange no longer makes sense. A better, more semantic, choice for a class would be social as it pertains to the contents of the div not the style.
10
1. 2. 3. 4. 5. 6. 7. 8. Divs & Spans <div class="social"> <p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p> </div>  <p>Lorem ipsum dolor sit amet, <span class="tooltip">consectetur</span> elit.</p>
Typography
A large amount of content online is strictly text based. Many different forms of media and context exist online, however text rules the majority. There are a number of different elements to display text on a web page within HTML. We will focus on the most popular, and more semantic, elements within this lesson. For a broader overview please see the Typography lesson.
Headings
Headings are block level elements that come in six different rankings, h1 through h6, and are key identifiers for users reading a page. Headings help to quickly break up content and provide hierarchy. They are also used to help search engines index and determine the value of content on a page. Headings should be used in the order relevant to the content. The primary heading of a page or section should be coded with h1 and subsequent headings should use h2 on as necessary. Headings should be reserved for true classification and not used to make text bold or big.
1. <h1>This is a Level 1 Heading</h1> 2. <h2>This is a Level 2 Heading</h2> 3. <h3>This is a Level 3 Heading</h3>
Headings Demo
This is a Level 1 Heading

This is a Level 2 Heading
This is a Level 3 Heading Paragraphs
Headings are often followed with supporting paragraphs. Paragraphs are defined by using the p block level element. Numerous paragraphs can appear one after the other, adding information to a page.
11
1. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> 2. 3. <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
Paragraphs Demo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Bold Text with Strong

To make text bold, and to note it as important, the strong inline level element is used. It is important to understand the semantic difference between strong and b, both of which will make text bold. strong is semantically used to denote text with a strong importance, as is mostly the case when wanting to bold text. b on the other hand semantically means stylistically offset, which isnt always the best case for text deserving prominent attention. Gauge the significance of the text you are looking to set as bold and choose an element accordingly.
1. <p>Duis in <strong>voluptate</strong> velit esse cillum.</p>
Bold Text Demo Duis in voluptate velit esse cillum.
Italicize Text with Emphasis

To italicize text and place a stressed emphasis on it the em inline level element is used. As with strong, there are two different tags used to italicize text, each with a slightly different semantic meaning. em semantically means to place a stressed emphasis on text and thus is the most popular option for italicizing text. The other option is i, which semantically values text to be rendered in an alternate voice. Again, you will need to gauge the significance of the text you want to italicize and choose an element accordingly.
1. <p>Quae ars <em>putanda</em> est, expeteretur si nih.</p>
Italicize Text Demo Quae ars putanda est, expeteretur si nih.
Hyperlinks
12
One of the core elements of the internet is the hyperlink, established by using an anchor. Hyperlinks are defined using the a inline element however they require a source to direct the link. The href attribute, known as hyperlink reference, is used to set the destination of a link. By nature the a element is an inline element, however with the introduction of HTML5, a elements now have the ability to wrap block or inline level elements. This is a break from the standard convention yet permissible to turn entire blocks of content on a page into a link.
1. <a href="http://shayhowe.com">Shay</a>
Hyperlinks Demo
Relative & Absolute Paths

The two most common types of links include links to other pages within a website and links to other websites. How these links are identified is by their path, also known as the value of their href attribute. Links pointing to other pages within the same website should have a relative path, in which the domain is not in the href attribute value. Since the link is pointing to another page on the same website the href attribute value only needs to include the page being linked to, /about.html for example. Should the page being linked to reside within a subdirectory the href attribute value needs to reflect this as well. Say the about.html page resides within the pages directory, the relative path would then be /pages/about.html. Linking to other websites outside of the current one requires an absolute path, where the href attribute value must include the full domain. A link to Google would need the href attribute value of http://google.com, starting with http and including the domain, .com in this case.
1. 2. 3. 4. 5.  <a href="/about.html">About</a>  <a href="http://www.google.com/">Google</a>
Linking to an Email Address

Occasionally you will encounter a link to an email address. When clicked, this link opens the default email client and populates some information. At a minimum the email address where the message is being sent is populated, however other information such as a subject and body text may also be populated. To create an email link the href attribute value needs to start with mailto: followed by the email address to where the email should be sent. To create an email link to shay@awesome.com the href attribute value would be mailto:shay@awesome.com.
13
Additionally, a subject and body text for the email can also be populated. To add a subject line include the subject= parameter following the email address. Multiple words within a subject line require spaces to be encoded using %20. Adding body text works very similar to that of the subject, using the body= parameter in the href attribute value. Again, spaces must be encoded using %20 and line breaks must be encoded using %0A. Altogether, a link to shay@awesome.com with the subject of Still Awesome and body text of This is awesome would look like mailto:shay@awesome.com?subject=Still%20Awesome&body=This%20is%20awesome. Please notice, the first parameter requires a ? to bind it to the email address and additional parameters require a & to bind them the previous parameter. For more information on building email links, including how to add multiple email addresses, cc, and bcc parameters, please see Joost de Valk guide, The Full mailto Link Syntax.
1. <a href="mailto:shay@awesome.com?subject=Still%20Awesome&body=This%20is%20 awesome">Email Me</a>
Email Link Demo Email Me
Opening Links in a New Window

One feature available with hyperlinks is the ability to determine where the link is opened once clicked. Typically links open in the same window from which they are clicked, however links may open in a new window. To trigger the action of opening a link in a new window the target attribute is used with a value of _blank. The target attribute determines where the link is displayed, and the _blank value specifies a new window.
1. <a href="http://shayhowe.com/" target="_blank">Shay Howe</a>
Opening Links in a New Window Demo Shay Howe
Linking to Elements within the Same Page

Periodically you will see links that simply link to another portion of the same page. In the case of this guide, links found within the In this Lesson section link down the page to the appropriate section. Perhaps more commonly found online are Back to Top links that return users to the top of a page. Creating an on page link is accomplished by specifying an ID on the element you wish to link to. Then, using the ID of that element in a links href attribute value. As an example, putting the
14
main ID #main.
on the body element allows you to link to the top of a page using the href value of
1. <a href="#awesome">Awesome</a> 2. <div id="awesome">Awesome Section</div>
On Page Links Demo Awesome Awesome Section
HTML5 Structural Elements

HTML5 provides a handful of new elements, all of which are focused around improving semantics. Before, if you wanted to declare a block level section of a page you were likely to use a div. With HTML5 you have a handful of new block level elements that allow you to write more semantic code.
Fig. 2.01 The new HTML5 structural elements outline.
Header
The header, just as it sounds, is used to identify the heading of a page, article, section, or other segment of a page. In general, a header may include a heading, introduction text, or navigation. You can use more than one header on a page. Depending on the website, you will ideally include a header at the beginning of the page. Additionally, a header may reappear as the header of an article or section as necessary.
1. <header>...</header>
15
Clarification on the header Element The header element should not be confused with the head or headings, h1 through h6. The header element is a structural element that outlines a heading on a page, of which falls within the body element on a page. The head element is not displayed on the page and is used to outline meta data, the document title, and links to external files. Headings, h1 through h6, are used to represent multiple levels of text headings throughout a page.
Navigation
The nav is a block level element used to denote a section of major navigational links on a page. Not all links should be wrapped within a nav element. The nav should be reserved for primary navigation sections including universal navigation, a table of contents, breadcrumbs, previous/next links, or other noteworthy groups of links. Most commonly links included within the nav element will link to other parts of the same website or web page. Miscellaneous one off links should not be wrapped within the nav element, and should only use the a element.
1. <nav> 2. <ul> 3. <li><a href="#">...</a></li> 4. <li><a href="#">...</a></li> 5. </ul> 6. </nav>
Article
The article block level element is very similar to that of a div or section however it is specifically defined as an element which should include independent, self-contained content that may be independently distributable or reusable. Most often article will fall within blogs and other publishing websites as a block of published content. When deciding to use the article element determine if the content within the element could be replicated elsewhere without any confusion. The content within the article alone must make sense, and be able to be distrbuted elsewhere, such as within an RSS feed.
1. <article>...</article>
Section
A section is more likely to get confused with a div than an article. As a block level element, section is defined to represent a generic document or application section. Where a section differentiates itself from a div is that a section is not to be used as a convenience for styling or scripting purposes.
16
That said you can apply styles to a section however you shouldnt be using a section aimlessly with the sole purpose of adding styles. Reserve the section element for large parts of a page worthy of the element.
1. <section>...</section>
Deciding When to Use a section or div The best way to determine when to use a section versus a div is to look at the actual content at hand. If the block of content could exist as a record within a database and isnt explicitly needed as a CSS styling hook then the section element is most applicable. Sections should be used to break a page up, providing a natural hierarchy, and most commonly will have a proper heading. A div on the other hand may be used to specifically tie styles to a block of content. As an example, if a couple paragraphs need to stand out above the rest of the content on a page they should be wrapped in a div. That div then may have the proper styles applied to it, perhaps a background, border, or the alike.
Aside
To accompany the header and footer elements there is also the aside block level element. An aside defines content related to the document or section surrounding it. As with header and footer elements, the aside can be used multiple times per page, so long as each use is practical. Please keep in mind that the aside is a block level element, in which it will appear on a new line and occupy the full width of the page or any container. If you would like to get the aside to appear to the right or left of a block of content you will need to float the aside element. Dont worry about floats right now, we will learn about floating and positioning content in an upcoming lesson.
1. <aside>...</aside>
Footer
The footer is identical to that of the header however for the bottom of a page, article, section, or other segment of a page. A footer should not stem away from the document or section at hand and its context should include relative information.
1. <footer>...</footer>
D.R.Y. Dont Repeat Yourself

One principle of development is D.R.Y., also known as dont repeat yourself. Within CSS this principle can speak volumes as it is easy to continually write the same styles over and over again. Dont. CSS was designed in a way to allow you to cascade styles and use classes so that you
17
easily apply and inherent styles. The end goal is to write clean and light code, of which is semantic and easily managed.

HTML Notes

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML Notes

Încărcat de

Drepturi de autor:

Formate disponibile

1

Terminology, Syntax, & Introduction

Common Terms Structure & Syntax Referencing CSS

Common Terms Structure & Syntax Selectors Reset

Common HTML Terms

Common HTML Terms Example Shay Howe

HTML Document Structure & Syntax

Common CSS Terms

CSS Structure & Syntax

Long vs. Short Hand

Using External CSS Stylesheets

Elements & Semantics

Divisions & Spans

This is a Level 1 Heading

Bold Text with Strong

Bold Text Demo Duis in voluptate velit esse cillum.

Italicize Text with Emphasis

Italicize Text Demo Quae ars putanda est, expeteretur si nih.

Relative & Absolute Paths

Linking to an Email Address

Email Link Demo Email Me

Opening Links in a New Window

Opening Links in a New Window Demo Shay Howe

Linking to Elements within the Same Page

1. <a href="#awesome">Awesome</a> 2. <div id="awesome">Awesome Section</div>

On Page Links Demo Awesome Awesome Section

HTML5 Structural Elements

Fig. 2.01 The new HTML5 structural elements outline.

D.R.Y. Dont Repeat Yourself

S-ar putea să vă placă și