HTML CHART SHEET

The Complate HTML Chat Sheat​

For web Developers It is Crucial to be Profitcient in THML and while HTML is not the Most Difficult accustom to one can still  manage to forget all the nooks and cranies it has to offer. A good solution,therefore is to always have a chat sheet and hand help you in most Troubling moments.

Document summary​

Let us see how we can break the code upin different components:

<html> … </html>
This tag specifies that the webpage is written in HTML. It appears at the very first and last line of the webpage. It is mainly used to show that the page uses HTML5 – the latest version of the language. Also known as the root element, this tag can be thought of as a parent tag for every other tag used in the page.
<head> … </head>
This tag is used to specify meta data about the webpage. It includes the webpage’s name,its dependencies (JS and CSS scripts), font usage etc.
<title> … </title>
As the name suggests, this tag contains the title/name of the webpage. You can see this in your browser’s title bar for every webpage open in the browser. Search engines use this tag to extract the topic of the webpage, which is quiteconvenient when ranking relevant search results.
<body> … </body>
Everything the user sees on a webpage is writteninside this tag. It is a container for all the contents of the webpage.

Example

  • <html>
    <head>
    <title>My First Website</title>
    </head>
    <body>
    </body>
    </html

Document Information​

<base/>
Used to specify the base URL of your site,this tag makes linking to internal links on your site cleaner.<meta/>
This is the meta data tag for the webpage.Can be useful for mentioning the page’s author,keywords, original published date etc.
<link/>

This is used to link to scripts external to the webpage. Typically utilized for including stylesheets.

<style>……….</style>

The style tag can be used as an alternative to an external style sheet, or complement it. Includes the webpage’s appearance information.

<script>………..</script>

Used to add code snippets, typically in JavaScript, to make webpage dynamic. It can also be used to just link to an external script.

Example

  • <html>
    <head>
    <meta charset=”utf-8″>
    <base href=”http://myfirstwebsite.com”target=”_blank” />
    <title>My Beautiful Website</title>
    <link rel=”stylesheet” href=”/css/master.css”>
    <script type=”text/javascript”>var dummy = 0;
    </script>
    </head>
    <body>
    </body>
    </html>

Document Structure

<h1..h6> … </h1..h6>

Six different variations of writing a heading.<h1> has the largest font size, while <h1>hasthe smallest.

<div>…..</div>

A webpage’s content is usually divided intoblocks, specified by the div tag

<span>…</span>

This tag injects inline elements, like an image ,icon, emoticon without ruining the formatting styling of the page.

<p>…</p>

Plain text is placed inside this tag.

<br/>
A line break for webpages. Is used when wanting to write a new line.

<hr/>

Similar to the above tag. But in addition to switching to the next line, this tag also draws a horizontal bar to indicate the end of the section.

Example

  • <div>
  • <h1>Top 5 Greatest Films</h1>
  • <p>These are considered the greatest
  • <span>reel-icon</span>of all time</p>
  • <hr/>
  • <h2>1. The Godfather</h2>
  • <p>This 1972 classic stars Marlon Brando and Al Pacino</p>
  • </div>

Text Formatting

<strong>…</strong>

Makes text bold. Used to emphasize a point

<b>…</b>

Alternative to the above tag, also creates bold text.

<em>…</em>

Another emphasis tag, but this displays text in italics.

<i>…</i>

Also used to display text in italics, but does not emphasize it like the above tag

<tt>…</tt>

Formatting for typewriter-like text. No longer supported in HTML5.

<stricke>…</strick>

Another old tag, this is used to draw a line at the center of the text, so as to make it appear unimportant or no longer useful.

<cite>…</cite>

Tag for citing author of a quote.<del>…</del>

Pre-formatted, ‘monospace’ text laid out with whitespace inside the element intact.

 <ins>…</ins>

Denotes text that has been inserted into the webpage.

<blockquote>…</blockquote>

Quotes often go into this tag. Is used in tandem with
the tag.

 <q></q>

Similar to the above tag, but for shorter quotes.

<abbr></abbr>

Denotes abbreviations, along with the full forms. 

<acronym>…</acronym>

Tag for acronyms. No HTML5 support.

 <address>…</address>

Tag for specifying author’s contact details.

<dfn>…</dfn>

Tag dedicated for definitions.

<code>…</code>

This is used to display code snippets withina paragraph.

 <sub>…</sub>

Used for writing a subscript (smaller font justbelow the mid-point of normal font). Example: ax

<sup>…<sup>

Similar to the above tag, but for superscripting.

<small>…</small>

Reduces text size. In HTML5, it often refers to redundant or invalid information.

Example

<p><strong>Bold text</strong>some words in italics</strong> regular text once again.</p>

<blockqoute>

Anyone who has never made a mistake has never tried anything new.<cite>– Albert Einstein</cite>

</blockqoute>

<pre>

Some pre-formatted text

</pre>

 <p>A code snippet: some code</code></p>

list

  • <ol>…</ol>
  • Tag for ordered or numbered list of items.
  • <ul>…</ul>
  • Contrary to the above tag, used for unordered
    list of items.
  • <li>…</li>
  • Individual item as part of a list.
  • <dl>…</dl>
  • Tag for list of items with definitions.
  • <dd>…</dd>
  • The definition of a single term inline with body content.

Example

  • <ol>
  • <li>Monday</li>
  • <li>Tuesday</li>
  • <li>Wenesday</li>
  • </ol>
  • <ul>
  • <li>France</li>
  • <li>Germany</li>
  • <li>Italy</li>
  • </ul>
  • <dl>
  • <td>Toyota</td>
  • <td>Japanese car brand</td>
  • <td>Armani</td>
  • <td>Italian fashion brand<</td>
  • </dl>

Link

<a href=””>…</a>

Anchor tag. Primarily used for including hyperlinks

<a href=”melto”>…</a>

Tag dedicated to sending emails.

<a href=”tel://###-###”>…</a>

Anchor tag for mentioning contact numbers.As the numbers are clickable, this can be particularly beneficial for mobile users.

<a name=”name”>…</a>

This tag can be used to quickly navigate to a different part of the webpage.

 <a name=”#name”>…<a/>

A variation of the above tag, this is only meant to navigate to a div section of the webpage.

Image

   <img/>

A tag to display images in the webpage.

 src =”url”

The URL or path where the image is located onyour drive or on the web.

 Alt=”text”

The text written here is displayed when userhovers mouse over the image. Can be used togive additional details of the image.

 Height=””

Specifies image height in pixels or percentages.

 width=””

Specifies image width in pixels or percentages.

 Align=””

The relative alignment of the image. Can changewith changes to other elements in the webpage.

 border=””

Specifies border thickness of the image. If notmentioned, defaults to 0.

<map>…</map>

Denotes an interactive (clickable) image.

<map name>…</map>

Name of the map associated between the imageand the map.

 <area>

Specifies image map area.

 shape=””

Shape of the area.

coords=””

Coordinates of the vital information of the shape. Example: vertices for rectangles, center/radius for circles.

Example

  • <img src=”planets.gif” width=”145″ height=”126″alt=”Planets” usemap=”#planetmap”>
  • <map name=”planetmap”>
  • <area shape=”rect” coords=”0,0,60,100″href=”sun.htm” alt=”Sun”>
  • <area shape=”circle” coords=”90,58,3″href=”mercur.htm” alt=”Mercury”>
  • <area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus”>
  • </map>

List

<ol>…</ol>

Tag for ordered or numbered list of items.

 <ul>…</ul>

Contrary to the above tag, used for unordered list of items.

<li>…</li>

Individual item as part of a list.

<dl>…</dl>

Tag for list of items with definitions.

 <dt></dt>

The definition of a single term inline with body content.

 <dd></dd>

The description for the defined term.

Example

  • <ol>
  • <li>Monday</li>
  • <li>Tuesday</li>
  • <li>Wednesday</li>
  • </ol>
  • <ul>
  • <li>France</li>
  • <li>Germany</li>
  • <li>Italy</li>
  • </ul>
  • <dl>
  • <dt>Toyota</dt>
  • <dt>Japanese car brand</dt>
  • <dt>Armani</dt>
  • <dt>Italian fashion brand</dt>
  • </dl>

FORM

<Form>…</Form>

The parent tag for an HTML form.

action=”url”
The URL listed here is where the form data will be submitted once user fills it.
method=””
It specifies which HTTP method (POST or GET) would be used to submit the form.

enctype=””
Only for POST method, this dictates the data encoding scheme to be used when form is submitted.
autocomplete
Determines if the form has auto-complete enabled.
novalidate
Determines whether the form should be validatedbefore submission.
accept-charsets
Determines character encodings when form is submitted.
target
After submission, the form response is displayed wherever this refers to, usually has the following
values: _blank, _self, _parent, _top

<fieldset>…</fieldset>

Identifies the group of all fields on the form.

<label></label>

This is used to label a field in the form.

<legend></legend>

This operates as a caption for the

<input>

This tag is used to take input from the user. Input type is determined by a number of attributes.

Input Type Attributes

type=””
Determines which type of input (text, dates,password) is requested from the user.
name=””
Specifies the name of the input field.
value=””
Specifies the value contained currently in the input field.
size=””
Determines the input element width (number of characters).

maxlength=””

Specifies the most input field characters allowed. required Makes an input field compulsory to be filled by the user. The form cannot be submitted if a required field is left empty.

width=””

Determines the width of the input element, in pixel values.

height=”” Determines the height of the input element, in pixel values.

placeholder=””

Can be used to give hints to the user about the nature of the requested data.

pattern=””

Specifies a regular expression, which can be used to look for patterns in the user’s text.

min=””

The minimum value allowed for an input tags element.

max=””

The maximum value allowed for an input tags element.

autofocus

Forces focus on the input element when webpage loads completely.

disabled

Disables the input element. User can no longer enter data.

<textarea>…</textarea>

For longer strings of input. Can be used to get multi-sentence text from the user.

<select>…</select>

This tag specifies a list of options which the user can choose from.

Select Attributes

name=””
The name of a particular list of options.
size=””
Total number of options given to the user.
multiple
States whether the user can choose multiple options from the list.

required
Specifies whether choosing an option/s is necessary for form submission.
autofocus
Specifies that a drop-down list automatically comes into focus after a page loads.

<option>…</option>

Tag for listing individual items in the list of options.

Option Attributes

value=”” The text visible to the user for any given option.

selected

Determines which option is selected by default when the form loads.

Button Tags  is Tag for creating a button for form submission.

Example

  • <form action=”form_submit.php” method=”post”>
  •       <fieldset>
  •                <legend>Bio:</legend>
  •                 First name:<br>
  •               <input type=”text” name=”first-name”value=”John” placeholder=”Please enter your first name here”>                <br>
  •                Last name:<br>
  •                <input type=”text” name=”last-name” value=”Doe” placeholder=”Please enter your last name  here”>                 <br><br>
  •                Favorite sport:<br>
  •                <select>
  •                    <option value=”soccer”>Soccer</option>
  •                     <option value=”Tennis”>Tennis</option>
  •                     <option value=”golf”>golf</option>
  •                     <textarea name=”description”> </textarea>
  •                     <input type=”submit” value=”submit”>
  •                  </select>
  •           </fieldset>
  • </form>

 

Table

<table>…</table>

Marks a table in a webpage.

<caption>…</caption>

Description of the table is placed inside this tag.

<thead></thead>

Specifies information pertaining to specific columns of the table.

<tbody>…</tbody>

The body of a table, where the data is held

<tfood>…</tfood>

Determines the footer of the table.

<tr>…</tr>

Denotes a single row in a table.

<th></th>

The value of a heading of a table’s column.

<td>…</td>

A single cell of a table. Contains the actual
value/data.

<colgroup>…<colgroup>

Used for grouping columns together.

<col>

Denotes a column inside a table.

Example

  • <table>
  • <colgroup>
  • <col span=”2″></col>
  • <tr>
  • <th>Name</th>
  • <th>Major</th>
  • <th>GPA</th>
  • </tr>
  • <tr>
  • <td>Bob</td>
  • <td>Law</td>
  • <td>3.55<</td>
  • </tr>
  • <tr>
  • <td>Alice</td>
  • <td>Medicine</td>
  • <td>3.61<</td>
  • </tr>
  • </colgroup>
  • </table>

Objects and IFrame

<object>…</Object>

This tag is used to embed additional multimedia into a webpage. Can be audio, video, document (pdf) etc.

height=””
Determines object height in pixel values.

width=””
Determines object width in pixel values.

type=””
The type/format of the object’s contents.

<iframe>…<iframe>

An inline block of content, this is used as a container for multimedia in a flexible manner. It floats inside
a webpage, meaning it is placed relative to other  webpage items.

Iframe Attributes

name=””
The name of the iFrame.
src=””
The source URL/path of the multimedia object to be held inside the iFrame.
srcdoc=””
Any HTML content to be displayed inside the iFrame.
height=””
Determines the height of the iFrame.
width=” ”
Determines the width of the iFrame.

</param>

For iFrame customization. This includes additional parameters to go along with the content.

<embed>…</embed>

This is used to embed external objects, like plugins (e.g. a flash video).

Embed Attributes

height=”“
Determines the height of the embedded item.
width=”“
Determines the width of the embedded item.
type=””
The type or format of the embedded content.
src=””
The URL/path of the embedded item.

Example

<object width=”1000″ height=”1000″></object>

<iframe e src=”some_other_webpage.html” width=”500″ height=”500″></iframe>

<embed src=”some_video.swf” width=”500″ height=“500″></embed>

HTML 5 new Tag

<header>…</header>

Specifies the webpage header. Could also be used for objects inside the webpage

<footer>…</footer>

Specifies the webpage footer. Could also be used for objects inside the webpage.

<main>…</main>

Marks the main content of the webpage.

<aticle>…</aticle>

Denotes an article.

<aside>…</aside>

Denotes content displayed in a sidebar of the webpage.

<section></section>

Specifies a particular section in the webpage.

<details>…</details>

Used for additional information. User has the option to view or hide this.

<summary>…<summary>

Used as a heading for the above tag. Is always visible to the user.

<dialog>…</dialog>

Used to create a dialog box.

<figure>…</figure>

A tag reserved for figures (diagrams, charts) in HTML5.

<figcaption>…</figcaption>

A description of the figure is placed inside these.

<mark>…</mark>

Used to highlight a particular portion of the text.

<nar>…</nar>

Navigation links for the user in a webpage.

<menuitem>…</menuitem>

A particular item from a list or a menu.

<meter>…</meter>

Measures data within a given range

<progress>…</progress>

Typically used as a progress bar, this is used to track progress.

<rp>…</rp>

This tag is meant for showing text for browsers without ruby annotation support.

<rt>…</rt>

Displays East Asian typography character details.

<ruby>…</ruby>

Describes a Ruby annotation for East Asian typography

<time>…</time>

Tag for formatting date and time.

<wrb>…</wrb>

A line-break within the content.

Collective Character Objects

&#34; &quot;
Quotation Marks – “
&#60; &lt;
Less than sign – <
&#62; &gt;
Greater than sign – >
&#160; &nbsp;
Non-breaking space
&#169; &copy;
Copyright symbol – ©
&#38; &amp;
Ampersand – &
&#64; &Uuml;
@ Symbol – @
&#149; &ouml;
Small bullet – •
&#153; &ucirc;
Trademark
symbol – ™

 

 

 

 

Related

Mr. tim berners-lee

history html or www

Tens of millions of people have used it to set up businesses, to learn, and to communicate as a means of communication during a time

HTML CHART SHEET

The Complate HTML Chat Sheat​ For web Developers It is Crucial to be Profitcient in THML and while HTML is not the Most Difficult accustom

What is HTML?

The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies