Skip to content

Latest commit

 

History

History
120 lines (99 loc) · 4.36 KB

level-6-summary.md

File metadata and controls

120 lines (99 loc) · 4.36 KB

CheatSheet 🚀

Here is the sumarization of all tags & Attributes you will see in use in HTML & HTML5

HTML tags for text

  • <p> - Paragraph
  • <span> - Span
  • <div> - Div
  • <a> - Anchor
  • <img> - Image
  • <br> - Break
  • <hr> - Horizontal rule
  • <b> - Bold
  • <i> - Italic
  • <u> - Underline
  • <strong> - Strong
  • <em> - Emphasis
  • <code> - Code
  • <pre> - Preformatted text

HTML tags for lists

  • <ul> - Unordered list
  • <ol> - Ordered list
  • <li> - List item

HTML tags for tables

  • <table> - Table
  • <tr> - Table row
  • <td> - Table cell

HTML tags for forms

  • <form> - Form
  • <input> - Input field
  • <textarea> - Text area
  • <select> - Select box
  • <option> - Option
  • <button> - Button

HTML tags for images

  • <img> - Image
  • <source> - Source
  • <picture> - Picture
  • <video> - Video

HTML tags for scripts

  • <link> - Link
  • <meta> - Meta
  • <link rel="stylesheet"> - Stylesheet
  • <link rel="icon"> - Icon

HTML tags for meta tags

  • <script> - Script
  • <script src="script.js"></script> - Script with src
  • <script async src="script.js"></script> - Script with async and src
  • <script defer src="script.js"></script> - Script with defer and src
  • <script type="module" src="script.js"></script> - Script with type module and src

HTML tags for media

  • <meta charset="utf-8"> - Charset
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> - Viewport
  • <meta name="description" content="Description"> - Description
  • <meta name="author" content="Author"> - Author
  • <meta name="keywords" content="Keywords"> - Keywords
  • <meta name="robots" content="index, follow"> - Robots
  • <meta name="googlebot" content="index, follow"> - Googlebot

HTML5 attributes

Some examples of HTML5 attributes are:

  • autofocus - Adds an autofocus attribute to an input field
  • required - Adds a required attribute to an input field
  • readonly - Adds a readonly attribute to an input field
  • section - Adds a section attribute to a section element
  • footer - Adds a footer attribute to a footer element

footer, section, and header are new HTML5 attributes. They are used to define the structure of a web page. Fundamentally, they are used to group related content together, just like the <div> tag is used to group related content together.

HTML5 tags

  • <header> - Header
  • <footer> - Footer
  • <nav> - Navigation
  • <main> - Main
  • <article> - Article
  • <section> - Section
  • <aside> - Aside
  • <details> - Details
  • <summary> - Summary
  • <time> - Time
  • <mark> - Mark
  • <meter> - Meter
  • <progress> - Progress
  • <video> - Video
  • <audio> - Audio
  • <source> - Source

ID and Class

  • # - Inserts an id attribute

  • . - Inserts a class attribute Example:

  • #my-id - Inserts an id attribute with the value my-id

  • .my-class - Inserts a class attribute with the value my-class

Grouping

div>(header>ul>li*2>a)+footer>p - Inserts a <div> tag with a <header> tag inside it, a <ul> tag inside it, and 2 <li> tags inside the <ul> tag. Then it inserts an <a> tag inside each <li> tag. Finally it inserts a <footer> tag and a <p> tag inside it.

Yep, it can go little bit crazy. But you don’t have to worry about it. Rarely you will need to use it.

CSS shortcuts

  • style - Inserts a <style> tag
  • pos - Inserts a position property
  • pos:absolute - Inserts a position property with the value absolute
  • bgc - Inserts a background-color property
  • bgc:red - Inserts a background-color property with the value red
  • ma - Inserts a margin:auto property

Conclusion

You don’t need to do a PhD in HTML to be a web developer. You just need to know the basics and get out of here ASAP. HTML5 just adds a few new tags and attributes to HTML. Rest all the stuff like Web APIs (local storage, session storage, etc.) are just JavaScript stuff. You can learn them later.