HTML Tags (Body)

• Headings

  There are 6 levels of headings

  h1

  h2

  h3

  h4

  h5

  h6

• Paragraphs

  <p> One or more sentences that make part of the content on a webpage </p>

  You can have as many paragraphs as you need

• Bold or Strong?

  Use <b> when you want to give <b>visual</b> contrast

  University of Miami colors are green and orange

  
  

  Use <strong> when you want to give <strong>importance</strong> to part of the paragraph

  If someone rings the doorbell do not open the door

• Italic or Emphasis?

  Use <i> when you want to give an <i>alternate voice or mood</i>

  The words in italic are usually represented with cursive fonts.

  
  

  Use <em> when you want to give <em>emphasis</em> to a word

  Turn off your phone NOW.

• Blockquote / Cite

  Blockquote Defines a section that is quoted from another source

  Cite describes a reference to a cited creative work, and must include the title of that work

  To be, or not to be, that is the question

  from Hamlet, spoken by Hamlet

• Hyperlinks

  Are used to link to other pages inside or outside your website.

  <a href="http://google.com"> Go to Google</a>

  
  

  Go to Google

More HTML Tags (Body)

• Bulleted lists

  They are calle Unordered Lists and have 2 elements:

  • • The List Container
  • • The list items

  Lists can be nested by creating another ul tag inside a li

  <ul>
    <li> Item 1 </li>
    <li> Item 2 </li>
  </ul>
                  

• Numbered List

  They are calle Ordered Lists and have 2 elements:

  1. 1. The List Container
  2. 2. The list items

  Lists can be nested by creating another ul tag inside a li

  <ol>
    <li> Item 1 </li>
    <li> Item 2 </li>
  </ol>
                  

• Address

  Use <adress> when you want to give contact information
  <address>
  Your Name
  Your Address
  Phone Number
  Email
  </address>

  
  

• Line Breaks

  Sometimes you just need a break...

  
  

  Your Name <br>
  Your Address <br>
  Phone Number <br>
  Email <br>
  

• Code Comments

  Comments are not displayed in the browser but you can see them on the source code

  
  

  It starts with <! –– and the comment closes with -->

• Horizontal Ruler

  Sometimes you need a line to separate content

  ---

  Use <hr> to add a break between sections

• Images

  
  

  <img src="images/myImage.png" alt="add description here" width="50" height="50"/>

  The image size can be given here or in the css. If you give the width only, the height will be calculated proportionally.

  
  

  You can add links to images wrapping them with an "a" tag

• Figure / Figcaption

  Use <figure> to represent self-contained content with an optional caption. This content can be moved away without affecting the content's meaning.
  Commonly used for images.

  
  

  Use <figcaption> to add a caption to the image or figure content.

  
  

  

• iframe

  Use <iframe> when you want to embed external content into your website</iframe>

  
  

• iframe

  Use <iframe> when you want to embed external videos into your website</iframe>

  
  

• Video

  Are used to embed locally hosted videos.

  <video width="320" controls> <source src="../static/video/hd0992.mp4" type="video/mp4"> Sorry, your browser doesn't support embedded videos. </video>

• Audio

  The audio tag is used to embed sound content in websites.

  <audio controls src="../static/audio/Visionary-WVM011601.mp3"> Your browser does not support the <code>audio</code> element.

Last One..

• Tables

  Are used to display tabular data. Do not use for display. They have three main elements: Table Headings, Table Rows and Table Data.

  This is a Table Heading
  Table Cell	Another table cell
  Table Cell	Another table cell
  Table Cell	Another table cell
  Table Cell	Another table cell

  <table>
    <tr>
    <th> table heading </th>
    </tr>
    <tr>
      <td> Table Cell </td>
      <td> Another table cell </td>
    </tr>
    <tr>
      <td> Table Cell </td>
      <td> Another table cell </td>
    </tr>
  </table>