Grant's Dev Tools

HyperText Markup Language (HTML) is a markup language used to define the structure of web pages. This structure helps users understand the content of a web page. A web page can contain many different types of content, including headings, sub-headings, text, sections, images, audio, video, block quotes, code snippets, lists, and links.

<html>
<body>
  <h1> This is the Main Heading </h1>
  <p> This is some basic text. </p>
  <h2> This is a Sub-Heading </h2>
  <p> This is more basic text. </p>
</body>
</html>

HTML Syntax

Understanding HTML Code

HTML elements are characters that live inside angled brackets, and are usually made up of two HTML tags - an opening tag and a closing tag.

HTML elements tell the browser something about the information between the two tags, like if the information is a header, a block of code, or just plain text.

HTML elements have attributes, which provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.

<!-- HTML elements contain two HTML tags and information between them -->

<p> This will appear as basic text. </p>

<!-- Attributes contain extra information about HTML elements -->

<p lang="en-us"> This paragraph is in english. </p>
<p lang="en-fr"> Ce paragraphe est en français. </p>

Block vs. Inline Elements

<!-- Grouping elements within a block -->

<div>
  <h1> Parrots </h1>
  <img src="images/parrots.jpeg" />
</div>

<!-- Grouping elements inline -->

<p> This is some random text <span style="color:red;"> but this text is red </span></p>.

Global Attributes - ID and Class

id is short for "identifier" and represent a unique element (each element can have its own id, but there can only be one unique id per page)

class is short for "classification" and represents a group of elements (each element can have its own class, and there can be multiple elements with the same class per page)

<!-- ID (Unique Element) -->

<h1 id="unique_heading"> Unique Heading </h1>

<!-- Class (Several Elements) -->

<h1 class="cool_headings"> Cool Heading </h1>

<!-- Adding Several Classes for One Element -->

<h1 class="cool_headings uppercase red"> Cool Uppercase Red Heading </h1>

HTML Elements

Common HTML Elements

<!-- DOCTYPES -->

<!DOCTYPE html>

<!-- HTML Code -->

<html></html>

<!-- Header Information (not shown in the main browser window, contains information about the page) -->

<head></head>

<!-- Meta Information (lives in the header) -->

<meta name="description" content="An Essay on Installation Art" />
<meta name="keywords" content="Installation, Art, Opinion" />
<meta name="robots" content="nofollow" />
<meta http-equiv="author" content="John Smith" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="Fri, 04 Apr 2014 23:59:59 GMT" />

<!-- Page Title (lives in the header) -->

<title></title>

<!-- Body (shown inside the main browser window) -->

<body></body>

HTML5 Elements

<!-- Headers and Footers -->

<header></header>

<footer></footer>

<!-- Navigation -->

<nav> </nav>

<!-- Articles -->

<article></article>

<!-- Asides -->

<aside></aside>

<!-- Sections -->

<section></section>

<!-- Heading Groups -->

<hgroup></hgroup>

<!-- Figures -->

<figure>
  <img src="images/quokka.jpg" alt="A family of quokka" />
  <figcaption> A family of quokka. </figcaption>
</figure>

<!-- Sectioning Elements -->

<div></div>

<!-- Linking Block-Level Elements -->

<a href="introduction.html">
  <article>
    <p> Introduction </p>
  </article>
</a>

<!-- Conditional Comments / HTML Shivs -->

<!-- [if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Text

<!-- Headings -->

<h1> H1 </h1>
<h2> H2 </h2>
<h3> H3 </h3>
<h4> H4 </h4>
<h5> H5 </h5>
<h6> H6 </h6>

<!-- Paragraph Text -->

<p> General text </p>

<!-- Different Styles -->

<b> Bold </b>
<i> Italic </i>
<sup> Superscript </sup>
<sub> Subscript </sub>

<!-- Breaking Text -->

<br />
<hr />

<!-- Semantic Markup -->

<strong> Strong </strong>
<em> Emphasized </em>
<blockquote> A Block Quote </blockquote>
<q>A Quote in Quotations</q>
<abbr title="National Aeronautics and Space Administration"> NASA </abbr>
<cite> A Brief History of Time </cite>
<dfn> Defining Instance </dfn>
<address> 1234 Smith Lane, Denver, CO 80202 </address>
<ins> New Text </ins>
<del> Deleted Text </del>
<s> More Deleted Text </s>

Lists

<!-- Unordered Lists -->

<ul>
  <li> Unordered List Item </li>
  <li> Unordered List Item </li>
  <li> Unordered List Item </li>
</ul>

<!-- Ordered Lists -->

<ol>
  <li> Ordered List Item </li>
  <li> Ordered List Item </li>
  <li> Ordered List Item </li>
</ol>

<!-- Definition Lists -->

<dl>
  <dt> Term </dt>
  <dd> Definition of the term. </dd>
  <dt> Term </dt>
  <dd> Definition of the term. </dd>
</dl>

<!-- Nested Lists -->

<ol>
  <li> Ordered List Item </li>
  <li> Ordered List Item
    <ul>
      <li> Unordered List Item </li>
      <li> Unordered List Item </li>
      <li> Unordered List Item </li>
    </ul>
  </li>
</ol>

Links

<!-- Links to External Sites (Absolute URLs) -->

<a href="http://www.imdb.com"> IMDB </a>

<!-- Links to Other Pages on the Same Site (Relative URLs) -->

<a href="reviews.html"> Reviews </a>
<a href="music/listings.html"> Listings </a>
<a href="movies/dvd/reviews.html"> Reviews </a>
<a href="../index.html"> Home </a>
<a href="../../index.html"> Home </a>

<!-- Absolute URLs from the Root of the Page -->

<a href="/company/index.html"> Company Home </a>

<!-- Email Links -->

<a href="mailto:grant@example.org"> Email Grant </a>

<!-- Opening Links in a New Window -->

<a href="http://www.imdb.com" target="_blank"> IMDB </a>

<!-- Linking to Specific Parts of the Same Page -->

<a href="#top"> Top of Page </a>

<!-- Linking to Specific Parts of Different Pages -->

<a href="http://www.dinosaurs.com/dinosaurs/#pterodactyls"> Pterodactyls </a>
<a href="movies/dvd/reviews.html#james_bond"> James Bond Review </a>

<!-- Linking Block-Level Elements -->

<a href="introduction.html">
  <article>
    <p> Introduction </p>
  </article>
</a>

<!-- Linking Block-Level Elements -->

<a href="introduction.html">
  <article>
    <p> Introduction </p>
  </article>
</a>

<!-- Image Links -->

<a href="./index.html">
  <img src="./assets/images/Commit_Buddy.png" alt="Commit Buddy Title" />
</a>

Buttons

<!-- A Button is a Form Element -->

<form action="/subscribe.php" method="post">
  <!-- <input type="submit" value="Submit"> -->
  <input type="text" name="username" size="15" maxlength="30" />
  <button type="button"> Button </button>
  <button type="reset"> Reset </button>
  <button type="submit"> Submit </button>
</form>

<!-- Buttons Can Contain Stuff -->

<button>
  <img src="tiny_birthday_cake.png" alt="">
  Submit
</button>

<!-- Buttons Can Utilize JavaScript -->

<button id="copyButton" onclick="copyToClipboard()"> Copy </button>

<!-- However, this is not recommended. Use JavaScript with event listeners instead. -->

Images

<!-- Adding Images -->

<img src="images/quokka.jpg" alt="A family of quokka" title="The quokka is an Australian marsupial that is smaller in size to the domestic cat." />

<!-- Height and Width -->

<img src="images/quokka.jpg" alt="A family of quokka" height="600" width="450" />

<!-- Figure and Figure Caption -->

<figure>
  <img src="images/otters.jpg" alt="Photograph of two sea otters sitting in water" />
  <br />
  <figcaption> Sea otters hold hands when they sleep so they don't drift away from each other. </figcaption>
</figure>

Tables

<!-- Basic Table Structure -->

<table>
  <tr>
    <td> 15 </td>
    <td> 15 </td>
    <td> 30 </td>
  </tr>
  <tr>
    <td> 45 </td>
    <td> 60 </td>
    <td> 45 </td>
  </tr>
  <tr>
    <td> 60 </td>
    <td> 90 </td>
    <td> 90 </td>
  </tr>
</table>

<!-- Table Headings -->

<table>
  <tr>
    <th></th>
    <th scope="col"> Saturday </th>
    <th scope="col"> Sunday </th>
  </tr>
  <tr>
    <th scope="row"> Tickets Sold: </th>
    <td> 120 </td>
    <td> 135 </td>
  </tr>
  <tr>
    <th scope="row"> Total Sales: </th>
    <td> $600 </td>
    <td> $675 </td>
  </tr>
</table>

<!-- Spanning Columns -->

<table>
  <tr>
    <th></th>
    <th> 9am </th>
    <th> 10am </th>
    <th> 11am </th>
    <th> 12am </th>
  </tr>
  <tr>
    <th> Monday </th>
    <td colspan="2"> Geography </td>
    <td> Math </td>
    <td> Art </td>
  </tr>
  <tr>
    <th> Tuesday </th>
    <td colspan="3"> Gym </td>
    <td> Home Ec </td>
  </tr>
</table>

<!-- Spanning Rows -->

<table>
  <tr>
    <th></th>
    <th> ABC </th>
    <th> 1BBC </th>
    <th> CNN </th>
  </tr>
  <tr>
    <th> 6PM - 7PM </th>
    <td rowspan="2"> Movie </td>
    <td> Comedy </td>
    <td> News </td>
  </tr>
  <tr>
    <th> 7PM - 8PM </th>
    <td> Sport </td>
    <td> Current Affairs </td>
  </tr>
</table>

<!-- Long Tables -->

<table>
  <thead>
    <tr>
      <th> Date </th>
      <th> Income </th>
      <th> Expenditure </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th> 1st January </th>
      <td> $250 </td>
      <td> $36 </td>
    </tr>
    <tr>
      <th> 2nd January </th>
      <td> $300 </td>
      <td> $50 </td>
    </tr>
    <tr>
      <th> 3rd January </th>
      <td> $800 </td>
      <td> $120 </td>
    </tr>
    <!-- Many Additional Rows -->
  </body>
  <tfoot>
    <tr>
      <td></td>
      <td> $1350 </td>
      <td> $206 </td>
    </tr>
  </tfoot>
</table>

Forms

<!-- Common Form Input Types -->

<input type="text">
<input type="password">
<input type="checkbox">
<input type="radio">
<input type="hidden">
<input type="button">
<input type="reset">
<input type="search">
<input type="submit">

<textarea> </textarea>

<select>
  <option> </option>
</select>

<!-- Time Input Types -->

<input type="date">
<input type="datetime-local">
<input type="month">
<input type="week">
<input type="time">

<!-- Contact Information Input Types -->

<input type="tel">
<input type="email">

<!-- Other Input Types -->

<input type="color">
<input type="file">
<input type="image">
<input type="number">
<input type="range">
<input type="url">

<!-- Form Structure -->

<form action="http://www.example.com/subscribe.php" method="get">
  <p> This text is inside a form. This is where the form controls will be. </p>
</form>

<!-- Text Input -->

<form action="http://www.example.com/login.php" method="get">
  <p> Username: </p>
  <input type="text" name="username" size="15" maxlength="30" />
</form>

<!-- Password Input -->

<form action="http://www.example.com/login.php" method="get">
  <p> Username: </p>
  <input type="text" name="username" maxlength="30" />
  <p> Password: </p>
  <input type="text" name="password" maxlength="30" />
</form>

<!-- Text Area Input -->

<form action="http://www.example.com/comments.php" method="get">
  <p> Comment: </p>
  <textarea name="comment" cols="20" rows="4"> Please enter a comment here. </textarea>
</form>

<!-- Radio Button Input -->

<form action="http://www.example.com/profile.php" method="get">
  <p> Please select your favorite genre:
    <input type="radio" name="genre" value="rock" check="checked"> Rock
    <input type="radio" name="genre" value="pop"> Pop
    <input type="radio" name="genre" value="jazz"> Jazz
  </p>
</form>

<!-- Checkbox Input -->

<form action="http://www.example.com/profile.php" method="get">
  <p> Please select your favorite music service(s):
    <input type="checkbox" name="service" value="itunes" check="checked"> iTunes
    <input type="checkbox" name="service" value="lastfm"> Last.fm
    <input type="checkbox" name="service" value="spotify"> Spotify
  </p>
</form>

<!-- Drop Down List / Select Box Input -->

<form action="http://www.example.com/profile.php" method="get">
  <p> What device do you listen to music on? </p>
  <select name="devices">
    <option value="ipod"> iPod </option>
    <option value="radio"> Radio </option>
    <option value="computer" selected="selected"> Computer </option>
  </select>
</form>

<!-- Multiple Select Box Input -->

<form action="http://www.example.com/profile.php" method="get">
  <p> What sports do you play? Please select all of the following that apply. </p>
  <select name="sports" size="5" multiple="multiple">
    <option value="football"> Football </option>
    <option value="soccer"> Soccer </option>
    <option value="tennis" selected="selected"> Tennis </option>
    <option value="baseball"> Baseball </option>
    <option value="track"> Track </option>
  </select>
</form>

<!-- File Input -->

<form action="http://www.example.com/upload.php" method="post">
  <p> Upload your song in MP3 format: </p>
  <input type="file" name="user-song" />
  <input type="submit" name="upload" value="Upload" />
</form>

<!-- Submit Input -->

<form action="http://www.example.com/subscribe.php">
  <p> Subscribe to our email list: </p>
  <input type="text" name="email" />
  <input type="submit" name="subscribe" value="Subscribe" />
</form>

<!-- Image Button Input -->

<form action="http://www.example.com/subscribe.php">
  <p> Subscribe to our email list: </p>
  <input type="text" name="email" />
  <input type="image" src="images/subscribe.jpg" width="100" height="20" />
</form>

<!-- Button and Hidden Controls -->

<form action="http://www.example.com/add.php">
  <button> <img src="images/add.gif" alt="add" width="10" height="10" /> Add </button>
  <input type="hidden" name="bookmark" value="lyrics" />
</form>

<!-- Labelling Form Controls -->

<label> Age: <input type="text" name="age" /> </label>
<br />
Gender:
<input id="female" type="radio" name="gender" value="female" />
<label for="female"> Female </label>
<input id="male" type="radio" name="gender" value="male" />
<label for="male"> Male </label>

<!-- Grouping Form Elements  -->

<fieldset>
  <legend> Contact Details </legend>
  <label> Email: <br />
  <input type="text" name="email" /></label><br />
  <label> Mobile: <br />
  <input type="text" name="mobile" /></label><br />
  <label> Phone: <br />
  <input type="text" name="phone" /></label>
</fieldset>

<!-- Form Validations -->

<form action="http://www.example.com/login/" method="post">
  <label for="username"> Username: </label>
  <input type="text" name="username" required="required" />
  <label for="password"> Password: </label>
  <input type="text" name="password" required="required" />
  <input type="submit" name="submit" value="Submit" />
</form>

<!-- Date Input -->

<form action="http://www.example.com/bookings/" method="post">
  <label for="departure"> Departure Date: </label>
  <input type="date" name="departure" />
  <input type="submit" name="submit" value="Submit" />
</form>

<!-- Email & URL Input -->

<form action="http://www.example.com/subscribe.php">
  <p> Please enter your email address: </p>
  <input type="email" name="email" />
  <input type="submit" name="submit" value="Submit" />
</form>

<form action="http://www.example.com/profile.php">
  <p> Please enter your website address: </p>
  <input type="url" name="website" />
  <input type="submit" name="submit" value="Submit" />
</form>

<!-- Search Button Input -->

<form action="http://www.example.com/search.php">
  <p> Search: </p>
  <input type="search" name="search" placeholder="Enter keyword" />
  <input type="submit" name="search" value="Search" />
</form>

iFrames

<!-- Blank iFrame -->

<iframe></iframe>

<!-- iFrames w/ Attributes -->

<iframe width="450" height="350" src="http://maps.google.co.uk/maps?q=moma+new+york&output=embed"></iframe>
<iframe width="450" height="350" src="http://maps.google.co.uk/maps?q=moma+new+york&output=embed" frameborder="0" scrolling="no" ></iframe>

Video and Audio

<!-- Video (One Source) -->

<!-- Options: preload="none", preload="auto", preload="metadata" -->
<video src="video/puppy.mp4" poster="images/puppy.jpg" width="400" height="300" preload controls loop autoplay>
  <p> A video of a puppy playing in the snow. </p>
</video>

<!-- Video (Multiple Sources) -->

<video poster="images/puppy.jpg" width="400" height="300" preload controls loop>
  <source src="video/puppy.mp4" type='video/mp4;codecs"avcl.42E01E, mp4a.40.2"' />
  <source src="video/puppy.webm" type='video/webm;codecs"vp8, vorbis"' />
  <p> A video of a puppy playing in the snow. </p>
</video>

<!-- Audio (One Source) -->

<!-- Options: preload="none", preload="auto", preload="metadata" -->
<audio src="audio/test_audio.ogg" preload controls loop autoplay>
  <p> This browser does not support our audio format. </p>
</audio>

<!-- Audio (Multiple Sources) -->

<audio controls autoplay>
  <source src="audio/test_audio.ogg" />
  <source src="audio/test_audio.mp3" />
  <p> This browser does not support our audio format. </p>
</audio>