Document Properties

  • We will use the HTML5 Doctype and HTML5 features

    <!DOCTYPE html>

    Do NOT include xml namespace in the document.

    <html xmlns="http://www.w3.org/1999/xhtml">

  • Character Encoding All markup should be delivered via the following HTML element as UTF-8, as it is the most friendly for internationalization.

    <meta charset="utf-8">

  • Responsiveness The following tag should be added in order to support mobile browsing.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • General Rules

    • Indentation

      Indentation should be 2 spaces for html files. Spaces should be used instead of tab.

    • Readability vs Compression

      We prefer readability over file-size savings when it comes to maintaining existing files. Plenty of whitespace is encouraged, along with ASCII art, where appropriate. There is no need for any developer to purposefully compress HTML or CSS, nor obfuscate JavaScript.

    • Markup and inline styling

      Markup defines the structure and outline of a document and offers a structured content. It is not intended to define the look and feel of the content on the page beyond rudimentary concepts such as headers, paragraphs, and lists. The presentation attributes of HTML have all been deprecated and style should be contained in style sheets. Inline styling should not be used, and should be minimized if its usage is really necessary.

  • General structure for HTML document

    <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>CS2103/T (Module website)</title>

  <!-- Sample stylesheet inclusion -->
  <link type="text/css" href="styles/common.css" rel="stylesheet">
</head>
<body>
  <!-- Body content goes here -->

  <!-- Sample javascript inclusion -->
  <script type="text/javascript" src="/js/jquery-minified.js"></script>
</body>
</html>

External Files

  • Each webpage should include it’s own css file if there is any, as well as the general css file.

  • Each webpage should include it’s own javascript file(if necessary), as well as the respective common.js and all the 3rd party js files.

Tags

  • All HTML tags are to be closed properly.

    Good Bad 
    <div>Stuff</div>
    		 
    <p>Stuff
<p>More Stuff

  • Void elements do not have a closing tag. Do not use /> for void elements. Example of void elements are: br, img, link, meta. The full list of HTML void elements can be accessed here.

    Good Bad 
    <br>
<img src="a" width="5px" height="10px">
    		 
    <br />
<img src="a" width="5px" height="10px" />

  • Use lowercase for all attributes and tag names.

    Good Bad 
    <div id="frame">Test</div>
    		 
    <DIV ID="frame">Test</div>

Attributes

  • Use [attr="value"] for attribute values.

    Good 
    <input value="computer" id="some-input" disabled="disabled" tabindex="2">
    Bad 
    <!-- single/no quotes -->
<input value=computer id='some-input' disabled='disabled' tabindex=2>
<!-- specify boolean variables in the attributes -->
<input value="computer" id="some-input" disabled tabindex="2">

Naming convention

  • Class
    See Css style guide for this section.

  • Id
    lower-case, join-by-hyphen.

    header-content-week3

Indentation

  • Indentation should be 2 spaces for html files.

  • Spaces should be used instead of tab.

Miscellaneous

  • Take note of script tags.

    Good 
    <script type="text/javascript" src="/js/jquery-minified.js"></script>
    Bad 
    <script language="JavaScript" src="/js/jquery-minified.js"></script>

  • Do not have trailing whitespaces between opening and closing tags. However, line breaks and indentation are encouraged if it enhances readability.

    Good Bad 
    <p>Student Name</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam,
</p>
    		 
    <p> Student Name </p>

  • Always remember to include rel="noopener noreferrer" when using target="_blank" in links.

    Rationale

    Leaving this out would enable attackers to get hold of window.opener object, which can be used to redirect to a malicious link. [Source]
    Good 
    <a target="_blank" rel="noopener noreferrer" href="https://example.com">
  Example.com
</a>
    Bad 
    <a target="_blank" href="https://example.com">
  Example.com
</a>