HTML Sample Code
As an aspiring web developer, it is essential to have a solid understanding of HTML tags. To aid in your practice and growth, we have curated a collection of 20 HTML sample code files.
These files serve as a valuable resource for you to utilize as you advance in your learning journey. You are free to use them in your projects as you see fit. All sample code files are in plain text format, and can be easily edited using a simple text editor like Notepad, Notedpad++ .
If you’re not sure how to create and view HTML files, visit the article “Create Your First HTML Document.” It walks you through every step—with visuals—showing how to create and open an HTML file without needing any additional software.
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is first Paragraph</p>
</body>
</html><html>
<body>
<h1>This is heading one</h1>
<h2>This is heading two</h2>
<h3>This is heading three</h3>
<h4>This is heading four</h4>
<h5>This is heading five</h5>
<h6>This is heading six</h6>
</body>
</html><html>
<body>
<p>This is 1st paragraph</p>
<p>This is 2nd paragraph</p>
<p>This is 3rd paragraph</p>
</body>
</html><html>
<body>
<a href= "https://basicscomp.com/">This is a link</a>
</body>
</html><html>
<body>
<img src=”Image_name.jpg” alt="https://basicscomp.com" width="100" height="140" border="2">
</body>
</html><html>
<body>
<p>The hr tag insert a horizontal rule:</p>
<hr>
<p>This is 1st paragraph.</p>
<hr>
<p>This is 2nd paragraph.</p>
<hr>
<p>This is 3rd paragraph.</p>
</body>
</html><html>
<body>
<p>This is<br>a para<br>graph which has line breaks</p>
</body>
</html><html>
<body>
<p>Normal Text</p>
<p><b>Bold Text</b></p>
<p><strong>Strong text </strong></p>
<p><i>Italic Text</i></p>
<p><em>Emphasized Text </em></p>
<p>Normal Text <sub>subscripted Text </sub> text</p>
<p>Norma Text <sup>superscripted Text</sup> text.</p>
</body>
</html><html>
<body>
<p><font face=”arial” color= “green”> This is a new paragraph with font arial and color green </font> </p>
<p><font face=”courier” size=”3” color = “blue”> This is another Para</font> </p>
</body>
</html><html>
<body>
<!-- Write your comments here -->
<p>This is a normal paragraph.</p>
<!-- Comments are ignored and not displayed in the browser -->
<!-- Do not display this at the moment
<img src=”image.jpeg” border=”0″ alt=”Any Text”> -->
</body>
</html><html>
<body>
<!-- Write your comments here -->
<p>This is a normal paragraph.</p>
<!-- Comments are ignored and not displayed in the browser -->
<!-- Do not display this at the moment
<img src=”image.jpeg” border=”0″ alt=”Any Text”> -->
</body>
</html><html>
<head>
<style>
body {background-color:lightgreen}
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>This is heading</h1>
<p>This is paragraph</p>
</body>
</html><html>
<head>
<style>
h1 {
color:red;
font-family:courier;
font-size:320%;
}
p {
color:red;
font-family:arial;
font-size:140%;
}
</style>
</head>
<body>
<h1>This is heading</h1>
<p>This is paragraph</p>
</body>
</html><html>
<body>
<p><a href="https://basicscomp.com/acronymly/">Acronymly – Computer Acronym Dictionary & Meanings </a></p>
<p><a href="Photo.html">Photo</a> is a local link .</p>
<p><a href="https://basicscomp.com/tutorials/"> Online Tutorials </a> is a link to a website on the World Wide Web.</p>
</body>
</html><html>
<body>
<a href="https://basicscomp.com/windows/" target="_blank">Visit Online DIT</a>
<p>The target attribute "_blank", will open the link in a new browser window or tab.</p>
</body>
</html><html>
<body>
<table width="100%">
<tr>
<td>Anwar</td>
<td>Bilal</td>
<td>55</td>
</tr>
<tr>
<td>Naveed</td>
<td>Hilal</td>
<td>92</td>
</tr>
<tr>
<td>Zubair</td>
<td>Asad</td>
<td>75</td>
</tr>
</table>
</body>
</html><html>
<body>
<p>This is linked image, it can be clicked </p>
<a href="https://basicscomp.com/micrsoft-office/"> <img src="flower.jpg" alt="Flower"> </a>
</body>
</html><html>
<head>
<style>
table, th, td {
border: 1px solid green;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Score</th>
</tr>
<tr>
<td>Anwar</td>
<td>Bilal</td>
<td>55</td>
</tr>
<tr>
<td>Naveed</td>
<td>Hilal</td>
<td>92</td>
</tr>
<tr>
<td>Zubair</td>
<td>Asad</td>
<td>75</td>
</tr>
</table>
</body>
</html><html>
<body>
<h2>Ordered List</h2>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
<h2>Unordered List with square Bullets</h2>
<ul type="square">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
<h2>Ordered List with lower case a </h2>
<ol type="a">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>
</body>
</html> <html>
<body>
<h2> Description List</h2>
<dl>
<dt>Apple</dt>
<dd>- An apple a day keeps the doctor away</dd>
<dt>Banana</dt>
<dd>- Keeps you strong and energize</dd>
</dl>
</body>
</html><html>
<body>
<iframe src="other.htm" width="300" height="300"></iframe>
</body>
</html><html>
<body>
<form>
First Name:<br>
<input type="text" name="fname">
<br>
Last Name:<br>
<input type="text" name="lname">
<br>
Gender: <br>
<input type="radio" name="gender" value="male" checked> Male
<br>
<input type="radio" name="gender" value="female"> Female
</form>
</body>
</html><html>
<body>
<form action="otherpage.html">
First name:<br>
<input type="text" name="fname" value="Javid">
<br>
Last name:<br>
<input type="text" name="lname" value="Iqbal">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Download All HTML Sample Code in One ZIP File
Download all HTML sample code files in a single ZIP file. For easy and bulk downloading, we’ve included one ZIP file that contains all 21 HTML files, allowing you to download everything at once.
Conclusion
Practicing with real examples is one of the best ways to learn HTML effectively. The 21 HTML sample code files provided on this page are designed to help beginners understand core HTML concepts through hands-on learning. By downloading and experimenting with these examples, you can see how HTML elements work together to build simple web pages. Whether you are just starting out or revising the basics, these free HTML samples offer a practical foundation to strengthen your web development skills and move forward with confidence.
FAQ
Q.1 Where I can find simple html sample code?
You can find simple html sample code https://basicscomp.com/html-sample-code/ at no cost.
Q.2 Where I can download html web page examples with source code?
From this URL you can download html web page examples with source code https://basicscomp.com/html-sample-code/ for free.
Q.3 Where can I find sample html files download?
From this URL you find sample html files https://basicscomp.com/html-sample-code/ for free.
Q.4 Where can I get html sample code free?
At https://basicscomp.com/html-sample-code/ you can get html sample code free.
Q.5 What are examples of HTML codes?
Examples of HTML codes are headings, paragraphs, images, links, lists, tables, and forms written using HTML tags such as <h1>, <p>, <img>, <a>, <ul>, <table>, and <form>.
Q.6 How to write a simple HTML code?
You can use a plain editor such as Notepad or Notepad++ to write a simple HTML code and run it in your browser. To learn more about how to create Html file, read our article https://basicscomp.com/create-your-first-html-document/
Q.7 What does HTML code look like?
Html code looks like as under;
<html>
<head>
<title> What does HTML code look like </title>
</head>
<body>
<p> This is how a basic HTML code looks like</p>
</body>
</html>
Q.8 What is HTML with an example?
Html stands for hypertext markup language. It is a markup language which is used to create websites. It can create stunning websites when combined with CSS. <p> This is a new paragraph </p> is an example of html paragraph tag.
Q.9 What is HTML for beginners?
Html stands for hypertext markup language. It is a markup language which is used to create websites. To learn more about how to create Html file, read our article https://basicscomp.com/create-your-first-html-document/. We have also compiled a list of 21 html sample code for beginners to start with. Here is the link to check out https://basicscomp.com/html-sample-code/
Q.10 What is an HTML 5 example?
HTML5 example includes the use of <!DOCTYPE html> and semantic tags like <header>, <section>, <article>, and <footer>.
Q.11 What is HTML 10 lines?
HTML 10 lines usually refer to a very basic HTML structure written in around ten lines including <html>, <head>, <title>, and <body> tags.
Q.12 What is HTML in 200 words?
HTML, or HyperText Markup Language, is the standard code used to create the foundation of every website on the internet. It acts as the skeleton of a web page, defining its structure and organizing its content so that web browsers can display it correctly. HTML works by using “tags,” which are instructions enclosed in angle brackets, such as <h1> for a main heading or <p> for a paragraph. These tags tell the browser what each piece of content is. For example, they distinguish a bulleted list from a table of data, or an image from a text link. When you visit a site, your browser downloads the HTML file and renders it into the visual layout you see. While HTML handles the raw structure, it typically works alongside two other technologies: CSS (Cascading Style Sheets), which handles the design (colors, fonts, layout), and JavaScript, which handles interactivity (pop-ups, animations). However, HTML remains the essential starting point; without it, a browser would not know how to present the information on the screen. It is the fundamental building block of the World Wide Web.
Q.13 Is HTML a programming language?
No, html is a markup language which is the basis of the webpages.
Q.14 Is HTML basic coding?
Yes, Html is a basic coding and it can be complex when combined with CSS and Javascript and other frameworks like these which can help to create stunning and professional web applications and website.
Q.15 Is HTML coding easy?
Yes, Html coding is easy and a good option for beginners to start with coding. Interestingly, it is the basis for other different frameworks and libraries which run on it.
Q.16 Is HTML easy for beginners?
Yes, Html is easy for beginners and can be turned into a useful tool when combined with CSS and Javascript. It is the basis for the website and different frameworks and libraries which run with help of html as being the foundation.
Q.17 Is HTML coding difficult to learn?
No, html coding is not difficult to learn. Start with basics and advance to CSS, Javascript, bootstrap and other frameworks.
Q.18 What is the main disadvantage of HTML?
The main disadvantage of the Html is that it is static and today’s modern websites and applications require dynamic data and interaction which html alone cannot handle.
Q.19 What is the difference between HTML and HTML5?
HTML5 is the latest version of HTML and includes support for audio, video, semantic tags, and better structure compared to older HTML versions.
Q.20 What’s the difference between HTML and CSS?
HTML is used to structure the content of a webpage, while CSS is used to style and design the webpage.
Q.21 What is the correct HTML syntax?
The correct html syntax is its opening and closing tags. If you miss any of the tags, you could mess up the entire page or the coding itself will start to appear on the webpage. Html is not a friendly language which does not raise errors often but silently fails.
Q.22 What are the basic rules of HTML?
Opening
< >and closing tags</ >Order of tags
<html><head></head><body></body></html>Must have opening tags and closing tags
Some tags don’t have closing tags for example,
<hr>and<br>
Q.23 What are the basics of HTML?
Html stands for HyperText Markup Language.
Opening
< >and closing tags</ >Order of tags
<html><head></head><body></body></html>Must have opening tags and closing tags
Some tags don’t have closing tags for example,
<hr>and<br>
Q.24 What is the starter code for HTML?
The following is the starter code for html
<html>
<head>
</head>
<body>
</body>
</html>
Q.25 What is the starting of the HTML code?
<html> is the starting of the HTML code and the ending of the HTML is </html>.
Q.26 What is the very first line of code that every HTML document should have?
<html> is the very first line of code that every HTML document should have.
Q.27 Can I build a website with just HTML?
Yes, you can build a website with just HTML but when it is combined with CSS the result is awesome.
Q.28 Can ChatGPT create HTML?
Yes, ChatGPT create HTML. Include in your prompt format: Html or any other signal which lets the ChatGPT know the output is required in html format. ChatGPT gives html as code snippet which can be easily copied to any project.
Q.29 Can ChatGPT create a website?
Yes, ChatGPT can create website code, but hosting, testing, and deployment must be done by the user.
Q.30 Can AI write HTML code?
Yes, AI can write html code very well. AI tools like Gemini and ChatGPT are trained to write html code professionally and fast.
Q.31 Can I write HTML code in Notepad?
Yes, you can write html code in Notepad. Once you write the code, save it as html and open the html file by double clicking.
Q.32 Can I write HTML in Word?
Yes, you can write html in Word but when you put it into your project make sure to remove formatting. MS Word may add extra code to preserve formatting.
Q.33 Can I run HTML code on my phone?
Yes, you can run html code on your phone by using its browser. Save the file as html and open it using a browser app.
Q.34 Can I learn HTML in 1 day?
No, Html can’t be learned in 1 day. One day is good for recap if you have already learned html.
Q.35 Can I learn HTML in 2 days?
No, Html can’t be learned fully in 2 days. However, 2 days of consistent learning can help you understand many concepts or revise HTML if you have learned it before.
Q.36 Can I learn HTML in 7 days?
Yes, you can learn html in 7 days with consistent practice and small projects.
Q.37 Can I learn HTML by myself?
Yes, you can learn by yourself. There are plenty of resources such as https://www.w3schools.com/html/ which make learning interactive.
Q.38 Can I learn HTML on my own?
Yes, you can learn html on your own. AI tools can assist, but always review and test your code.
Q.39 Where do I write my HTML code?
You can write html code in Notepad. Save it as .html and open it in a browser.
Q.40 Where can I practice HTML coding?
You can practice html coding on https://www.w3schools.com/html which provides interactive examples.
Q.41 What software do I need for HTML?
You need a plain text editor such as Notepad and a browser such as Chrome or Firefox.
Q.42 How to start coding in HTML?
Open Notepad, write HTML tags, save the file as .html, and open it in a browser.
Q.43 How to write HTML code for beginners?
Use the following basic html code:
<html>
<head>
</head>
<body>
</body>
</html> , , ,
,
, and