Table of Contents (Hide)

HTML/CSS

Intermediates

HTML Form & HTTP Request

An HTML Form (Web Form) allows a web user to interact with the server. An HTML form contains input elements (or fields, controls, widgets), such as text fields, checkboxes, and buttons. These input fields allow web users to supply data (called request parameters or query string) to the web server. Over at the web server, a server-side program collects these data and returns a dynamic response based on the inputs submitted.

HTML Form By Examples

EXAMPLE 1: Basic `<form>` Structure

<!DOCTYPE html>
<!-- HtmlFormEx1.html -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic HTML Form Structure</title>
</head>
<body>
<form action="submit.php" method="get">
  <label for="username">Username</label><br> <!-- "for" targets "id" -->
  <input type="text" id="username" name="username"><br> <!-- "name" for "name=value" pair -->
  <label>Password<br>
  <input type="password" name="password"></label><br>
  <input type="submit" value="SEND">
  <input type="reset" value="RESET">
</form>
</body>
</html>

An HTML form is enclosed within <form>...</form> tags. The attribute action provides the URL for which this form is to be submitted. The attribute method specifies the HTTP method (GET or POST) to be used for submission.
There are 2 input elements in this form:
1. <input type="text">: a text field for users to enter data.
2. <input type="password">: for password entry - displayed as * on the screen.
We use a <label> to label each of the <input>. You can either match the for attribute of the <label> to the id attribute of the <input> element to be labeled (as in the first <input>); or wrap the <input> inside the <label> (as in the second <input>). The <label> improves the usability for the mouse-user. When you click on the <label>, the labeled <input> element is selected.
There are 2 buttons in this form:
1. <input type="submit">: The so-called Submit button. Clicking the submit button sends the data to the action URL.
2. <input type="reset">: The reset button, which clear all the input fields.
The value attribute of the button appears as the label of the button.
When the user submit the form, the browser collects the request parameters from the input elements, in the form of name=value pairs. The name corresponds to the name attribute of the <input> elements; the value corresponds to the text entered. In this example, there are two sets of name=value pairs - username=xxx and password=yyy. The request parameters are joined together via a & sign, i.e., username=xxx&password=yyy, to form a so-called query string. The query string is then append behind the action URL via a ? sign, i.e., submit.php?username=xxx&password=yyy. As URL does not accept special characters, they are encoded in the form of %hh (called URL encode), where hh is the ASCII code in hexadecimal, e.g., ~ is encoded as %7e; ^ as %5e. Space can be encoded in %20 or + for simplicity.
Try submitting the form. Observe the request parameters in the submitted URL. You are expect to get an error 404, as you have yet to write the server-side processing program "submit.php".
The server-side program receives the query string; URL decodes the special characters; and performs operations based on these parameters (e.g., query the database). It then returns an appropriate response to the client. I will not cover server side programming in this article. Read the respective server-side programming techniques such as PHP, Java Servlet, JSP, and etc.

EXAMPLE 2: More Controls and Input Validation

<!DOCTYPE html>
<!-- HtmlFormEx2.html -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Input Validation</title>
</head>
 
<body>
<form action="submit.php" method="get">
  <fieldset>
    <legend>Login</legend>
    <label for="username">Username*</label><br> <!-- "for" targets "id" -->
    <input type="text" id="username" name="username" required><br>
    <label for="password">Password*</label><br>
    <input type="password" id="password" name="password" required pattern=".{4,}">
  </fieldset>
 
  <fieldset>
    <legend>Gender*</legend>
    <label><input type="radio" name="gender" value="m" required> Male</label>
    <label><input type="radio" name="gender" value="f"> Female</label>
  </fieldset>
 
  <fieldset>
    <legend>Programming Skill</legend>
    <label><input type="checkbox" name="programming" value="java"> Java</label>
    <label><input type="checkbox" name="programming" value="cpp" checked> C++</label>
    <label><input type="checkbox" name="programming" value="csharp"> C#</label>
  </fieldset>
 
  <fieldset>
    <legend>Fruit</legend>
    Choose a fruit:
    <select name="fruit">
      <option value="apple">Apple</option>
      <option value="banana" selected>Banana</option>
      <option value="orange">Orange</option>
    </select>
  </fieldset>
 
  <textarea name="comment" placeholder="Enter your comment here" rows="5" cols="40" maxlength="180"></textarea><br>
 
  <input type="submit" value="SEND">
  <input type="reset" value="RESET">
</form>
</body>
</html>

We can group a set of related input fields into <fieldset> and provide a descriptive <legend>. The input fields will be enclosed in a box, with the legend shown on the top border.
In <input type="text"> (Line 14), attribute required is added to request browser to validate that this field is not empty. Browser will display an error message and will not submit the form if this field is empty.This attribute required is known as boolean attribute, as it does not have a value.
In <input type="password"> (Line 16), besides the attribute required, attribute pattern=".{4,}" requests browser to perform "Regular Expression Pattern Matching", in this case, 4 or more characters.
Radio buttons (can check at most one button) are marked by <input type="radio">'s. Each <input> has its associated <label>. We typically use the same name attribute for all the buttons, and assign different value for each button. You can place the required on any one of the button to request the browser to validate that one is checked.
Checkboxes (can check zero or more boxes) are marked by <input type="checkbox">. We added checked attribute on one of the box, to set its initial state. Attribute checked is applicable to checkboxes, as well as radio buttons.
Pull-Down menu is defined via a <select> element, with each item marked by an <option>. We set the common name in the name attribute of the <select>, and different value in <option>. We can also mark the selected element via attribute selected in the <option>.
Textarea (multi-line input text field) is marked via <textarea>...</textarea>. The attribute placeholder is applicable to all input text fields, which shows a hint in the input field before the user enters a value. The attribute maxlength request browser to limit the length of the input.
Try submitting the form. Observe the request parameters in the submitted URL.

EXAMPLE 3: HTML5 Input Controls and Validation

See examples below.

[TODO] comprehensive example.

The HTML Form's Syntax

The `<form>` Element and its `action` Attribute

An HTML form is enclosed by a <form> element. The attribute action specifies the URL for which this web form is to be submitted, which default to the current page. The attribute method specifies the HTTP method used for submission, i.e., GET or POST (with default of GET).

<form method="get|post" action="url">
  ... Input elements ...
  ... Submit/Reset buttons ...
</form>

The input fields (or controls, widgets) are placed Inside the <form>.

Grouping Input Fields: The `<fieldset>` and `<legend>` Elements

A well-designed web form uses <fieldset> to group the input fields into sets, with a <legend> to provide a descriptive legend for the fieldset. For example,

<fieldset>
  <legend>Contact Details</legend>
  <label for="name">Name</label>
  <input id="name"><br>
  <label for="telephone">Telephone</label>
  <input id="telephone"><br>
  <label for="email">Email</label>
  <input id="email"><br>
</fieldset>

Labeling `<input>` Fields: The `<label>` Element

Each <input> field is typically associated with a <label> to label the input field. You can bind an <input> element to a label by either:

<label> as wrapper: place the <input> element within the <label>...</label> tags.
<label> as reference: matching the "for" attribute of the <label> element with the "id" attribute of the input element.

<!-- Enclose <input> inside <label> -->
<!-- Label text can be in front or behind the <input> -->
<label>Name: <input type="text" name="username"></label>
<label><input type="radio" name="gender" value="m">Male</label>
<label><input type="radio" name="gender" value="f">Female</label>

<!-- Matching "for" with "id" -->
<label for="username">Name</label>
<input type="text" id="username" name="username">

Label does not have any visual effect. But if you click on the label, the associated input field will be selected.

Input Controls

Input fields are marked by <input>, <textarea>, <select> and <button>. The <input> is a standalone element, with attribute type to specify its sub-types (e.g., type="text" and type="checkbox"). On the other hand, <textarea>, <select>, <button> are container elements.

Element	Control	Description
<input type="text"> (default)	Single-line Text Input Field	For text input. The default type for `<input>.`
<input type="password">	Single-line Password Input Field	Password shown in asterisk (`*`).
<textarea>...</textarea>	Multi-line Text Input Field	For text input.
<input type="checkbox">	Checkbox	Can check zero or more boxes
<input type="radio">	Radio Button	Can check at most 1 button
<select>...</select> <optgroup>...</optgroup> <option>...</option>	Drop-down List
<input type="submit">	Submit Button	Click to submit the form to the server
<input type="reset">	Reset Button	Reset all fields to their default value
<input type="image">	Image Button	Use an image as submit button
<input type="button">	Generic Button
<input type="file">	File Chooser
<input type="hidden">	Hidden Field
<button>...</button>	Button	Same as `<input type="button">`
<input type="email"> (HTML5)	Email Address	Can be validated.
<input type="url"> (HTML5)	URL	Can be Validated.
<input type="number"> (HTML5)	Numeric value	You can use attributes `min\|max` to specify the min and max values; and `step` to specify the step size (default of 1). Many browsers add a spin button (with up/down arrow) to the right corner of the box
<input type="range"> (HTML5)	Numeric value	You can use attribute `min\|max` to specify the min and max values. Many browsers use a slider for `range`.
<input type="color"> (HTML5)	Color Chooser	Browser may pop-up a color chooser.
<input type="datetime_local"> <input type="datetime"> <input type="date\|time\|month\|week"> (HTML5)	Date and Time	Browser may provide a drop-down calendar. Poorly supported now.
<input type="tel"> (HTML5)	Phone number	No validation as phone numbers vary across countries.
<input type="search"> (HTML5)	Search keywords	Search Box for entering search keywords. No validation.
<datalist>..</datalist> <option> (HTML5)	Suggested List for input	Define a list of "suggested" options for `<input type="text">`
<output>..</output> (HTML5)	Generated Output	Define the result of a computation (by JavaScript)
<keygen> (HTML5)		Define a public-private key pair field for authentication of the form

Input Control Attributes

Besides the common attributes such as id, class, name, value, alt, the following attributes are applicable to input elements:

type: as above
autofocus: this input control shall receive the focus when the page is loaded.
disabled: disable the input control. Disabled controls are not sent on submission, and cannot receive focus.
checked (for radio, checkbox): indicates that this value is selected by default.
readonly (for text): indicates that this input is not editable.
size (for text): specifies the number of characters to display.
multiple (for file, email) (HTML5): indicates multiple values can be passed.
placeholder (for text) (HTML5): provides hints on what should be entered.
autocomplete (for text) (HTML5): indicates whether browser shall auto-complete this field.
required, minlength, maxlength (HTML5): indicates that the value must be present, or element must be checked.
min|max|step (for number, range) (HTML5)
more

Many of the above attributes (such as disabled, checked, readonly) are so called boolean attributes. That is, you do not have to specify its value in the HTML start tag. The presence of a boolean attribute on an element represents the true value.

HTML Events

Event	Description
onsubmit, onreset	Fires when the form is submitted/reset (typically via the submit/reset buttons)
onblue, onfocus	Fires when the element loses/gain focus
oninput	An element gets user input
onchange	The value of the element is changed
oncontextmenu	When a context menu is triggered
oninvalid	When an element is invalid
onselect	When some text has been selected
onsearch	for `<input type="search">`, when user enters a search term.
onkeyup, onkeydown, onkeypress	When a key is up, down, or pressed (up + down)

HTML5 Web-Form New Features

Adding Hints for Input Text Fields via Attribute `placeholder`

You can use the placeholder attribute to provide hints for the input, which will be shown in light-grey watermark and disappears when the user clicks on the field. For example,

<label>Login: <input type="text" placeholder="Enter your username or email"></label>

Placeholders should be used to clear up the ambiguity by providing examples, instead of another label.

Set the Initially-Focus Element via Attribute `autofocus`

You can add the attribute autofocus (with no value) to the element that is supposed to receive the focus when the page is loaded.

HTML5 Input Validation

HTML5 implemented client-side validation on input fields.

required, minlength, maxlength: You can add attribute required (with no value) to signal to the browser that non-empty input is required for that field. The browser will pop-up an error message if empty value is submitted for that field. Similarly, you can use minlength and/or maxlength to specify the minimum and/or maximum number of characters to be input.
novalidate, formnovalidate: To turn off the validation (e.g., to test the server-side validation), add attribute novalidate to the <form> element; or attribute formnovalidate to the submit button.
pattern="regex": You can also match the input value against a regular expression (regex) via attribute pattern="regex". See "Regular Expression" article on how to use regex for matching.
type="email|url" are validated. If required is not set, empty input is accepted.

Example: Try out the following input controls.

<form action="submit.php" method="get">
Name (type="text"): <input type="text" name="username" placeholder="Your username"
    required><br><br>
Password (type="password"): <input type="password" name="passwd" placeholder="password"
    required minlength="4" maxlength="8"><br><br>
Email (type="email"): <input type="email" name="email" size="30" required><br><br>
URL (type="url"): <input type="url" name="url" size="30"><br><br> <!--optional-->
<input type="submit">
</form>

`<select>` with `<optgroup>` and `<option>`

Try the following codes:

<select name="choice">
  <option value="milk">Milk</option>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
  </optgroup>
  <optgroup label="Vegetables" disabled>
    <option value="potatoes">Potatoes</option>
    <option value="tomatoes">Tomatoes</option>
  </optgroup>
</select>

Suggested Inputs (with Auto-complete) `<datalist>` (vs. `<select>`)

For example,

<!-- Must select one of the options -->
Choose a Color (select): <select name="color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select><br><br>

<!-- Provide a list of suggestions for auto-complete. You can enter your own value -->
Choose another Color (datalist): <input type="text" name="morecolor" list="colorlist">
<datalist id="colorlist">
  <option value="Red">
  <option value="Green">
  <option value="Blue">
</datalist><br><br>

<datalist> merely provides a list of suggestions (and supports auto-complete on these suggestions) on a input text field. You can enter your own value.

Progress Bar `<progress>` and Meter `<meter>`

The progress bar <progress> shows how far a task has progressed. Meter <meter> show the current value (in a known range) or percentage.

<label for="progress">Progress (&lt;progress&gt;):</label>
<progress id="progress" value="48" max="100">48% (fallback)</progress><br><br>

<label for="meter">Usage (&lt;meter&gt;)</label>
<meter id="meter" value="4" min="0" max="10">4 out of 10</meter><br><br>

Numeric Inputs: `<input type="number">` and `<input type="range">`

To be used for inputting number or number range, having different UI (See below). For example,

Marks (type="number"): <input type="number" size="6" name="marks" min="0" max="100"><br>
Feedback (type="range"): <input type="range" size="2" name="feedback" min="1" max="5">

Generated Output: `<output>..</output>`

Used to hold the output of JavaScript computation result (JavaScript is required). For example,

<form oninput="out.value=hello.value+username.value">
  <input type="text" id="hello" value="hello,"> <!--use "id"-->
  <input type="text" id="username" value="">
  <output name="out" for="hello username">enter something</output> <!--use "name"-->
</form>

Prior to HTML5, we typically use <div> or <span>.

File Upload `<input type="file">` and File Types `accept` Attribute

For <input type="file">, it is possible to accept only certain types of files, such as videos, images, audios, specific file extensions, or certain media MIME types. For example,

<form action="file_upload.php" method="post" enctype="multipart/form-data">
  <!-- image file only via MIME type -->
  Image file: <input type="file" accept="image/*" title="Only images are allowed"><br><br>
  <!-- .rar or .zip -->
  Zipped Codes: <input type="file" accept=".rar,application/zip"><br><br>
  <input type="submit" value="Upload your file">
</form>

Notes:

You need to set enctype="multipart/form-data" in the <form> tag for file upload, which specifies how form data would be encoded while submitting to the server.
You can specify "multiple" for multiple files upload.

Color Chooser via `<input type="color">`

Input control <input type="color"> creates a button-like control, with a color equal to the value attribute. Clicking this button opens up the color chooser. For example,

<input type="color" name="color" value="#ffff00">

Data/Time Picker via `<input type="datetime_local|datetime|date|time|month|week">`

On a supported browser, it will pop up an appropriate date/Time picker. For example,

Select Date/Time Local: <input type="datetime-local" name="dt_local"><br><br>
Select Date/Time Global with time zone: <input type="datetime" name="dt"><br><br>
Select Date: <input type="date" name="date"><br><br>
Select Time: <input type="time" name="time"><br><br>
Select Month: <input type="month" name="month"><br><br>
Select Week: <input type="week" name="week"><br><br>

Attribute `contenteditable`

The boolean attribute contenteditable marks the element editable, for example,

<p contenteditable>This is an editable paragraph.</p>
<p contenteditable>
  This sentence is editable.
  <span contenteditable="false">But this sentence is NOT.</span>
</p>

HTTP GET/POST Request

The Request Parameter (Name-Value Pair)

Each input field is associated with a name-value pair, which will be submitted to the server, as part of the HTTP request. The name is identified by the name attribute of the input field; while the value could be the user input (for text fields), or identified by the value attribute (for checkboxes, radio buttons and list options).

For example,

<label>FirstName: <input type="text" name="firstname"></label>
   <!-- name=value pair is firstname=dataEnter -->
 
<label><input type="radio" name="gender" value="m">Male</label>
<label><input type="radio" name="gender" value="f">Female</label>
<!-- name=value pair is gender=m or gender=f, depending on which button is checked -->

When the form is submitted, the name-value pair will be sent to the server, as a so-called request parameter.

The Query String (All Name-Value Pairs)

When a user fills in the form and click the submit button, the request parameter from all the input fields, in the form of name=value pair, will be send to the server as part of the request. The processing URL is specified in the action attribute of the <form>. For a GET request, the request parameters are append behind the URL separated by a '?'. The name=value pairs are separated by an '&'. Since the URL cannot accept special characters (such as blank and '~'), they will be encoded in the form of %hh, where hh is the ASCII code of the special character. e.g., '~' as %7E; blank as %20 or '+'. This is known as URL encoding.

For example, suppose that the action URL is http://www.example.com/test/submit.php, with request parameters username=peter, password=1234, gender=m, and comment=testing 1 2 3, the resultant GET request URL is:

http://www.example.com/test/submit.php?username=peter&password=1234&gender=m&comment=testing+1+2+3

Take note that the password are not encrypted, although it does not appear on the screen.

GET vs. POST Request Methods

For GET, the query string is appended behind the action URL. For POST, the query string is sent in the request body, and does not show up in the URL. POST is generally preferred as it can send more data, and does not mess up the URL.

How the Server Processes the Request Parameters?

The server-side program receives the query string; URL decodes the special characters; and performs operations based on these parameters (e.g., query the database). It then returns an appropriate response to the client. I will not cover server side programming in this article. Read the respective server-side programming techniques such as PHP, Java Servlet, JSP, and etc.

[TODO] Simple example on PHP

Color

Color theme is the most important factor affecting the appearance of your web pages. I am NOT an expert on colors, but these are what I understood.

216 Browser-Safe Colors?

Not too long ago, the computer monitors can display only 256 colors (aka palettes). Hence, web designers created the so-called 216 browser-safe colors, which can be shown correctly and quite consistently on all the computer displays. Today, most of the computer monitor can display 24-bit true colors, is it still relevant?

The 216 browser-safe colors are obtained mathematically (and not artistically or psychologically, and hence really really ugly), by putting values of #00, #33 (51), #66 (102), #99 (153), #CC (204), #FF (255) on each of the RGB triplets (6×6×6=216).

Most computer monitors today are at least capable of display 16K (or 16384) colors. You could put values of #00, #08, #10, #18,..., #F0, #F8, #FF on each of the RGB triplets.

HTML/CSS Color Names

Again, the HTML/CSS provides many color names, such as red, green, blue, grey, and etc. Again, the color value for these color names are obtained numerically. As a result, these colors are really really ugly. Don't use them!

Furthermore, you can't form a color theme by picking these names (lightblue+lightgreen+...??).

Designing Color Themes

Some online sties such as ColorHexa (@ https://www.colorhexa.com) can help you setup a color scheme. You need to pick your "Primary" color. It could generates the "Complementary", "Analogous", "Split Complementary" "Triade", "Tetrade" and "Monochromatic" Colors.

You can also try WebFX (https://www.webfx.com/web-design/color-picker/), and many more.

You also need to design a set of traffic-light color (red, amber, green) for your states and buttons.

Rules-of-Thumb of Using Colors

Nothing beats black text on white background for reading text on a computer monitor!!!
Stay monochrome (black on white). Use an additional color for highlighting headings, links, and etc.
Use color with restraint. There is no reasons to use more than 4 colors.
Use a lightly shaded background.
Use color in a box.

Fonts & Typography

Font Types

The choice font faces are probably the one of the most important factor affecting the appearance of your web pages. These are the main categories of fonts:

Serif: Serif fonts come with little horizontal tails, to guide you in reading a long (horizontal) line of texts. Serif fonts are used in printed materials such as newspaper for easy reading. For example,
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
San-serif: without the little tails, used for computer display and short heading in printed materials. [I don't know why? Probably you are not suppose to read long lines from the computer screen.]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Monospace (Fixed-width Font): the old typewriter fonts, used today for displaying program code, where spacing and alignment is crucial.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Cursive:
Artistic:

Fonts look good in prints may not look good on screen. You are recommended to use sans-serif fonts for the web pages, which are displayed on computer screen.

Typographic Terminologies

Font Style: bold, italic, underline, strike through, double-strike through, double-underline.
Kerning: Space between characters
Leading: Space between lines
emboss, engrave, outline, shadow
em-space: a space equals to the width of letter 'm'
em-dash: a dash equals to two hyphens, for indicating break in a sentence

Font Testing Paragraph

This is the famous standard "Lorem Ipsum" passage, used since the 1500s, for testing the typesetting:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Google Fonts

Today, the most frequently used font for web design is certainly the Google Fonts, which is free, open-source, and available on all platforms (Windows, macOS, mobiles, etc.).

See Google Font mother site and my "HTML/CSS Basics" article on how to use Google Fonts.

The popular google fonts are: "Open Sans", "Roboto", "Roboto Mono" (monospace), ...

Other Non-Google Common Fonts

This table shows you some of the common fonts.

Serif	San-serif (Body)	San-serif (Heading)	Monospace
(We use Google Fonts for web these days. The fonts below are outdated for web.)
Times New Roman	Segoe UI (Segoe)	Trebuchet MS (uc)	Lucida Console
Georgia	Tahoma	Trebuchet MS (lc)	Courier New
Palatino	Helvetica	Segoe UI	Consolas
	Arial	Verdana	Courier
	Lucida Sans Unicode	Century Gothic
	Calibri

In CSS, fonts are specified in property font-family. You can use generic family names such as "serif", "sans-serif", "monospace", and "cursive". The actual font used depends on the individual browser's settings.

Which Font Should I Use?

This is a million-dollar question. Some sans-serif font is nice when use in body text (normal weight, small font size, may need italics), others are suitable for use in heading (bold, bigger font size, uppercase). Some fonts are nice in lowercase, but not too nice in uppercase. Some nice fonts are not available in all the browsers (Windows 2000/XP/Vista/7, macOS, Linux?). For web publishing, you need to select one that most of your readers can enjoy.

You probably want to use different fonts for body texts and headings:

Headings: use bigger font-size (and most probably in bold face) to draw readers' attention, and help to organize the ideas. There are usually a few levels of headings. Set the letter-spacing for headings.
Body Texts: comprises the main bulk of your writing. Use smaller but legible font-size. Use italics or bold to emphasize certain terms or phrases.

These are my choices of fonts for web publishing (i.e., screen fonts, NOT printing fonts).

For Program Codes - Use Monospace or Fixed-width Font

Consolas (Windows - designed for Visual Studio 2005) is my first choice, but may not be generally available. Zero(0)/oh(O), one(1)/eye(I)/else(l) are clearly differentiated. It has a nice good italic style 1234567890.