Jake Selvidio
Art & Design Instructor

gd260 « Web Design 1 » html tags

Be sure to familiarize yourself with the following elements as you will need them routinely throughout the quarter.

Element Description / Usage
<h1> Heading
  • Headings can be tagged h1 through h6. H1 is your biggest and boldest heading and should only be used once per page
  • Use headings to establish information hierarchy
  • Don't skip heading levels

  • <h1>Largest Heading</h1>
    <h6>Smallest Heading</h6>
    <p> Paragraph
    This is a paragraph.
    <img> Image
    Use this self-closing tag to embed images. An img tag needs the src attribute to indicate where the image is located.
    <img src="images/photo.jpg">
    <a> Anchor (link)
    Anchor tags are used to create hyperlinks. The destination URL is set using the href (hypertext reference) attribute.
    <a href="http://www.twitter.com/">Click here to visit Twitter</a>
    An <img> tag can be used in place of text...
    <a href="http://www.twitter.com/"><img src="images/twitter-logo.jpg"></a>
    <br> Line Break
    Use this self-closing tag to force a line break or a "soft return."
    <hr> Horizontal Rule
    Horizontal line that spans the width of the available space.
    <strong> Bold Text
    This newer semantic markup is preferred over <b> tags in modern browsers.
    <em> Emphasis (italics)
    This newer semantic markup is preferred over <i> tags in modern browsers.
    <address> Contact Information
    <blockquote> Blockquote
    A section quoted from another source.
    <div> Div (short for "Division")
    Div tags are used to create generic block-level sections of content. Add a class or id attribute to better define your section and to add a hook for your CSS.
    <span> Span
    Span is a generic inline element used to wrap content without disrupting the static layout.
    <ul>, <ol>, <dl> Unordered List, Ordered List, Description List
    Used together with <li> (List Item) tags to create bulleted or numbered lists. Commonly used to create navigation menus as well.
    <!-- comment --> HTML Comment
    Insert comments into your markup.

    To read more about HTML Elements visit W3Schools HTML Quicklist

     

    New HTML5 Elements

    Element Description / Usage
    <article> Defines an article
    <section> Defines a section in a document
    <nav> Defines navigation links
    <header> Defines a header for a document or section
    <footer> Defines a footer for a document or section
    <aside> Defines content aside from the page content
    <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
    <figcaption> Defines a caption for a <figure> element
    <mark> Defines marked/highlighted text
    <time> Defines a date/time
    <details> Defines additional details that the user can view or hide
    <summary> Defines a visible heading for a <details> element
    <audio> Defines sound content
    <video> Defines a video or movie
    <source> Defines multiple media resources for <video> and <audio>
    <embed> Defines a container for an external application or interactive content (a plug-in)
    <track> Defines text tracks for <video> and <audio>

    To read more about HTML5 New Elements visit W3Schools HTML5 New Elements

    Copyright © 2014 Jake Selvidio. All rights reserved.