Learning Basic HTML

Unlike other guides, this is a concise HTML guide for people who think that reading is boring. I try to show everything with simple code examples; there are no long and complicated explanations with fancy words.

This section will get you started with using HTML and you’ll be able to learn more about whatever you want after studying it.

HTML Basics

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. It refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext. As its name suggests, HTML is a Markup Language which means you use HTML to simply “mark-up” a text document with tags that tell a Web browser how to structure it to display.

A sample document looks something like this:

<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>

HTML Page Structure

Referring the above sample document. Things start with the Document Type Declaration (i.e. doctype), a way to tell the browser this is an HTML page, and which version of HTML we are using.
Modern HTML uses this doctype:

<!DOCTYPE html>

Then we have the html element, which has an opening and closing tag:

<!DOCTYPE html> 
<html> 
... 
</html>

Most tags come in pairs with an opening tag and a closing tag. The closing tag is written the same as the opening tag, but with a slash sign /:

<sometag>some content</sometag>

The html starting tag is used at the beginning of the document, right after the document type declaration.

The html ending tag is the last thing present in an HTML document.
Inside the html element we have 2 elements: head and body :

Inside the html element we have 2 elements: head and body :

<!DOCTYPE html> 
<html> 
<head> 
... 
</head> 
<body> 
... 
</body> 
</html>

Inside head we will have tags that are essential to creating a web page, like the title, the metadata, and internal or external CSS and JavaScript. Mostly things that do not directly appear on the page, but only help the browser (or bots like the Google search bot) display it properly.

Inside body we will have the content of the page. The visible stuff.

HTML Elements

An HTML element is defined by a start tag, some content, and an end tag. Example of some html elements:

<h1>Interns.School</h1>
<p>Your paragraph element here..</p>

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

Nested HTML Elements

HTML elements can be nested (this means that elements can contain other elements).

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

In the above example, the <html> element is the root element and it defines the whole HTML document which start with the tag <html> and an end tag </html>. Then, inside the <html> element there is a <body> which start with tag <body> and an end tag </body>. Inside the <body> element there are two other elements: <h1> and <p> which are the heading and paragraph.

HTML Attributes

HTML attributes provide additional information about HTML elements. Example of attribute:

<a href="https://interns.school">Interns.School</a>

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Similar to the href attribute, each tag has its own attributes available which you will explore as we progress with the guide.

HTML Heading

Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

<h1> defines the most important heading. <h6> defines the least important heading.

This element tells the browser about the structure of your website. h1 elements are often used for main headings, while h2 elements are generally used for subheadings. There are also h3, h4, h5 and h6 elements to indicate different and new sections.

<!DOCTYPE html>
<html>
   <head>
      <title>Heading Example</title>
   </head>
   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
   </body>
</html>

HTML Paragraphs

The <p> tag defines a paragraph. p elements is preferred element for normal-sized paragraph text on websites. P is short for “paragraph”. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example −

You can create a p element like this: <p>I'm a p tag!</p>

<!DOCTYPE html>
<html>
   <head>
      <title>Paragraph Example</title>
   </head>
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>
</html>

HTML Hyperlink

A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks. Hyperlinks allow visitors to navigate between websites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a webpage.

A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. .

In HTML, links are defined with the <a> tag:

<a href="url">link text</a>

The href attribute specifies the destination address.

Example:

<a href="https://interns.school">Some text to Link</a>

Here is an example of how hyperlinks are used within the HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>Hyperlink Example</title>
</head>
<body>
  <p>Click following link</p>
  <a href="https://interns.school">Some Link</a>
</body>
</html>

HTML Comments

Commenting is a way that you can leave comments within your code without affecting the code itself. It is a convenient way to make code inactive without having to delete it entirely.

You can start a comment with 

Here is an example of how comments could be used in a HTML document:

<!DOCTYPE html>
<html>
<head>  <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>

HTML Images

Images can improve the design and the appearance of a web page.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The first attribute is src (source) attribute specifies the URL (web address) of the image.

Example:

<img src="url">

Another attribute is alt, it provides an alternate text for an image

Example:

<img src="url" alt="My Picture">;

Here is a complete example of how it get used within html document:

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "http://google.com/image.png" alt = "Test Image" />
</body>
</html>

HTML List

HTML lists are used to present list of information in well formed and semantic way. There are three different types of list in HTML and each one has a specific purpose and meaning.

Unordered list — Used to create a list of related items, in no particular order.
Ordered list — Used to create a list of related items, in a specific order.
Description list — Used to create a list of terms and their descriptions.

In the following sections we will cover all the three types of list one by one:

HTML Unordered Lists

An unordered list created using the <ul> element, and each list item starts with the <li> element.

The list items in unordered lists are marked with bullets. Here’s an example:

<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>

The output of the above example will look like this:

Chocolate Cake
Black Forest Cake
Pineapple Cake

HTML Ordered Lists

An ordered list created using the <ol> element, and each list item starts with the <li> element. Ordered lists are used when the order of the list’s items is important.

The list items in an ordered list are marked with numbers. Here’s an example:

<ol>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li>
<li>Look around and go</li>
</ol>

The output of the above example will look like this:

Fasten your seatbelt
Starts the car’s engine
Look around and go

HTML Description Lists

A description list is a list of items with a description or definition of each item.

The description list is created using <dl> element. The <dl> element is used in conjunction with the <dt> element which specify a term, and the <dd> element which specify the term’s definition.

Browsers usually render the definition lists by placing the terms and definitions in separate lines, where the term’s definitions are slightly indented. Here’s an example:

<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>

The output of the above example will look like this:

Bread: A baked food made of flour.
Coffee: A drink made from roasted coffee beans.

HTML Forms

HTML Forms are required to collect different kinds of user inputs, such as contact details like name, email address, phone numbers, or details like credit card information, etc.

Forms contain special elements called controls like inputbox, checkboxes, radio-buttons, submit buttons, etc. Users generally complete a form by modifying its controls e.g. entering text, selecting items, etc. and submitting this form to a web server for further processing.

The <form> tag is used to create an HTML form. Here’s a simple example of a login form:

<form>
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Submit">
</form>

The following section describes different types of controls that you can use in your form.

Input Element

This is the most commonly used element within HTML forms.

It allows you to specify various types of user input fields, depending on the type attribute. An input element can be of type text field, password field, checkbox, radio button, submit button, reset button, file select box, as well as several new input types introduced in HTML5.

The most frequently used input types are described below.

Text Fields

Text fields are one line areas that allow the user to input text.

Single-line text input controls are created using an <input> element, whose type attribute has a value of text. Here’s an example of a single-line text input used to take username:

<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</form>

Password Field

Password fields are similar to text fields. The only difference is; characters in a password field are masked, i.e. they are shown as asterisks or dots. This is to prevent someone else from reading the password on the screen. This is also a single-line text input controls created using an <input> element whose type attribute has a value of password.

Here’s an example of a single-line password input used to take user password:

<form>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
</form>

Radio Buttons

Radio buttons are used to let the user select exactly one option from a pre-defined set of options. It is created using an <input> element whose type attribute has a value of radio.

Here’s an example of radio buttons that can be used to collect user’s gender information:

<form>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female">
<label for="female">Female</label>
</form>

Checkboxes

Checkboxes allows the user to select one or more option from a pre-defined set of options. It is created using an <input> element whose type attribute has a value of checkbox.

Here’s an example of checkboxes that can be used to collect information about user’s hobbies:

<form>
<input type="checkbox" name="sports" id="soccer">
<label for="soccer">Soccer</label>
<input type="checkbox" name="sports" id="cricket">
<label for="cricket">Cricket</label>
<input type="checkbox" name="sports" id="baseball">
<label for="baseball">Baseball</label>
</form>

File Select box

The file fields allow a user to browse for a local file and send it as an attachment with the form data. Web browsers such as Google Chrome and Firefox render a file select input field with a Browse button that enables the user to navigate the local hard drive and select a file.

This is also created using an <input> element, whose type attribute value is set to file.

<form>
<label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
</form>

Textarea

Textarea is a multiple-line text input control that allows a user to enter more than one line of text. Multi-line text input controls are created using an <textarea> element.

<form>
<label for="address">Address:</label>
<textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>

Select Boxes

A select box is a dropdown list of options that allows user to select one or more option from a pull-down list of options. Select box is created using the <select> element and <option> element.

The <option> elements within the <select> element define each list item.

<form>
<label for="city">City:</label>
<select name="city" id="city">
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
</select>
</form>

Submit and Reset Buttons

A submit button is used to send the form data to a web server. When submit button is clicked the form data is sent to the file specified in the form’s action attribute to process the submitted data.

A reset button resets all the forms control to default values. Try out the following example by typing your name in the text field, and click on submit button to see it in action.

<form action="action.php" method="post">
<label for="first-name">First Name:</label>
<input type="text" name="first-name" id="first-name">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

Frequently Used Form Attributes

The following table lists the most frequently used form element’s attributes:

`name`	Specifies the name of the form.
`action`	Specifies the URL of the program or script on the web server that will be used for processing the information submitted via form.
`method`	Specifies the HTTP method used for sending the data to the web server by the browser. The value can be either `get` (the default) and `post`.
`target`	Specifies where to display the response that is received after submitting the form. Possible values are `_blank`, `_self`, `_parent` and `_top`.
`enctype`	Specifies how the form data should be encoded when submitting the form to the server. Applicable only when the value of the `method` attribute is `post`.

What More

Here are few additional resources for you to learn and practice:

Visual Studio Code: If you’re looking for a robust editor, Microsoft Visual Studio’s free HTML editor edition of their IDE—which supports all the programming languages you’ll ever need—is a great choice.