Previously:


  • HTML5 Browser Compatibility
  • HTML 5 Media Tags
  • Semantic HTML Tags
  • <style> Tag


Today:


  • Laying out Semantic HTML
  • Semantic Tag Attributes
  • Semantic Text Formatting Tags
  • HTML Forms





LIST of Semantic HTML LAYOUT ElEMENTS

  • article
  • aside
  • details
  • figcaption
  • figure
  • footer
  • header
  • nav
  • section


LIST of NON-Semantic HTML LAYOUT ELEMENTS

  • br -> text line break
  • div -> generic container of content
  • span -> small container of content



LIST of Semantic HTML LAYOUT ElEMENTS

Some rules:

Footer can't exist inside a Footer, or Header

Header can't exist in a Header, or Footer

You can use Section inside an Article Element

Can have multiple Footers or Headers in a Document

Cannot User Footers or Headers to section content





LIST of Semantic HTML ATTRIBUTE SELECTORS

  • id
  • class
  • role


 CSS 'display' property helps control layout



Pre-visualize the document layout



Pre-visualize the document layout

LIST of Semantic HTML TEXT FORMATTING

  • abbr
  • address
  • blockquote
  • cite
  • del, ins
  • dfn
  • dl
  • dt
  • mark
  • em, strong
  • small
  • sup, sup
  • time

HTML FORMS ARE USED TO PASS DATA TO A SERVER


                           <form>

                                           .

                                           .
                                     
     < input   elements>
                                           .

                                           .

                         </form>

LIST of FORM ATTRIBUTES

  • action
  • autocomplete
  • enctype
  • method
  • name
  • target

LIST of INPUT ATTRIBUTES

  • autocomplete
  • checked
  • height, width
  • name
  • placeholder
  • required
  • value
  • type

LIST of HTML FORM INPUT TYPES

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
Made with Slides.com