What Is HTML?
Before learning HTML code for website, let us understand what HTML is.
Hypertext Markup Language is the standard coding language used to create and design web pages. It provides the basic structure of a website by using various tags and elements to organize content.Â
By learning HTML, you gain the ability to build and design web pages from scratch, ensuring they are well-organized and accessible. Whether you’re creating a simple blog or a complex website, understanding HTML is the first step in web development.Â
Essential HTML Code For Website
When developing a website, certain HTML codes are essential for creating a well-structured and functional web page. Here are some of the key elements that you should know before starting your journey of creating a website.Â
1. DOCTYPE Declaration
The Doctype Declaration in HTML is a short code that tells web browsers what version of HTML your webpage is using. It helps the browser understand how to display the content correctly.Â
This declaration is placed at the very top of an HTML document. The basic syntax of this declaration is given below for your better understanding.
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â HTML Code For Website |
| <!DOCTYPE html> |
2. HTML Tag
The <html> tag is basically used to wrap all the content of the web page. It is the root element of an HTML document used just after the Doctype declaration.Â
The basic syntax of HTML tags is written below for your reference-
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â HTML Code For Website |
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â HTML Tag |
| <!DOCTYPE html>
<html>Â Content is written here </html> |
3. Head Section
The head section in HTML is a crucial part of an HTML document that contains meta-information about the web page. This information is not displayed directly on the web page but is used by browsers and search engines to understand and manage the content.
The head section basically contains links to the stylesheets, metadata, and title of the web page. Here is an example of a complete head section for your better understanding-
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â HTML Code For Website |
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Head Section |
| <head>
  <title>My Dynamic Web Page</title>   <meta charset=”UTF-8″>   <meta name=”description” content=”A description of my dynamic web page.”>   <meta name=”keywords” content=”dynamic, web, page”>   <meta name=”author” content=”Sahil Chikara”>   <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>   <link rel=”stylesheet” href=”styles.css”>   <link rel=”icon” href=”favicon.ico”>   <script src=”script.js”></script> </head> |
4. Body Section
The body section in HTML is where all the content that will be displayed on the web page goes. This is where you place headings, text, images, links, lists, tables, and other elements that you want users to see when they visit your website.
The body section is enclosed within the <body> tags. Here’s a simple example of the body section written below for your better understanding
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â HTML Code For Website |
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Body Section |
| <body>
  Content goes here </body> |
5. Headings
Headings are written in the body section of an HTML document and are used to define the structure and hierarchy of your content. They help in organizing the content, making it easier for users to read and understand the web page.
HTML provides six levels of headings, starting from <h1> to <h6>, with <h1> being the most important and <h6> the least. Here’s a breakdown of how headings work:
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â HTML Code For Website |
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Headings |
| <body>
  <h1>Introduction to HTML</h1>   <h2>What is HTML?</h2>   <h3>Basic Elements</h3>      <h4>Types Of Basic Elements</h4> </body> |
6. ParagraphÂ
In HTML, the <p> tag is used to define paragraphs of text within the body section of a document. Paragraphs are essential for structuring textual content on a web page, making it easier for readers to interact and understand. Here’s how paragraphs work in HTML:
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â HTML Code For Website |
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Paragraph |
| <body>
  <h1>Introduction to HTML</h1>   <p>This is a paragraph of text introducing HTML.</p>  <h2>What is HTML?</h2>   <p>This paragraph is providing information related to HTML.</p> </body> |
7. Links
In HTML, links are used to connect web pages and various external resources together, allowing users to navigate between different pages or access external content.Â
Links are created using the <a> tag and the href attribute, which specifies the URL of the destination. Here’s how links work in HTML:
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â HTML Code For Website |
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Links |
| <a href=”https://www.example.com”>Visit Example.com</a> |
8. Images
Images in HTML are included using the <img> tag. Images are essential for adding visual content to web pages, such as photographs, illustrations, icons, and logos.
The basic example of adding an image is mentioned below for your better understanding.
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â HTML Code For Website |
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Image |
| <img src=”Dog.jpg” alt=”Image of a Dog”> |
- The src attribute specifies the URL or file path of the image.Â
- The alt attribute provides alternative text for the image, which is displayed if the image fails to load or for accessibility purposes.
9. Lists
In HTML, lists are used to organize and display information in a structured manner. There are two main types of lists: ordered lists (<ol>) and unordered lists (<ul>).
- Ordered Lists (<ol>):
- Ordered lists are used when the sequence of items is important.
- Each item in an ordered list is marked with a number or letter.
- The numbering automatically increments, starting from 1 by default.
- <li> (list item) tag is used to define each item within the list.
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â HTML Code For Website |
|                                               Ordered Lists |
| <ol>
  <li>First item</li>   <li>Second item</li>   <li>Third item</li> </ol> |
- Unordered Lists (<ul>):
- Unordered lists are used when the sequence of items is not so important.
- Each item in an unordered list is marked with a bullet point or other marker.
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â HTML Code For Website |
|                                               Unordered Lists |
| <ul>
  <li>Potato</li>   <li>Tomato</li>   <li>Bitter Guard</li> </ul> |
Basic Example Of HTML Code For Website
Here is an example of a basic HTML web page structure containing all the necessary elements mentioned above, going through this will help you to understand the basic syntax required for creating a web page.
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â HTML Code For Website |
| <!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> Â Â Â Â <ul> Â Â Â Â Â Â Â Â <li><strong>Car 1:</strong> <a href=”car1.html”>View details</a></li> Â Â Â Â Â Â Â Â <li><strong>Car 2:</strong> <a href=”car2.html”>View details</a></li> Â Â Â Â Â Â Â Â <li><strong>Car 3:</strong> <a href=”car3.html”>View details</a></li> Â Â Â Â </ul> Â Â Â Â <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> Â Â Â Â <h2>Contact Us</h2> Â Â Â Â <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> |
Advantages Of Using HTML
Using HTML in a web page offers several advantages:
- HTML is supported by all web browsers, ensuring that your web pages can be accessed and viewed by a wide audience.
- HTML provides a structured way to organize content on a web page, making it easier for visitors to navigate and understand the information presented.
- Search engines like Google and Bing rely on HTML to understand and index web pages, helping to improve the visibility of your site in search results.
- HTML documents are simple and easy to edit, allowing you to update and modify your web pages quickly and efficiently.
- HTML can be easily integrated with other web technologies such as CSS for styling and JavaScript for interactivity, allowing you to create dynamic and visually appealing web pages.
- HTML files are lightweight and load quickly, ensuring a smooth and seamless user experience for visitors to your website.
Overall, HTML provides a solid foundation for building accessible, and well-structured web pages that effectively communicate your message to your audience.
Learn HTML With PW Skills
Enroll in our Comprehensive Web Development Course to learn the principles, basics, 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, and JavaScript. This course is also equipped with interactive instructor-led classes, daily practice sheets, regular doubt sessions, and PW skills alumni support for your better growth, helping you to get your desired job in the field of web development.
HTML Code For Website FAQs
How to learn HTML Code?
You can start learning HTML Code by practicing HTML code daily, along with this you can also enroll in our PW Skills Web development course which will help you to learn all the essential languages and tools required for web development, including- HTML, CSS, Javascript and much more.
Is HTML easy to learn?
Yes, HTML is generally considered easy to learn. It has a straightforward syntax, uses plain text, and consists of a set of elements and attributes that are easy to understand and implement.
Can I learn HTML in 3 Days?
Yes, you can learn the basics of HTML in 3 days. HTML is relatively simple and straightforward, and with dedicated time and effort, you can understand the fundamental concepts.
