html presentation
TRANSCRIPT
HTML@eCommera
Best practices & fun stuff
about:this.presentation
• Jordan Dichev – webdev @ eCommera• Presentation about HTML best practices• New & interesting features
Why is front-end (HTML, JS, CSS) important?
• Well written front-end code has strongest impact on user experience on web sites.
• It is often disregarded by developers in detriment to site performance and therefore company image.
• Considered a web development skill by default but takes time to learn and master.
General guidelines
• Apply consistency everywhere– It’s more important for HTML, CSS, and JS to be
consistently written than the exact style in which they are written.
– Mixing styles and frameworks can (and will) cause issues
• Design before implementing– Plan before writing code from scratch such as in
new projects and new-feature implementations
HTML DOCUMENT ANATOMYHow it’s made
Always specify DOCTYPE and XML namespace.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ">
<html xmlns="http://www.w3.org/1999/xhtml"></html>
Specify lang attributes in html element
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
</html>
Always put a title tag in head<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en"> <head> <title>title text here</title> </head></html>
Always put all style and JavaScript declarations in head section
• This provides for progressive rendering of web pages – CSS files come first, before JS code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>title text here</title> <style rel="stylesheet" type="text/css"
href="/path/to/stylesheets/stylesheet1.css" /> <style rel="stylesheet" type="text/css"
href="/path/to/stylesheets/stylesheet2.css" /> <script type="text/javascript"
src="/path/to/javascripts/javascript1.js"></script> <script type="text/javascript"
src="/path/to/javascripts/javascript2.js"></script> </head></html>
Provide metadata tags for character encoding, short description and keywords
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>title text here</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="Short description text here"/> <meta name="keywords" content="Keywords, separated by commas, like that, here"/> <style rel="stylesheet" type="text/css"
href="/path/to/stylesheets/stylesheet1.css" /> <style rel="stylesheet" type="text/css"
href="/path/to/stylesheets/stylesheet2.css" /> <script type="text/javascript" src="/path/to/javascripts/javascript1.js"></script> <script type="text/javascript" src="/path/to/javascripts/javascript2.js"></script> </head></html>
Semantic authoring of HTML documents
• HTML is for describing the structure and meaning of content – not for describing presentation
• Semantics of HTML 4.01 and XHTML 1.0 are identical, the syntax is different
• HTML doesn't have an element for everything
Elements display
• BlockTakes up the full width available, with a new line before and after (display:block)
• InlineTakes up only as much width as it needs, and does not force new lines (display:inline)
• Not displayedSome tags, like <meta /> and <style> are not visible (display:none)
Common HTML elements that are naturally block-display include
• <div>Your general-purpose box
• <h1> … <h6>All headings
• <p>Paragraph
• <ul>, <ol>, <dl>Lists (unordered, ordered and definition)
• <li>, <dt>, <dd>List items, definition list terms, and definition list definitions
• <table>Tables
• <blockquote>Like an indented paragraph, meant for quoting passages of text
• <pre>Indicates a block of preformatted code
• <form>An input form
Naturally inline elements• <span>
Your all-purpose inline element• <a>
Anchor, used for links (and also to mark specific targets on a page for direct linking)• <strong>
Used to make your content strong, displayed as bold in most browsers, replaces the narrower <b> (bold) tag• <em>
Adds emphasis, but less strong than <strong>. Usually displayed as italic text, and replaces the old <i> (italic) tag
• <img />Image
• <br>The line-break is an odd case, as it’s an inline element that forces a new line. However, as the text carries on on the next line, it’s not a block-level element.
• <input>Form input fields like and
• <abbr>Indicates an abbr
• <acronym>Working much like the abbreviation.
Semantics of elements
• Use the element whose meaning is closest to the presented information's meaning.
• <title> should be used always as it identifies document contents and is used by browsers, search engines, other apps, etc.
• <h1> to <h6> should be used for identifying document's structural parts and hierarchy
• <ul>, <ol> for lists and navigation• <label> should be used in forms to identify form elements• <p> for texts• <blockquote>, <q>, <cite> and cite attribute• <link> in <head> for relationships with other documents
Attributes
• Use meaningful id and class attribute names - they should be self-descriptive
• ids - where only one element exists• classes - for multiple elements
ACCESSIBILITY AND USABILITY TIPS
Some more info and tips about accessibility and usability features of HTML
Tables
• table - summary attribute - provides a non-visual summary of the table’s content or purpose, which may be useful to people accessing the table using assistive technology
• th/td - scope attribute - specifies the direction of the table cells that the header cell relates to
• th/td - headers attribute - indicates which table headers are related to a given table data cell, providing context for the data for users of non-visual browsers
Forms
• fieldset and legend elements - logically group related form controls, and provide a title for the grouping via the legend element
• label element - links a form control to the associated descriptive text in a totally unambiguous way---a great aid for users of non-visual browsers, such as those using screen readers to interact with forms
Images
• alt attribute - provides a text alternative for an important image; can be applied to img element or to an input of type "image"
• longdesc attribute - provides a link to additional information, contained in a separate text file, about the image
Anchors (<a>)
• title attribute - in anchor tags it additionally specifies text description of element
General Aids
• a well-written document title - opportunity for explaining what is to follow.
• headings (h1-h6) - headings provide users of such assistive devices as screen readers with an additional--and quick--method for navigating through a document by skipping from heading to heading.
• list items (in ul or ol elements) - wrapping navigation items in a list allows users of assistive technology to skip entire blocks of navigation easily, jumping from one navigation level to another.
Checks
Before you complete an HTML tasks, the following checks need to be carried out to confirm the validity of the work.
• Confirm page works in Firefox, Internet Explorer, Safari• Check page for unnecessary objects in the page (use
firebug). If any objects are not used (including JS rollover images), please comment out before deleting
• Check changes against accessibility tool and accessibility guidelines
• Confirm page is SEO friendly and relevant SEO guidelines have been followed
COMMON HTML MISTAKES TO AVOID
DOs and DONTs
Forgetting to Close a Tag
• This is very common. Several tags require closing tags such as divs, strong tags, and links to name a few. Other tags require a closing slash to end the line such as an img tag.
<div>Text inside the div.</div><img src="images/imagename.jpg" />
Incorrect DOCTYPE
• HTML requires that you start out the document with the correct DOCTYPE declaration. It needs to be before anything else in the code, starting the document by declaring what type of HTML you’re using. Here’s the DOCTYPE for XHTML 1.0 Transitional.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ">
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
Improperly nesting tags
• It’s very important to open and close tags in the proper order. Once something (for example a div) has opened, it must close before anything above it can close. The following is incorrect.
<div><strong>text</div></strong>
Capitalizing tags
• This is just considered bad practice, but won’t result in your code not being validated. You should always use lowercase for tags like divs, links, and images. The following is incorrect.
<DIV></DIV>
Forgetting to open or close quotes
• It will result in broken code and things not functioning properly. HTML requires double quotes that open and close correctly. Here’s an example of correct usage.
<img src="images/headerimage.jpg" />
Using inline styles
• This is another one that is considered bad practice. Inline styles do work but will result in headaches later on! Items should be styled globally through an external stylesheet. It will be much easier to edit and add styles to in the future. An example of inline styles:
<a href="link.html" style="color: #000; text-decoration: none;">link name</a>
Not Encoding Special Characters
• Characters like “©” and “&” should be shown with the proper HTML code for the character.
Confusing Classes and IDs
• Classes are for items that are used more than once on one page. This can be a link style that you’ll call in multiple times on one page but doesn’t follow the global link styling.
• IDs are items that are called in just once, like the header div.
• Classes and ids are often overused and used in unnecessary places as well. Stick to the minimum amount of classifications that you need.
Not Using Unique Names for IDs
• It’s very important to choose names that are unique so that it’s easy to edit later on, and easy to identify in your stylesheet. Name your divs specific things like #home-left-column which is better than just #left.