Scribd Logo
Upload

Welcome to Scribd!

  • HTML5 Cheat Sheet - MikkeGoes PDF

    Uploaded by

    Alan
    78 views11 pages

    Original Title

    HTML5 Cheat Sheet - MikkeGoes.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    78 views11 pages

    HTML5 Cheat Sheet - MikkeGoes PDF

    Uploaded by

    Alan

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 11

    Learn Front-End Web Development:

    HTML5
    CHEAT
    SHEET

    mikkegoes.com
    What Is HTML?
    HTML stands for HyperText Markup Language. It is the standard markup language
    for creating web pages. HTML defines and describes the structure of a web page.

    Just like you see headings, paragraphs, lists, quotes, and sections in a magazine,
    HTML helps you organize your web page with a logical structure in a similar way.

    HTML stands for HyperText Markup Language.


    It was released in 1993.
    HTML describes the structure of a web page, dividing the page into sections and
    series of elements.
    HTML elements tell the web browser how to display the content.
    But: It doesn’t style the content. (That is what CSS, Cascading Style Sheets are for.)

    How to Create an HTML File


    To create an HTML file, you need to use a code or text editor and save your file with
    the extension .html. You can open your file in your web browser to see the output of
    your HTML markup.

    Please note: You can’t use standard text processors like Google Docs or MS Word for
    this. They don’t output clean HTML markup code.

    Here are a few popular text editors:


    Brackets
    Notepad++
    VS Code
    Sublime Text
    Atom

    Please note: This freebie contains affiliate links to products I use and recommend. If you choose to purchase
    using these links, I may receive a small commission for referring you. But please, only buy products you
    believe will help you achieve your goals faster. Thank you for your support!

    mikkegoes.com
    HTML Tags
    HTML elements are represented by tags, which are characters you place inside
    angled brackets, < and >. Browsers do not display the HTML tags, but use them to
    render the content of the page.

    Each tag is like a container for HTML code. HTML tags label pieces of content such as
    "heading", "paragraph", "table", and so on.

    Most tags come in pairs: an opening tag denotes the start of an element, a closing
    tag ends it. However, some tags are self-closing and they don’t need a closing tag.

    <p> </p>
    OPENING TAG CLOSING TAG

    Opening tags often carry attributes. They allow you to add even more information
    about the contents of an element. Each attribute requires a name and a value.

    mikkegoes.com
    HTML Document: A Simple Example

    Defines this document to be HTML5


    <!DOCTYPE html>
    The root element of an HTML page
    <html>
    Meta information about the document
    <head>
    Specifies a title for the document
    <title>Page Title</title>
    </head> 
    Contains the visible page content
    <body>
    Defines a large heading
    <h1>Your Main Heading</h1>
    Defines a paragraph
    <p>The first paragraph.</p>
    Defines a sub-heading
    <h2>Your first Sub-Heading</h2>
    <p>The second paragraph.</p>
    </body>
    </html>

    mikkegoes.com
    Common HTML Elements

    DOCUMENT OUTLINE LINKS

    <!DOCTYPE> Version of HTML <a href=""> Page link


    <html> HTML document <a href="mailto:"> Email link
    <head> Page information <a href="#name"> Anchor link
    <body> Page contents

    IMAGES
    PAGE INFORMATION
    <img src="" /> Image

    <title> Document title


    <style> Style resource
    FORMS
    <script> Script resource

    <form> Form
    HEADINGS, TEXT, FORMATTING <fieldset> Collection of fields
    <label> Input label
    <h1> ... <h6> Headings <input /> Form input
    <p> Paragraph <select> Group of options
    <br /> Line break <option> Drop-down options
    <hr /> Horizontal line <textarea> Large text input box
    <b> or <strong> Bold <button> Button
    <i> or <em> Italic
    <u> Underline
    TABLES
    <sup> Superscript
    <sub> Subscript
    <table> Table
    <del> Struck out / Deleted
    <caption> Caption
    <thead> Table header
    LISTS <tbody> Table body
    <tfoot> Table footer
    <ol> Ordered list <col /> Column
    <ul> Unordered list <tr> Table row
    <li> List item <th> Header cell
    <td> Table cell

    mikkegoes.com
    New HTML5 Elements

    NEW STRUCTURAL/SEMANTIC ELEMENTS

    <article> An article in the document

    <aside> Content aside from the page content

    <bdi> Part of text that might be formatted in a different direction from other text
    outside it

    <details> Additional details that the user can view or hide

    <dialog> A dialog box or window

    <figcaption> A caption for a <figure> element

    <figure> Self-contained content like diagrams, illustrations, etc.

    <footer> A footer for the document or section

    <header> A header for the document or section

    <main> The main content of the document

    <mark> Marked or highlighted text

    <menuitem> A menu item that user can invoke from a pop-up menu

    <meter> A scalar measurement within a known range (a gauge)

    <nav> Navigation links

    <progress> Represents the progress of a task

    <rp> An explanation of characters (for East Asian typography)

    <ruby> A ruby annotation (for East Asian Typography)

    <section> A section in the document

    <summary> A visible heading for a <details> element

    <time> A date/time

    <wbr> A possible line-break

    mikkegoes.com
    New HTML5 Elements

    NEW MEDIA ELEMENTS

    <audio> Sound or music content

    <embed> Containers for external non-HTML applications (like plug-ins)

    <source> Multiple media resources for <video> and <audio> elements

    <track> Text tracks for <video> and <audio> elements

    <video> Video or movie content

    NEW GRAPHICS TAGS

    <canvas> Graphic drawing using Javascript

    <svg> Draw scalable vector graphics

    NEW FORM ELEMENTS

    <datalist> Predefined options for input controls

    <output> The result of a calculation

    mikkegoes.com
    HTML5 Semantic Elements: Page
    Structure
    HTML5 offers a few new semantic elements to define different parts of the web page.
    You can use these semantic elements instead of creating <div> elements for your
    header, navigation, or footer.

    <body>

    <header>

    <nav>

    <article> <aside>

    <section>

    <section>

    <section>

    <footer>

    mikkegoes.com
    Learn HTML Online

    Codecademy.com freeCodeCamp.org

    "HTML & CSS" "Basic HTML and HTML5"

    Udemy Udemy

    "The Complete Web "The Web Developer


    Developer Course 2.0" Bootcamp"

    Team Treehouse w3schools.com

    "Introduction to HTML "HTML Tutorial"


    and CSS"

    mikkegoes.com
    Find more free resources
    for learning to code:

    Read the blog:

    TO THE BLOG

    Find more courses:

    COURSES

    Browse useful resources:

    RESOURCES

    mikkegoes.com
    Thanks for reading!

    I hope you found this little cheat sheet helpful.


    Let me know what you are building with it!

    Good luck with your HTML projects!

    Cheers,
    - Mikke

    Come say hi!

    mikkegoes.com

    You might also like