Project 1-3 Review

1. Project 1-3 Review A Review Based on Student Work

2. Anchor Tag Structure This is a reminder of what the basic structure of a link should be: <a href=“link to the web page”>The Link Text That Will be underlined and SEO Relevant</a> The href attribute is how you tell the browser where to go when the link is clicked. You can add an additional attribute called Title to give the browser, user and search engines more information. It’s important with any attribute to be sure you use the = and both the open and closed quotes. If you omit one of the quotes, it could mess up your code on the remainder of the page.

3. Proper List Markup Just a quick reminder that this is the correct markup for a list: <ul> <li>List Item</li> <li>List Item</li> <li>List Item</li> </ul> First you open the list and then each list item is in the <li></li> tag and then you close the list. I saw a lot of this in your work: <ul>List Item</ul> <ul>List Item</ul> <ul>List Item</ul> Additionally, you don’t need to add a paragraph in list items if there isn’t 2 paragraphs. <ul> <li><p>List Item</p></li> </ul>

4. Meta Description The proper markup for the meta description is this: <meta name="description" content="NotMotts is a big fan of the Granny Smith apple as it’s naturally tart flavor is a perfect contrast for the sweetness derived from our apple sauce creation process."> You can see that it is a tag with only an opening tag. Additionally, it uses two attributes. The Name Attribute should read description and the Content Attribute is what actually contains the text of the description.

5. EM versus I For the most part, you will want to use the <em> tag to indicate text that should be read with extra emphasis and will often be italicized visually. I’d rather not see you using the <i> tag as that is only a visual tag, not semantic usage.

6. Proper HTML Tagging Here are a couple of things that can cause issues with your HTML markup: • Not Closing Tags that should have a closing tag. • Using capital letters in the name of either your opening or closing tag (not matching). • Overlapping tags; tags can be nested, but must open and close in pairs and cannot overlap. <p>This is a paragraph of text and it really should have a closing tag as the end of it. <p>This is a paragraph of text and the closing tag doesn’t match the opening one.</P> <div> <p>This is a paragraph and it is not closed correctly due to overlapping tags.</div> </p>

7. Using Strong in Heading You do not need to use the <strong> tag within any of the Heading Tags, especially if you are doing it only to make them bold. Good: <h1>This is a Heading</h1> Not Proper Markup: <h1><strong>This is a Heading with an unnecessary strong tag</strong></h1> This could be done if you need to format a portion of the heading differently than the rest. <h1>This is a <span>Heading</span></h1> Either of these could be used to target a specific <h1> tag. <h1 id=“idname”>This is a Heading</h1> <h1 class=“classname”>This is a Heading</h1>

8. Ordering Selectors I suggest the following Order for selectors in your stylesheet as they should go from most general selectors to the more specific selectors. • Tag Selectors (broadly edit the appearance of all instances of a tag). • Pseudo-Class Selectors (edit specific instances of tags, used mostly for links, anchors). • Class Selectors (broadly edit any tag that utilizes the class attribute with that name). • ID Selectors (Edit specific elements that utilize the id attribute with that name). • Compound Selectors (Edit elements within other elements).

9. Pseudo Class When you use Pseudo Class selectors, be sure you specify what tag and instance you want to edit otherwise you are telling the browser to edit all tags when hovered etc. :hover Should be: a:hover div#idname:hover Also, remember that when you use the ID or Class selectors without a element tag in front of it, you are editing any tag that utilizes that ID attribute or Class attribute with that name. div#site-logo is more specific than #site-logo and div.clear is more specific than .clear.

10. File & Folder Naming Limit Character Usage I suggest that you utilize the standard alphabet (a–z) in lowercase, numerals (0–9), the Hyphen character (-) and the Underscore character (_). All of these characters are universally accepted for use on Client Side and Server Side web technology. It is not a good idea to use: • Spaces • Brackets ( ) [ ] { } < > • Symbols # @ % ~ | * & • Quotations ‘‘ ““ • Slashes / \ • Punctuation , . ? ; : ! • Uppercase Characters from the standard alphabet ABCDEF... Avoid using the “illegal” characters will save you time, effort and avoid unnecessaryfrustration.