HTML Start

what is HTML

HTML, Hyper Text Markup Language, is the standard markup language (<...></...>) for documnets designed to be displayed in a web browser. Newest version is HTML5. All popular browsers support HTML5. Nowadays, HTML5 is maintained by World Wide Web Consortium (W3C). All W3C maintained standards include HTML, XML, CSS, DOM, ECMAScript.

HTML Markup

1. <!-- ... -->

'!-- --' markup surrounds the documents only showed to a developer but not normal browser users.

2. <!DOCTYPE [standard]>

'!DOCTYPE' defines what standard is used in this web page. 'html' represent HTML5 standard. The default standard of a web browser is mostly HTML5, so this statement can be omitted.

3. <html>...</html>

'html' markup surrounds the documents showed as a web page. Anything out of 'html' will not affect the page or be displayed on it.

4. <head>...</head>

'head' markup surrounds the header of a web page. Page settings are defined in this block.

a. <meta ...>

'meta' descripts information needed on this web page. This markup can be used for search engine optimization (SEO).

(1) charset

charset="UTF-8"

(2) name + content

name="key" content="content mapped by key"

b. <title>...</title>

'title' markup surrounds the text in the web browser's title bar. Only texts are allowed here.

5. <body>...</body>

'body' markup surrounds the body of a web page. Main documents are defined in this block.

a. <h[number]>...</h[number]>

'h[number]' markup surrounds the title in the body of a web page.
eg.

<h1>level 1</h1>

<h2>level 2</h2>

<h3>level 3</h3>

<h4>level 4</h4>

<h5>level 5</h5>
<h6>level 6</h6>

b. <p>...</p>

'p' markup surrounds the paragraph.
eg.

<p>First paragraph.</p>

<p>Second paragraph.</p>

c. <br />

'br' markup state that a newline comes after the markup.
eg.
First line.<br />
Second line.

d. <hr />

'hr' markup display a line segmentate web Page.
eg.<hr />

e. font style

(1) <strong>...</strong> or <b>...</b>

'strong' or 'b' markup surrounds the words displayed in bold front.
eg.
<strong>bold front</strong>
<b>bold front</b>

(2) <em>...</em> or <i>...</i>

'em' or 'i' markup surrounds the words displayed in emphasized front.
eg.
<em>emphasized front</em>
<i>emphasized front</i>

f. special symbols and reserved characters

(1) space: &nbsp; or &NonBreakingSpace;

eg.
one space: &nbsp; ' '
two spaces: &nbsp;&nbsp; '  '

(2) less: &lt; or greater: &gt;

eg.
less: &lt; <
greater: &gt; >

(3) copyright: &copy;

eg.
copyright: &copy; ©

g. <img... />

'img' links to a image, and displays it in the web page.

(1) src

src="source, path to a image"

(2) alt

alt="alternative text, the text showed while the photo was broken"

(3) title

title="hover text"

(4) width

width="width of photo, a number"

(5) height

height="height of photo, a number"

eg.
<img src="./img/wp3492725-cat-hd-wallpaper-1920x1080.jpg" alt="cat photo is missing" title="a cute cat photo" width="800" height="450" />
cat photo is missing

h. <a... />

'a' an anchor links to another web page, an id or an email sender. It surrounds the text showed as hyperlink, anchorlink or functional link.

(1) href

href="hypertext reference, path to another web page, an id or an email sender"

(2) target

target="target position of the linked web page" eg.
_self: open the linked page and replace this page
_blank: open the linked page on a new tab

eg.
<a href="http://google.com" target="_self">google search</a>
google search
<a href="./demo1.html" target="_blank"><img src="./img/demo1.png" /></a>

<a href="#titleh1">back to top</a>
'#titleh1' let web browser jump to a markup with id="titleh1"
back to top
<a href="#demo1titleh1">to demo1 top</a>
to demo1 top
<a href="mailto:williamchi3@yahoo.com">contact author by email</a>
'mailto:[email]' let web browser open an email sender
contact author by email

i. Block and Inline elements

(1) Block element

Block element starts a newline after ending.
<p>, <h>...

(2) Inline element

Inline element does not start a newline after ending.
<strong>, <em>...

j. <li>...</li>

'li' is a child element contained by following parent element. It represents an item of a list.

(1) <ul>...</ul>

unordered list
eg.
<ul>
 <li>first item</li>
 <li>second item</li>
</ul>

(2) <ol>...</ol>

ordered list
<ol>
 <li>first item</li>
 <li>second item</li>
</ol>

  1. first item
  2. second item

(3) <dl>...</dl>

Definition list is different from normal list. It contains <dt> as list name and <dd> as list item
eg.
<dl>
 <dt>list name</dt>
 <dd>first item</dd>
 <dd>second item</dd>
</dl>

list name
first item
first item

k. <table>...</table>

'table' element represents a two dimentional table. It contains row and column elements.

(1) <tr>...</tr>

'tr' table row represents a row of data. It contains table data of each column.

(2) <td>...</td>

'td' table data represents unit data of a table.

(3) border (<table>)

'border' defines table border type. It has been already deprecated.

(4) rowspan (<td>)

'rowspan' defines the number of row to span towards down on this table data element.

(5) colspan (<td>)

'colspan' defines the number of column to span towards right on this table data element.

eg.
<table border="lpx">
 <tr>
  <td rowspan="3">row span</td>
  <td>1st row, 1st column</td>
  <td>1st row, 2nd column</td>
 </tr>
 <tr>
  <td>2nd row, 1st column</td>
  <td>2nd row, 2ndt column</td>
 </tr>
 <tr>
  <td colspan="2">column span</td>
 </tr>
</table>
row span 1st row, 1st column 1st row, 2nd column
2nd row, 1st column 2nd row, 2ndt column
column span

l. <video></video>

(1) controls

'controls' add web browser default controler of a video.

(2) autoplay

'autoplay' allow video autoplay after loading. This feature is disabled in chrome web browser.

eg.
<video src="./video/pexels-anna-nekrashevich-7814423.mp4" controls autoplay width="500"></video>

m. <audio></audio>

eg.
<audio src="./audio/mixkit-dog-barking-twice-1.wav" controls autoplay></audio>

n. <[content section]>...</[content section]>

(1) <header>...</header>
(2) <footer>...</footer>
(3) <section>...</section>
(4) <article>...</article>
(5) <aside>...</aside>
(6) <nav>...</nav>
eg.

o. <iframe></iframe>

'iframe' element represents a nested browsing context, embedding another HTML page into the current one.
eg.

click on dynamic iframe

<form>...</form>

'form' element represents a document section containing interactive controls for submitting information.

<input... />

'input' element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The input element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.

type

'type' attribute define how an 'input' works. eg. text (default), password, checkbox, radio, submit, reset, file, hidden, image, button...

name

Name of the form control. Submitted with the form as part of a name/value pair.

value

The initial value of the control.

size

Size of the control

maxlength

Maximum length (number of characters) of value

checked

Whether the command or control is checked

eg.

<...>...</...>

<...>...</...>