Dr.

Jamil Alagha
BSWE 4327 - Programming Web HTML Shortcuts Tags

Text
<p> text </p> Block element
<h1>text.. </h1> …. <h6>text… </h6> Block elements
<b> to be bold </b> Inline elements Bold text
<i> to be italic </i> Italic text
<u> to be underlined </u> Underlined text
<strong> </strong> Strong (bold) text
<em> </em> Emphasized (italic) text
<s> </s> Through line text
<mark> </mark> Highlighted text
^{above text} Inline elements
_{under text}
<br /> Make new line
<hr /> Make new line and draw line
<pre> </pre> Keep format as it ( keep white spaces)
<blockquote>text </blockquote> Block element In “ quote “ in new line
<q> text </q> Inline element In “quote ” in the same line
Text <cite> author </cite> inline element To add reference at the end of text
<dfn> name </dfn> definition inline element Includes name of definition
<abbr title="Professor" > Prof </abbr> Block element
Lists
<li> item list </li> Block element
<ol type="1", > </ol> Block element type="1", “A”, “a”, “I”, “I”
<ul type="disc"> </ul> Block element type="disc", “circle", "square"
<dl> </dl> Block element
<dt> definition text </dt> Block element
<dd> definition </dd> Block element
Page Organizing
<main> </main> Main content, one main in page
<header> </header> introduction to a page
<footer> </footer> end of a page
<section> </section> To divide long web document
Layout
<article> </article> self-contained works that could stand
Design alone (can have multiple sections)
<aside> </aside> content that is separate from content
<nav> </nav> provides more semantic meaning for
unordered list.
Links
<a href="link" > text </a> Inline href="http://www.empireonline.com"
href="index.html"
href="../../index.html"
<a href=”mailto:jon@d .org” >text Inline mailto:email address
</a>

1
Dr. Jamil Alagha
BSWE 4327 - Programming Web HTML Shortcuts Tags
<a href="link" target="_blank"> text </a>
<a href="link#id" > text </a>
Images
<img src="url" alt= "text" > Inline src= url of the image
<figure> <img src=”url1” >
<img src=”url2”>
<figcaption> caption
text</figcaption>
</figure>
<img src=”url for 200px.jpg" alt=""
srcset=”url for 400px.jpg 2x,
=”url for 600px.jpg 3x" >
<img src="url-640.jpg" alt="alt text"
srcset=" url -480.jpg 480w, url -960.jpg 960w,
url -1280.jpg 1280w, url -2400.jpg 2400w"
sizes="100vw">
<picture>
<source media="(min-width: 1024px)"
srcset="url large.jpg">
<source media="(min-width: 760px)" srcset="
url medium.jpg">
<img src=" url -small.jpg" alt="alt text">
</picture>
<picture><source type="image/webp"
srcset="pizza.webp">
<source type="image/jxr" srcset="pizza.jxr">
<img src="pizza.jpg" alt="">
</picture>
Tables
<table > <caption>caption text </caption>
<tr> <td> text </td> <td> text </td>… </tr>
<tr> <td> text </td> <td> text</td>…</tr>
</table>
target="_blank" open in new window
href="link#id" go to element with the Id
alt= alternative text
title= extra info shown with mouse hover
height=, width=
A device with a standard screen density gets
only the 200px Higher densities get larger
images
sizes=" how much the image will
take width of the given width
if the viewport >= 1024 pixels wide,
use the large version of image
If viewport>=760 pixels and <1024,
use the medium image
Else use small image
First format supported will be used
<tr> new row
<td> cell
<th> column header
<th scope=”col”> column header
<th scope=”row”> row header
<td colspan=”2”> </td> expand cell
to 2 columns
<td rowspan=”2”> </td> expand
cell to 2 rows
<thead> <thead> table header
2
Dr. Jamil Alagha
BSWE 4327 - Programming Web HTML Shortcuts Tags

<tbody> <tbody> table body

<tfoot> <tfoot> table footer
Forms
<form action="url" method="get"> <Input> empty element
content <Input> type= can be text,
label: <input type="text" name="username" password, radio, checkbox, search,
size="15" maxlength="30" /> email, tel, url, hidden, date, time,
<textarea name="comments" cols="20" month, week, number, range, color
rows="4"> initial text </textarea>
<input type="radio" name="text" value="text" <textarea> closed element
checked="checked" /> label
<input type="radio" name="text" value="text"
/> label
<input type="checkbox" name="text"
value="text" checked="checked" /> label
<input type="checkbox" name=" text "
value=" text " /> label
</form>
<form action="url" method="get"> <select> </select> dropdown list
content Multiple multiple values selected
<select name="devices"> <optgroup label="text"> </optgroup>
<option value="text" > label</option> give label for group of options
<option value=" text "> label </option> size="num" lines to be display
<option > label </option>
</select> <option> </option> choice
</form> • No values, label is submitted
selected="selected" selected by
default
<form action="url" method="post"> type=”file, method must be ="post">
content
<input type="file" name="text" />
<input type="submit" value="label" />
<input type=” image" src="url"
width="100" height="20" />
</form>
<label>Label: <input type="text" name="age" Wrap wound
/> </label> <label> <input> </label>
Label: Using for
<input id="fe" type="radio" name="gender" <input id=”v” >
value="f"> <label for=”v” > </label>
<label for="fe" >Female</label>

3
 Dr. Jamil Alagha
BSWE 4327 - Programming Web HTML Shortcuts Tags

For any controller

<input id="male" type="radio" name="gender" required="required" to enforce the
value="m"> user to fill before submitting
<label for="male">Male </label>
<fieldset> Related controller grouped together
<legend>title</legend> in a box with title above
content </fieldset>
Meta
<!DOCTYPE html> <meta/> give meta data about page
<html> <head> name="description" gives what the
<title>title </title> page is about
<meta name="description" content="An Essay on name="keywords" words that might
Installation Art" /> user search for
<meta name="keywords" content="installation, art, name="robots" to be included in
opinion" /> search results of not
<meta name="robots" content="nofollow" /> http-equiv="author" defines page
<meta http-equiv="author" content="Jon Duckett" author
/> http-equiv="pragma" do not cache this
<meta http-equiv="pragma" content="no-cache"/> page
<meta http-equiv="expires" content="Fri, 04 Apr http-equiv="expires" when the chase
2014 23:59:59 GMT" /> should be expired
</head>
<body> </body>
</html>
Escaping character
&lt; Less than sign
&#60;

Dr. Jamil Alagha

BSWE 4327 - Programming Web

University of Palestine