Syracuse University
Syracuse University School of Information Studies

HTML & CSS Checklist

In response to input from students about assignment grading comments, I have created this guide for reviewing your HTML and CSS before submitting for grading. I hope it will help to reduce your chances of losing points due to avoidable mistakes or basic quality problems. A checklist can't be comprehensive enough to cover all possible situations, and some judgment will always be involved in evaluation of how well a front-end dev task was completed. We talk all the time in class about "best practice" and "not best practice" and you'll do well to take note of those moments.

I won't attempt to summarize all possible quality rubrics or coding guidance here, still less to reproduce the excellent resources we use for class readings and references at w3schools and developer.mozilla.org. You should still refer to those tools early and often! I intend this Checklist for two purposes:

  • Give students a helpful reality check when evaluating their work before submitting for grading.
  • Give us all a reference for grading feedback I return your way. Going forward, I'll expect you to have this stuff down, and if I see general HTML or CSS issues in your work, I'll cite 'HTML basics' or 'CSS basics' and focus comments on the key points of the specific assignments I'm reviewing.

In addition to the checklist below, I'll offer a couple general pointers:

Keep the links at those fine resources linked above open while you work.
Stay focused on pages relevant to the assignment, but be ready to hunt up more basic guidance as you go.
Always view your work in GitHub Pages.
This gives you a visual check for obvious broken code problems.
Refer to our Work with GitHub page if you have any question on how to do this. It's a basic requirement of the class.
Submit your GitHub Pages URL to the W3C's Markup Validation Service.
This invaluable tool is free for you use at https://validator.w3.org/
Read assignment instructions carefully and be sure to follow them.
If you don't understand, consult your study partners (highly encouraged!) and other fellow students.
Still in doubt? Email questions to me. Those clarification requests need to happen far enough ahead of the submission deadline to get a timely response. Sunday evening emails probably won't be seen until Monday.

Onward to the Checklist!

HTML Pointers

Always include these elements in any HTML:
<!doctype html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- page content goes here -->
</body>
</html>
Close your tags!
This includes standalones like the <link /> tag in the <head/>, <img/> tags that place your images, etc. Omitting these standalone closing / symbols won't break your browser, but it will lower your grade. It's a clear best practice.
Create a base starter HTML file.
You can open it and Save-As with a new name to begin each assignment.
Include the semantic HTML structural tags so you don't forget them: <header/> <main/> <section/> <article/> <footer/>
Know the difference between <head/> and <header/>.
Use your heading weightings with semantic structure in mind.
Only one (1) <h1/> per page, and match its keywords to the Page Title.
Major sections have <h2> headings, e.g., the Education, Work Experience, and Skills section headings in a resume all would be wrapped in <h2> tags.
Within a major <h2> section, the next most important logically equivalent headings would have <h3/> tags. Then within <h3/> subsections, the sub-subsections would have <h4/> headings, and so on.
Never use heading tags just to style content for visual hierarchy. Visual hierarchy is a good design idea, but it's accomplished in the CSS, not in properly semantic HTML.
Keep parent-child relationships aligned with appropriate elements as components.
This means, for example, a table/ element contains only <tr/> <td/> and other table-specific child elements.
A ul/ element does not wrap paragraphs or headings, only <li> elements would be its direct children. A list item may possibly contain an img/ element to place an image in the list if content needs call for it, but be always mindful of appropriate syntax for parent-child relationships.
When in doubt, consult those linked resources.
Watch your paths — full HTTP, relative, and full relative paths.
For a link <a href="path"> and <img src="path"> values, use either full HTTP paths for off-site URLs, or for URLs on the current site use either relative or full relative paths to local URLs.
Full HTTP path includes the external domain and full path to the resource:
href="http://domain.com/folder/subfolder/filename.html"
Relative path starts from the HTML file's current position and gives the path from there. A relative path to an image file in a folder one step down the hierarchy would look like src="images/filename.jpg". A relative path to a CSS file one step upward in the folder hierarchy would look like href="../style.css"
A full relative path gives the entire path from the root folder to the local resource. If all CSS files were stored together in a single subfolder under the root — a good practice, because it keeps the path simple and well-known, so you don't waste debugging time on it — you would see something like href="/css-files/style.css".
Markup all content in the file.
Don't leave any text without proper HTML tagging to express its role in the page.
Add <!-- comments --> liberally throughout your code.
Use comments to explain decisions you made & your intentions with your HTML. This gves you a good reminder when you return to the code and it also provides guidance to anyone else who has to maintain your code.
Plus it helps me understand where you were going with your work, so I can give better feedback.

CSS Pointers

As for hyperlink anchor tags and image tags, watch your CSS file paths.
Carefully structure your paths to get your <link href="path"/> pointed to the right place.
An external CSS file includes no HTML markup, such as a <style> tag.
That file can be linked to apply consistent styling to multiple pages on the same site.
Internal CSS is contained in a <style/> element within the <head/> element.
That styling applies only on the current page.
If you find yourself adding the same internal <style/> tags on multiple pages, move that styling to an external CSS file and link it instead.
Inline styling is used as minimally as possible to style a single element on a single page.
e.g.: <p style="font-weight: bold;">
If you find yourself applying the same inline CSS to multiple, similar elements on a page, add class="some-class" or id="some-id" attributes on those elements and provide internal or external style rules referencing those attribute values.
Pay close attention when referencing our favorite information tools to the supported values for each CSS property.
If you use a non-standard value on a CSS property, your CSS will fail.
VS Code is helpful here when it offers contextual suggestions as you type the CSS property name, so keep an eye on these.