What Is HTML?
HTML Code Example- HTML stands for HyperText Markup Language, it is the fundamental language used to create and design web pages. It provides the basic structure for web content, using a system of tags and elements. With HTML, you can transform simple text into an organized and visually appealing webpage, making it an essential skill for anyone interested in web development.
Understanding HTML opens the door to creating and customizing your own websites, giving you the power to share information, ideas, and creativity with the world.
Why HTML?
Learning HTML is essential for beginners because it serves as the basic building block of web development. Here are a few reasons why starting with HTML is beneficial:
- Foundation of Web Pages: HTML provides the basic structure of all web pages, making it the first step in creating any website.
- Ease of Learning: HTML is straightforward and easy to learn, even for those with no prior coding experience, making it an excellent entry point into programming and web development.
- Essential Skill: Understanding HTML is crucial for anyone looking to work in web design, development, or digital marketing, as it allows you to create and edit web content.
- Enhanced Creativity: With HTML, you can bring your ideas to life on the web, creating custom websites, blogs, or portfolios that showcase your unique style.
- Gateway to Advanced Technologies: Learning HTML lays the groundwork for learning more complex languages and technologies like CSS and JavaScript.
HTML Code Example
After understanding how HTML plays a crucial role in the web development process, let us understand the simple structure of an HTML document with an HTML Code example.
Before going through these examples, it is essential to understand the basic meaning and usage of each tag in HTML, we have made a dedicated article on basic HTML tags required to build a website. Going through these HTML tags will help you understand the basics and give you a clear understanding of all the HTML examples shown below.
1. Basic Structure Of An HTML Document
The basic structure of an HTML document is like a skeleton that holds the content and elements of a webpage. It starts with `<!DOCTYPE html>` to define the document type, followed by the `<html>` tag that wraps the entire content. Inside `<html>`, there are two main parts: `<head>` and `<body>`. The `<head>` section contains meta information about the page, like its title, character set, and links to stylesheets. The `<body>` section holds the visible content, such as headings, paragraphs, images, and links. This simple structure of an HTML document is shown below for your reference.
| HTML Code Example Of A Basic Web Page |
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″ <title>My First HTML Page</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is a paragraph of text on my first HTML page.</p> </body> </html> |
2. Adding Headings and Paragraphs
Adding headings and paragraphs in HTML helps in organizing and presenting your content clearly. Headings are created with `<h1>` to `<h6>` tags, defining the titles and subtitles on your webpage, with `<h1>` being the most important and `<h6>` the least.
Paragraphs are made using the `<p>` tag and contain blocks of text. This structure makes your content easy to read and navigate. For example, you mainly use `<h1>` for your main title, `<h2>` for section headings, and `<p>` tags to write the actual content under those headings. This simple organization enhances the readability and structure of your webpage.
Below is a basic example showcasing how you can add headings and paragraphs to your web page, read the below HTML code example for a better understanding of the concept.
| HTML Code Example For Adding Paragraph And Headings |
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″> <title>About Headings and Paragraphs</title> </head> <body> <h1>Main Heading</h1> <h2>Subheading</h2> <p>This is a paragraph under the subheading.</p> <h3>Another Subheading</h3> <p>This is another paragraph under a different subheading.</p> </body> </html> |
3. Adding Links
Adding links in HTML allows you to connect your webpage to other web pages or resources on the internet. To create a link on a web page, you basically use the `<a>` tag, which stands for “anchor.” Inside the `<a>` tag, you use the `href` attribute to specify the URL of the page you want to link to. Links are essential for navigation, helping users to easily switch from one page to another. Below is the detailed code for adding a link to a web page, which will help you to understand the topic better.
| HTML Code Example For Adding Links |
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Links Example</title> </head> <body> <h1>Welcome to My Website</h1> <p>Check out my favorite website: <a href=”https://www.example.com>Example.com</a> </p> </body> </html> |
4. Adding Images
Adding images to your website is a great way to make it more engaging and visually appealing. In HTML, you can add images using the `<img>` tag. This tag requires a `src` attribute, which specifies the path to the image file, and an `alt` attribute, which provides alternative text for the image if it cannot be displayed. You can also set the width and height attributes to control the size of the image. Including images can help illustrate your content and make your site more attractive to visitors.
| HTML Code Example |
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″> <title>Adding Images Example</title> </head> <body> <h1>Welcome to My Website</h1> <p>Here is an image of a beautiful scenery:</p> <img src=”https://www.image.com/scenery.jpg” alt=”Beautiful Scenery” width=”500″> </body> </html> |
Basic HTML Code Example
We have written an HTML code example of creating a basic web page of a car store, you can take reference from below for creating a visually appealing and attractive web page of your choice.
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Cars Store</title> </head> <body> <h1>Welcome to the Cars Store</h1> <p>At the Cars Store, we offer a wide selection of vehicles to meet your needs.</p> <h2>Featured Cars</h2> <p> Below you will find all the featured cars, available with us</p> <h2>About Us</h2> <p>The Cars Store has been serving customers for over 20 years. We take pride in offering quality vehicles and excellent customer service.</p> <h3>Contact Us</h3> <p>For inquiries or to schedule a test drive, please <a href=”contact.html”>contact us</a>.</p> <img src=”car.jpg” alt=”Car Image” width=”300″> <p>We look forward to seeing you at the Cars Store!</p> </body> </html> |
Learn HTML With PW Skills
Enroll in our Comprehensive PW Skills Web Development Course to learn the basics, principles, and knowledge of all the tools required for Web development.
Whether you are a beginner or an individual looking to switch your career, this full-stack development course will be the right fit for you: providing a roadmap, and knowledge of all the tools including HTML, CSS, JavaScript and much more.
This course is also equipped with interactive instructor-led classes, daily practice sheets, regular doubt sessions, and PW skills wide alumni support for your better growth, helping you to get your desired job in the field of web development.
HTML Code Example FAQs
How do I write HTML Code?
Writing HTML code involves creating a structured document using HTML tags and elements. A step-by-step process of writing an HTML Code involves:
1. Open a text editor like Notepad, Visual Studio, Sublime Text, or Atom.
2. Create a new file and start with the DOCTYPE declaration to specify the HTML version.
3. Wrap the entire content within the tag.
4. Add the section where all the visible content of the web page will be written.
5. Save the file with a .html extension, for example- “webpage.html”.
6. Open your created file in any web browser.
How to learn HTML Code?
To start learning HTML Code, follow the below-written steps-
1. Start your learning by understanding the basic skills and syntax required to write code.
2. Start by practicing simple codes, which will enhance your learning.
3. Take PW Skills online lessons to learn advanced languages and skills required to build interactive web pages.
4. Join online community channels to interact with experienced web developers and learn from their experience.
5. Work on several real-world projects to build a job-ready portfolio.
Why is HTML Used?
HTML (HyperText Markup Language) is used for several key reasons:
1. It provides the basic framework for web pages, allowing content to be organized with headings, paragraphs, lists, and more.
2. HTML supports embedding images, videos, and other multimedia elements to enhance user experience.
3. It allows the creation of hyperlinks which helps in enabling navigation between web pages and resources.
4. It is supported by all web browsers, ensuring that web pages can be viewed by anyone on the internet.
5. HTML forms the basic foundation stone upon which CSS and JavaScript are applied to style and add functionality to web pages.
