3. 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.
4. 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
6. 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>
7. 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>
8. 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>
9. 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>
10. 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>
11. 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
12. Elements display
• Block
Takes up the full width available, with a new
line before and after (display:block)
• Inline
Takes up only as much width as it needs, and
does not force new lines (display:inline)
• Not displayed
Some tags, like <meta /> and <style> are not
visible (display:none)
13. 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
14. 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.
15. 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
16. Attributes
• Use meaningful id and class attribute names they should be self-descriptive
• ids - where only one element exists
• classes - for multiple elements
17. Some more info and tips about accessibility and usability features of
HTML
ACCESSIBILITY AND USABILITY TIPS
18. 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 nonvisual browsers
19. 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
20. 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
21. Anchors (<a>)
• title attribute - in anchor tags it additionally
specifies text description of element
22. 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.
23. 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
25. 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" />
26. 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"
27. 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>
28. 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>
29. 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" />
30. 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>
32. 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.
33. 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.
