HTML Programs Examples with Output PDF in 2026: Practice Programs for Beginners
Hardik Gupta25 Sept, 2026
HTML provides the basic structure for web pages. Beginners can learn the language by creating simple HTML files, saving them, and opening them in a web browser to see how different elements appear on a page.
HTML programs examples with output PDF provide a practical way to understand how HTML markup is converted into visible webpage content. Starting with simple programs allows learners to become familiar with basic syntax before moving on to CSS, JavaScript, and other frontend technologies.
By practising headings, paragraphs, links, images, tables, and forms, students can gradually understand how different HTML elements work together to create a webpage.
How to Set Up Your Environment for HTML Programs Examples with Output PDF
Before practising HTML programs, you need a text editor and a web browser. You do not need specialised or expensive software to create basic HTML pages.
You can use a simple editor such as Notepad on Windows. Alternatively, editors such as Visual Studio Code provide features such as syntax highlighting that can make HTML code easier to read and edit.
Save your files with the .html extension. This tells your operating system and browser that the file is an HTML document.
Quick tips for beginners:
-
Check that your file is saved with the .html extension and not .html.txt.
-
Keep your HTML files and related images in an organised folder.
-
Use simple file names without spaces, such as index.html or practice-page.html.
-
Open the saved file in a browser to view its output.
-
You can print the browser page or save it as a PDF if you want to create an HTML programs reference document.
Here is a quick checklist to get started:
-
Open a text editor such as Notepad or VS Code.
-
Create a new file.
-
Type or paste one of the HTML practice programs below.
-
Save the file with an .html extension.
-
Open the file in a web browser to view the output.
Also Check : Full Stack Development with AI
Basic Structure in HTML Programs Examples with Output PDF
Every HTML document has a basic structure that tells the browser how to interpret the page. The <!DOCTYPE html> declaration identifies the document as HTML5, while the <html>, <head>, and <body> elements provide the main structure of the document.
The <head> section contains information about the document, such as its title. The <body> section contains the content displayed on the webpage.
Here is a simple HTML program:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the main area.</p>
</body>
</html>
Output
The browser displays Welcome as a large heading followed by the sentence This is the main area. The text in the <title> element appears in the browser tab or window title.
This basic structure is used as the foundation for many HTML programs examples with output PDF. Understanding these elements makes it easier to create more detailed webpages.
Text Formatting HTML Programs Examples with Output PDF
HTML provides several elements for giving text different meanings or appearances. Beginners can practise elements such as <b>, <i>, <u>, and <mark> to understand basic text formatting.
Try the following program:
<!DOCTYPE html>
<html>
<body>
<h2>Formatting Text</h2>
<p><b>This text is bold.</b></p>
<p><i>This text is italicised.</i></p>
<p><u>This text is underlined.</u></p>
<p><mark>This text is highlighted.</mark></p>
</body>
</html>
Output
The browser displays four separate lines of text. The first line appears bold, the second italicised, the third underlined, and the fourth highlighted.
These HTML programs examples with output PDF help beginners understand how inline elements can be placed around specific portions of text.
For semantic HTML, elements such as <strong> and <em> are generally preferred when the purpose is to indicate importance or emphasis rather than simply change visual formatting.
Creating Web Links in HTML Programs Examples with Output PDF
Links allow users to navigate from one webpage to another. In HTML, links are created using the <a> (anchor) element.
The href attribute specifies the destination of the link.
Here is a simple example:
<!DOCTYPE html>
<html>
<body>
<h2>Web Links</h2>
<p>Click below to open a search engine.</p>
<a href="https://www.google.com">Go to Google</a>
</body>
</html>
Output
The browser displays Go to Google as a clickable link. By default, most browsers display unvisited links in blue and underlined text, although their appearance can be changed using CSS.
This is one of the useful HTML programs examples with output PDF for learning how attributes work. In this example, href provides additional information about where the link should take the user.
Displaying Images in HTML Programs Examples with Output PDF
Images can make webpages more informative and visually engaging. HTML uses the <img> element to display an image.
Unlike elements such as <p> or <h1>, the <img> element does not contain content between an opening and closing tag. In HTML5, it is written as a void element and does not require a closing </img> tag.
Try this example:
<!DOCTYPE html>
<html>
<body>
<h2>Adding Images</h2>
<img src="placeholder.jpg" alt="A basic test image" width="300" height="200">
</body>
</html>
Output
The browser displays the heading followed by the image specified in the src attribute. The width and height attributes specify the displayed dimensions in this example.
If the browser cannot find the image file, the image will not be displayed correctly. The alt attribute provides alternative text that can be useful when the image cannot be displayed and also improves accessibility.
When practising these HTML programs examples with output PDF, keep placeholder.jpg in the appropriate location relative to your HTML file. If the image is in the same folder, the code above will work when the file name matches exactly.
Organising Data in HTML Programs Examples with Output PDF
HTML tables are useful for presenting information in rows and columns. A basic table uses the <table> element along with <tr> for rows, <th> for header cells, and <td> for regular data cells.
Here is a simple example:
<!DOCTYPE html>
<html>
<body>
<h2>Student Details</h2>
<table border="1">
<tr>
<th>First Name</th>
<th>Final Grade</th>
</tr>
<tr>
<td>John Doe</td>
<td>A</td>
</tr>
</table>
</body>
</html>
Output
The browser displays a table with two columns. The first row contains the column headings First Name and Final Grade, while the second row contains John Doe and A.
The border="1" attribute adds a basic border for demonstration. In modern HTML development, CSS is generally used to control table borders, spacing, alignment, and other visual styles.
Practising these HTML programs examples with output PDF helps beginners understand how HTML tables are structured using rows and cells.
Creating Forms in HTML Programs Examples with Output PDF
Forms allow webpages to collect information from users. A form can contain different types of controls, including text fields, password fields, checkboxes, radio buttons, and submit buttons.
Here is a simple form example:
<!DOCTYPE html>
<html>
<body>
<h2>Contact Form</h2>
<form>
<label>Full Name:</label>
<input type="text">
<br><br>
<label>Password:</label>
<input type="password">
<br><br>
<input type="submit" value="Send">
</form>
</body>
</html>
Output
The browser displays a text field for the user's name, a password field that masks the characters entered, and a submit button.
This example demonstrates the basic structure of a form, but it does not send the entered information to a server because no form submission destination or processing mechanism has been specified.
These HTML programs examples with output PDF are useful for beginners who want to understand how different form elements appear and work on a webpage.
Get Free Counselling Today
and Clear up all your Doubts
FAQ
How do I view the output of my HTML code?
Why is my HTML code showing as plain text?
Do I need an internet connection to run HTML programs?
Why is my image not displaying?
Can I write HTML code on a mobile phone?
How can I create an HTML programs examples with output PDF file?
Live & recorded classes available at easeDashboard for progress trackingLakhs of practice questions
