HTML5

HTML5

1. Elements

   • sdf
   • There is a lot a specific tags for HTML5 including article, audio canvas, among others.  https://learning.edx.org/course/course-v1:IBM+CAD101EN+2T2020/block-v1:IBM+CAD101EN+2T2020+type@sequential+block@46dc01dbdf614f19afed2fa541142c9f/block-v1:IBM+CAD101EN+2T2020+type@vertical+block@d29d511c4d5c413db65ab3f97b04c7dc
   • Structural Elements
     • HTML5 uses division-based page layouts. Separates areas in a document into divisions (Use the <div>tag) Provides flexible control for applying a style to parts of a document. Division-based layouts help separate style from content. 
     • <article>: Represents an independent item of content that can logically stand alone. Examples: newspaper article, user comments, blog entries. Can be used with <time pubdate> attribute to provide a publication date for the article <section>: Represents a generic section of a document, for example chapters of a book. Typically accompanied with a heading
     • <header>: Defines the header information for a page. Can be used for section table of contents or to wrap navigational links or logos. : Defines the text at the bottom of the page. Can be used for copyright information.
   • Grouping Elements
     • <aside>: Defines a block of code that is displayed aside from the other content. Content that is tangentially related to the main discussion. Can be used for cautions, notes, or to wrap navigational links. : Defines a self-contained element referred to from the main content. Can be used to annotate graphics, photos, code segments, and so on. Could be moved to an appendix without affecting the flow of the document : Defines the caption for the contents of the figure element.
   • Navigational Elements
     • <nav>: An area where navigational links are placed into.

2. Input

   • <input type = "color"/>: In Google Chrome you will a palette. For non-supporting browser you will a text box where you can write a valid color. : A date (year, month, day) with no time zone. GC shows a dropdown calendar. datetime is pretty much the same but with the time. : acepts only email valid format.
   • <input type = "number" min = "5" max = "10">: Number input that can be put with maximum and minimum values. : Can be used for a range of values, shows only a slider in GC, must use JavaScript to show the value.
   • Among others: Tel: you are gonna need to put the format that you want Datalist: tag that includes an option list (not mandatory just suggestions that can be autocompleted) Shown as a dropdown list. Placeholder: Used to provide an example of the input format. Does not actually send the placeholder as input. Example: (.Shown in a lighter shade
   • Required: indicates that the field is required. ex: <input type ="email" required >.