Web Dev 1 - HTML 5

HTML 5 Notes

  • In HTML5, we don’t have to add / at the end of a self-closing tag.
  • <DOCTYPE html> is required to be at the top of any HTML 5 document.
  • In Chrome, use the shortcut CTRL + CMD + U to open the page source code.
  • In Chrome, press F12 to open the inspection.
  • Comment format: <!— anything you want to comment —>
  • Some tags are block level. Some are inline.
  • <strong> is better than <bold> because ‘strong’ is semantic, and ‘bold’ is not semantic at all. You can always change your definition of ‘strong’ but ‘bold’ is just ‘bold’.
  • Add the attribute target="_blank" to open the link using a new tab, without closing the original one.
  • An HTML5 table consists of two parts, namely, <thead> and <tbody>.
    • In <thead>, a row is created by <tr> and an individual cell is wrapped in the <th>.
    • In <tbody>, a row is also created by <tr>, but the individual cell is wrapped in the <td>.
  • Using <table> for layouts is not recommended anymore.
  • Forms have attributes ‘action’ and ‘method’, which are for advanced server-side programming.
  • You can create an input using
    <label>First Name</label>
    <input type=“text” name=“first-name”>
    • Note that ‘name’ is also for server side programming.
  • Use <br> to create a horizontal break.
  • Use <hr> for a divide line.
  • For <input> of emails, in HTML5, set the ‘type’ of <input> to ‘email’. This adds a little bit validation without any JS.
  • For a dropdown, you use <select> and the options are wrapped in <option>.
    • Each option should have a ‘value’ attribute.
  • For a date input, change the ‘type’ of <input> to ‘date’.
  • For a number input, change the ‘type’ of <input> to ‘number’.
  • Using ‘placeholder’ in HTML5 can allow you to put some default text in a form element. By typing new contents, the placeholder will go away. This was done by JS, but now can be done with a simple tag.
  • To make a submit for a form, add <input> of type ’submit’. If you want to change the default value of the submit, add a value to set the default text.
  • <button> does not submit the form by default. This is simply a button. <button>Click me</button>
  • <img> is a self-closing tag.
  • There are several kinds of quotation:
    • <blockquote> has an attribute ‘cite’, and the contents in the black quote will be displayed with a little bit of style.
      • The ‘cite’ is not displayed. It is only visible if you see the source page.
    • <abbr> is for abbreviations. For example, WWB is an abbreviation of World Wide Web. You would create wrap ‘WWB’ with <abbr> tag. The attribute ‘title’ is the full name of the abbreviation.
      • Example: The <abbr title="WorldWideWeb">WWW</abbr>
      • When you hover over it, you can see the whole title.
    • The content in a <cite> will be displayed in italic font by default, but you can change it if you want. This is semantic.

HTML5 Semantic Tags

The HTML5 standard: https://html.spec.whatwg.org/multipage/

  • The <section> element defines a section in a document.

    • According to W3C’s HTML5 documentation: “A section is a thematic grouping of content, typically with a heading.”
    • A home page could normally be split into sections for introduction, content, and contact information.
  • The <article> element specifies independent, self-contained content.

    • An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.
      • Examples of where an <article> element can be used:
      • Forum post
      • Blog post
      • Newspaper article

PDF Version