Last updated on December 28th, 2023
Basic example of HTML page structure
<!DOCTYPE html> <html> <head> <title> HTML examples </title> </head> <body> All content goes here. </body> </html>
In other words, all content of the HTML page – text, images, links, tables, forms, etc. must be placed between tags <body> and </body>.
To link an HTML page to a CSS file, you need to put code like this in the head section (between tags <head> and </head>.):
<link rel="stylesheet" href="myfile.css">
where myfile.css is the name of your CSS file. In this example, myfile.css should be placed in the same folder as the HTML file.
Let’s set the HTML body element (the body of the page) to have a text size of 14px, Arial font, to be 70% of the screen width, to be centered on the screen, with a black border of size 2px and a distance between the text and the border of 20px.
The CSS code you need to put in the CSS file myfile.css is as follows:
body
{
font-size: 14px;
font-family: Arial, Verdana, sans-serif;
width: 70%;
margin: auto;
border: 2px solid black;
padding: 20px;
}
You can also use inline CSS and style the body of the page using the style attribute like this:
<body style="font-size: 14px; font-family: Arial, Verdana, sans-serif; width: 70%; margin: auto; border: 2px solid black; padding: 20px;">
Basic HTML text examples
<h1>This is the main title of the page</h1> <p>This is a text paragraph.</p> This is a <br> line break. (The br tag has no closing tag.) <b> This text is bold. </b> <i> This text is italic. </i>
Let’s center the title using inline CSS like this:
<h1 style="text-align: center;">This is the main title of the page</h1>
Let’s make a paragraph with bold red text:
<p style="font-weight: bold; color: red;">This is a paragraph with bold red text.</p>
Basic HTML link examples
1. How to link to a website?
<a href="https://webcodes.org">This is a link to WebCodes.org</a>
This is a link to an external page (in this case, to the WebCodes.org home page). To make such a link, you need to know the exact web address of the external page, for example: https://www.example.com, https://www.example.com/folder/page.html, etc.
2. How to link to a page in the same folder?
<a href="otherpage.html">This is a link to another page in the same folder</a>
This is an internal link. In this example, otherpage.html should be placed in the same folder as the HTML page in which you place the link.
3. How to link to pages in different folders?
Example of how to link from an HTML page located in a folder to an HTML page located in another folder:
Let’s have a folder on the desktop called folder1 and inside it let’s have another folder called folder2.
Let’s have page1.html which is located in folder1 and page2.html which is located in folder2.
In this case, if you want to link from page1.html to page2.html, you should put the following code in page1.html:
<a href="folder2/page2.html">Link from Page1 to Page2</a>
If you want to link from page2.html to page1.html, you need to put the following code in page2.html:
<a href="../page1.html">Link from Page2 to Page1</a>
Basic HTML image examples
1. What is a relative address (URL) of an image?
<img src="image.jpg">
(The img tag has no closing tag.)
The URL of this image is called a relative URL. In this example, image.jpg should be placed in the same folder as the HTML file.
If the image is in a folder other than the folder where the HTML page is located, the same rules apply as for links between pages in different folders:
<!-- If the image is in folder2 and the HTML page is in folder1. --> <img src="folder2/image.jpg">
<!-- If the image is in folder1 and the HTML page is in folder2. --> <img src="../image.jpg">
2. What is an absolute image address (URL)?
Now let’s display some example image in our page. The code will be as follows:
<img src="https://webcodes.org/img/example.png">
The URL of this image is called an absolute URL (full web address of the image). In this case, the image can be located anywhere on the Internet. You just need to know its exact web address to set it in the src attribute of the img tag.
Note: Internet images may be copyrighted. Before using them, you should make sure they are free to use or get permission from the copyright owner.
Now let’s make the example image look smaller by using the width attribute:
<img src="https://webcodes.org/img/example.png" style="width: 100px;">
3. Alt attribute of the img tag
Src is the main attribute of the img tag, but there are also other attributes you can use, such as width, height, and alt. The alt attribute contains a short description of the image. Alt is an important attribute because it tells search engines what the image is about.
Example:
<img src="https://webcodes.org/img/example.png" alt="Example Image">
Image as a link example
Now let’s use the example image as a link to WebCodes.org:
<a href="https://webcodes.org"> <img src="https://webcodes.org/img/example.png" alt="Example Image" style="width: 100px;"> </a>
Basic HTML list examples
Example of unordered list:
<ul> <li>First list item.</li> <li>Second list item.</li> <li>Third list item.</li> </ul>
Example of ordered list:
<ol> <li>First list item.</li> <li>Second list item.</li> <li>Third list item.</li> </ol>
Basic HTML table examples
Let’s make a table with three columns and two rows. The base code will look like this:
<table> <tr> <td>1st col, 1st row</td> <td>2nd col, 1st row</td> <td>3rd col, 1st row</td> </tr> <tr> <td>1st col, 2nd row</td> <td>2nd col, 2nd row</td> <td>3rd col, 2nd row</td> </tr> </table>
Let’s style the table using inline CSS. Let’s set the table to be 100% wide, with centered white text and a black background:
<table style="width: 100%; text-align: center; color: white; background-color: black;">
Note: If you want, you can place the entire content of the page in a table. For example, the page header with the logo in one table cell, the navigation menu in another table cell, the main content in a third table cell, and the page footer in a fourth table cell, like this:
<table style="width: 50%; margin: auto;"> <tr> <td>Header goes here.</td> </tr> <tr> <td>Navigation menu goes here.</td> </tr> <tr> <td>Main content goes here.</td> </tr> <tr> <td>Footer goes here.</td> </tr> </table>
Basic HTML form examples
<form> Your name: <input type="text" id="users_name" name="users_name"> <br> <br> Choose a Date: <input type="date" id="the_date" name="the_date"> <br> <br> Some Choice 1: <input type="checkbox" id="choice1" name="choice1"> <br> <br> Some Choice 2: <input type="checkbox" id="choice2" name="choice2"> <br> <br> Upload file: <input type="file" id="the_file" name="the_file"> <br> <br> Submit: <input type="submit"> </form>
Note: If you want your form to be sent by email by pressing the Submit button, you must have a script written in the PHP programming language. In order for the script to send the information, you need to write the following code in the HTML form tag:
<form action="myscript.php">
where myscript.php is your PHP file.
To learn more about PHP, check out the PHP Tutorials for Beginners.
Basic examples of other important HTML elements:
Comment tag
You already know the comment tag:
<!-- Some comment here. -->
div tag
The div tag is important, because it can be used in many ways – to group, position, arrange and style web page elements. For simplicity, you can think of the div tag as a separate, independent table cell or as a container.
For example, let’s make two centered and horizontally positioned cells with red borders and a yellow background in which to put some content. For this purpose we will use three div tags. In the first tag we will place the other two tags. The function of the first tag will be only one – to center the other two tags. Let’s add comments to each of these tags:
<!-- Here below starts the first <div> tag in which we will place the other two tags. --> <div style="text-align: center;"> <!-- Here below starts the second <div> tag. --> <div style="display: inline; border: 2px solid red; background-color: yellow; padding: 10px; margin: 5px;"> Some content here. </div> <!-- Here below starts the third <div> tag. --> <div style="display: inline; border: 2px solid red; background-color: yellow; padding: 10px; margin: 5px;"> Even much, much more content here. </div> <!-- Here below is the closing tag (</div>) of the first <div> tag. --> </div>
textarea tag
The textarea tag creates a large text area with an unlimited number of letters, numbers and other characters. The rows and cols attributes specify the number of rows and the width of the area, respectively:
<textarea rows="5" cols="50"> Write some text here: </textarea>
hr tag
The hr tag has one simple function – it creates a horizontal line. This tag has no closing tag.
Let’s use the horizontal line tag without any styles:
<hr>
Now let’s make a red line with a height of 5 pixels. In this case, the border attribute should be used, like this:
<hr style="border: 5px solid red;">