Master the Building Blocks of the Web: Introduction to HTML Codes

Want to understand HTML codes for web development?

HTML codes are the basic building blocks of all web pages. They tell browsers how to display text, images, and other content. Learning HTML is a fundamental step if you want to create websites.

This blog explains the core ideas behind HTML code and covers good practices for writing clean and organized code. Understanding these principles will teach you how to structure your web content effectively.

Keep reading to build a strong foundation in HTML and improve your web development skills.

Basic HTML Structure

Every HTML document follows a basic HTML structure. This includes the <!DOCTYPE html> declaration defines the document type and version of HTML used. An HTML document starts with the <html> tag and ends with the </html> tag.

The HTML document has two main sections: the <head> and the <body>. The <head> contains meta-information about the HTML document, while the <body> contains the visible content of the web page.

1<!DOCTYPE html>
2<html>
3<head>
4  <title>My First Web Page</title>
5</head>
6<body>
7  <h1>Welcome to My Web Page</h1>
8  <p>This is a paragraph of text on my first web page.</p>
9</body>
10</html>
11

Common HTML Elements

HTML elements are the building blocks of HTML documents. Each HTML element is defined by HTML tags, which include an opening tag and a closing tag. Some common HTML elements include headings <h1> to <h6>, paragraphs <p>, links <a>, and images <img>. HTML tags are used to mark up the content and give it structure. For example, HTML headings (<h1>, <h2>, etc.) are used to define headings on a web page.

1<h1>This is an H1 Heading</h1>
2<h2>This is an H2 Heading</h2>
3<p>This is a paragraph.</p>
4<a href="<https://www.example.com>">This is a link</a>
5<img src="image.jpg" alt="DhiWise Logo">

The Role of Doctype HTML

The <!DOCTYPE html> declaration is essential in HTML documents. It tells the web browser which version of HTML the document is using, ensuring that the HTML code is interpreted correctly. Using the correct doctype ensures your web pages are displayed consistently across browsers.

1<!DOCTYPE html>
2<html>
3<head>
4  <title>Example of Doctype HTML</title>
5</head>
6<body>
7  <p>This document uses the HTML5 doctype declaration.</p>
8</body>
9</html>
10

HTML Comments and Their Use

HTML comments are used to add notes or explanations within the HTML code. They are not displayed in the web browser and are useful for documenting the HTML code for yourself or other developers. HTML comments start with .

1<!DOCTYPE html>
2<html>
3<head>
4  <title>HTML Comments Example</title>
5</head>
6<body>
7  <!-- This is a comment and will not be displayed in the browser -->
8  <p>This is a paragraph.</p>
9</body>
10</html>
11

Writing HTML Documents

Choosing an HTML Editor

Choosing the right HTML editor is crucial for writing efficient HTML code. An HTML editor is a software application that helps you write and edit HTML documents. Popular HTML editors include Visual Studio Code, Sublime Text, and Atom. These editors offer syntax highlighting, auto-completion, and error detection, making writing HTML code easier and more efficient.

Structuring an HTML Document

Structuring an HTML document involves organizing your HTML code into a readable and logical format. A well-structured HTML document starts with the <!DOCTYPE html> declaration, followed by the <html> tag, encompasses the entire document. Inside the <html> tag, you have the <head> and <body> sections. The <head> section contains meta information, such as the web page's title, while the <body> section contains the actual content that will be displayed on the web page.

1<!DOCTYPE html>
2<html>
3<head>
4  <title>Sample HTML Document</title>
5</head>
6<body>
7  <h1>Main Heading</h1>
8  <p>This is a sample paragraph in an HTML document.</p>
9</body>
10</html>
11

HTML Tags and Their Purpose

HTML tags are used to define and structure the content of an HTML document. Each HTML tag serves a specific purpose. For example, the <h1\> to <h6\> tags are used for headings, the <p> tag is used for paragraphs, and the <a> tag is used for creating links. Each HTML tag typically consists of an opening tag, the content, and a closing tag.

1<h1>This is an H1 Heading</h1>
2<p>This is a paragraph.</p>
3<a href="<https://www.example.com>">This is a link</a>
4

Creating HTML Pages

Creating HTML pages involves writing HTML code to define the structure and content of a web page. Start by creating a new HTML document in your chosen HTML editor. Use HTML tags to add headings, paragraphs, links, and images to your HTML page. Remember to save your HTML document with a .html extension to view it in a web browser.

By mastering the basics of HTML code formatting and structure, you can create well-organized and functional web pages that display correctly in different browsers and enhance the user experience.

Styling HTML Pages with CSS

CSS, or Cascading Style Sheets, is a stylesheet language used to control the presentation of HTML documents. By applying CSS to your HTML code, you can enhance the look and feel of your web pages. CSS allows you to style elements, control layout, and improve the overall aesthetics of your HTML page.

Linking CSS to HTML

To link CSS to an HTML document, you use the <link> tag within the <head> section of your HTML document. This method allows you to keep your CSS in a separate file, which helps organize your code and make it more maintainable. Here’s how you can link an external CSS file to your HTML document:

1<!DOCTYPE html>
2<html>
3<head>
4  <title>Linking CSS to HTML</title>
5  <link rel="stylesheet" type="text/css" href="styles.css">
6</head>
7<body>
8  <h1>Welcome to My Styled Page</h1>
9  <p>This is a paragraph styled with CSS.</p>
10</body>
11</html>
12

Inline and External CSS

CSS can be applied to inline, internal, and external HTML elements. Inline CSS is applied directly within an HTML tag using the style attribute. External CSS is written in a separate .css file and linked to the HTML document. Internal CSS is written within the <style> tag inside the <head> section of the HTML document.

Inline CSS

1<!DOCTYPE html>
2<html>
3<head>
4  <title>Inline CSS Example</title>
5</head>
6<body>
7  <h1 style="color: blue;">This is a Blue Heading</h1>
8  <p style="font-size: 16px;">This paragraph has a font size of 16px.</p>
9</body>
10</html>
11

External CSS

1<!DOCTYPE html>
2<html>
3<head>
4  <title>External CSS Example</title>
5  <link rel="stylesheet" type="text/css" href="styles.css">
6</head>
7<body>
8  <h1>This is an H1 Heading</h1>
9  <p>This paragraph is styled using an external CSS file.</p>
10</body>
11</html>
12

Cascading Style Sheets for Layout

CSS is essential for controlling the layout of your web pages. You can use CSS to create multi-column layouts, align elements, and manage spacing. Layout techniques include using Flexbox and Grid, which provide powerful tools for designing responsive web pages.

Flexbox Layout

1<!DOCTYPE html>
2<html>
3<head>
4  <title>Flexbox Layout Example</title>
5  <style>
6    .container {
7      display: flex;
8      justify-content: space-around;
9    }
10    .box {
11      width: 100px;
12      height: 100px;
13      background-color: lightblue;
14      margin: 10px;
15    }
16  </style>
17</head>
18<body>
19  <div class="container">
20    <div class="box">Box 1</div>
21    <div class="box">Box 2</div>
22    <div class="box">Box 3</div>
23  </div>
24</body>
25</html>
26

Styling Text and Font Size

CSS allows you to control the appearance of text, including font size, color, and style. By using CSS, you can make your text more readable and visually appealing.

1<!DOCTYPE html>
2<html>
3<head>
4  <title>Styling Text with CSS</title>
5  <style>
6    h1 {
7      font-size: 24px;
8      color: darkblue;
9    }
10    p {
11      font-size: 16px;
12      color: gray;
13    }
14  </style>
15</head>
16<body>
17  <h1>Styled Heading</h1>
18  <p>This paragraph is styled with a font size of 16px and gray color.</p>
19</body>
20</html>
21

Adding Multimedia Elements

Inserting Images with the Src Attribute

Adding images to your HTML documents enhances the visual appeal of your web pages. The <img> tag embeds images, and the src attribute specifies the path to the image file. Using the src attribute correctly ensures that images are displayed properly.

1<!DOCTYPE html>
2<html>
3<head>
4  <title>Inserting Images</title>
5</head>
6<body>
7  <h1>My Web Page</h1>
8  <img src="image.jpg" alt="Description of the image">
9</body>
10</html>
11

Using Alt Attribute for Accessibility

The alt attribute in the <img> tag provides alternative text for an image if it cannot be displayed. It is also essential for accessibility, as screen readers use the alt text to describe images to visually impaired users. Including descriptive alt text helps improve the accessibility and SEO of your web page.

1<!DOCTYPE html>
2<html>
3<head>
4  <title>Using Alt Attribute</title>
5</head>
6<body>
7  <h1>Accessibility Example</h1>
8  <img src="image.jpg" alt="A scenic view of mountains during sunset">
9</body>
10</html>
11

Embedding Videos and Audio

HTML5 makes embedding videos and audio into your web pages easily without needing third-party plugins. The <video> and <audio> tags are used for this purpose. These tags contain attributes to control playback, such as controls, autoplay, and loop.

Embedding a Video

1<!DOCTYPE html>
2<html>
3<head>
4  <title>Embedding Video</title>
5</head>
6<body>
7  <h1>Video Example</h1>
8  <video width="320" height="240" controls>
9    <source src="movie.mp4" type="video/mp4">
10    Your browser does not support the video tag.
11  </video>
12</body>
13</html>
14

Embedding Audio

1<!DOCTYPE html>
2<html>
3<head>
4  <title>Embedding Audio</title>
5</head>
6<body>
7  <h1>Audio Example</h1>
8  <audio controls>
9    <source src="audio.mp3" type="audio/mpeg">
10    Your browser does not support the audio element.
11  </audio>
12</body>
13</html>
14

Multimedia Elements in HTML

Multimedia elements in HTML include images, videos, and audio, which can significantly enhance the user experience. Using these elements effectively requires understanding the various attributes and how to implement them in your HTML code. Ensure your multimedia elements are optimized for different devices and browsers to provide a seamless experience.

1<!DOCTYPE html>
2<html>
3<head>
4  <title>Multimedia Elements</title>
5</head>
6<body>
7  <h1>My Multimedia Web Page</h1>
8  <img src="image.jpg" alt="A beautiful landscape">
9  <video width="320" height="240" controls>
10    <source src="movie.mp4" type="video/mp4">
11  </video>
12  <audio controls>
13    <source src="audio.mp3" type="audio/mpeg">
14  </audio>
15</body>
16</html>
17

Handling Links and Href Attribute

Links are essential for navigating between web pages. The <a> tag, combined with the href attribute, is used to create hyperlinks. The href attribute specifies the URL of the page the link goes to. Proper use of links and the href attribute improves the navigation and usability of your web page.

1<!DOCTYPE html>
2<html>
3<head>
4  <title>Handling Links</title>
5</head>
6<body>
7  <h1>Link Example</h1>
8  <p>Visit <a href="<https://www.example.com>">Example</a> for more information.</p>
9</body>
10</html>
11

Advanced HTML Techniques

HTML5 New Elements

HTML5 introduced several new elements that enhance the semantics and structure of web pages. These elements help define different web page parts more clearly, making it easier for developers and search engines to understand the content. Some of the new elements include <header>, <footer>, <article>, <section>, and <nav>.

1<!DOCTYPE html>
2<html>
3<head>
4  <title>HTML5 New Elements</title>
5</head>
6<body>
7  <header>
8    <h1>My Website</h1>
9    <nav>
10      <a href="#home">Home</a>
11      <a href="#about">About</a>
12      <a href="#contact">Contact</a>
13    </nav>
14  </header>
15  <section>
16    <article>
17      <h2>Article Title</h2>
18      <p>This is an article about HTML5 new elements.</p>
19    </article>
20  </section>
21  <footer>
22    <p>&copy; 2024 My Website</p>
23  </footer>
24</body>
25</html>
26

Understanding Semantic HTML

Semantic HTML uses elements that convey the meaning of the content, improving accessibility and SEO. Semantic tags like <header>, <footer>, <article>, and <section> make it easier for browsers and search engines to interpret the structure and importance of the content on a web page.

1<!DOCTYPE html>
2<html>
3<head>
4  <title>Semantic HTML</title>
5</head>
6<body>
7  <header>
8    <h1>Semantic HTML Example</h1>
9  </header>
10  <section>
11    <article>
12      <h2>Understanding Semantic HTML</h2>
13      <p>Semantic HTML enhances the meaning and structure of web pages.</p>
14    </article>
15  </section>
16  <footer>
17    <p>Footer Information</p>
18  </footer>
19</body>
20</html>
21

Forms and Input Elements

Forms are crucial for collecting user input on web pages. HTML provides a variety of input elements such as text fields, radio buttons, checkboxes, and submit buttons. Each input element serves a specific purpose and can be customized using attributes like type, name, value, and placeholder.

1<!DOCTYPE html>
2<html>
3<head>
4  <title>HTML Forms</title>
5</head>
6<body>
7  <h1>Contact Form</h1>
8  <form action="/submit_form" method="post">
9    <label for="name">Name:</label>
10    <input type="text" id="name" name="name" placeholder="Your name">
11    <br>
12    <label for="email">Email:</label>
13    <input type="email" id="email" name="email" placeholder="Your email">
14    <br>
15    <input type="submit" value="Submit">
16  </form>
17</body>
18</html>
19

HTML and JavaScript Integration

Integrating HTML with JavaScript allows you to create dynamic and interactive web pages. JavaScript can be used to manipulate HTML elements, handle events, and update the content of web pages without reloading them. Using the <script> tag, you can include JavaScript code within your HTML documents.

1<!DOCTYPE html>
2<html>
3<head>
4  <title>HTML and JavaScript</title>
5  <script>
6    function showMessage() {
7      alert('Hello, world!');
8    }
9  </script>
10</head>
11<body>
12  <h1>Interactive Web Page</h1>
13  <button onclick="showMessage()">Click Me</button>
14</body>
15</html>
16

Building Interactive Web Pages

Creating interactive web pages involves using HTML, CSS, and JavaScript together. By combining these technologies, you can build web pages that respond to user actions, such as clicking buttons, filling out forms, and navigating through different sections.

1<!DOCTYPE html>
2<html>
3<head>
4  <title>Interactive Web Page</title>
5  <style>
6    .hidden {
7      display: none;
8    }
9  </style>
10  <script>
11    function toggleContent() {
12      var content = document.getElementById('extraContent');
13      if (content.classList.contains('hidden')) {
14        content.classList.remove('hidden');
15      } else {
16        content.classList.add('hidden');
17      }
18    }
19  </script>
20</head>
21<body>
22  <h1>Welcome to My Interactive Web Page</h1>
23  <button onclick="toggleContent()">Toggle Content</button>
24  <div id="extraContent" class="hidden">
25    <p>This is additional content that can be shown or hidden.</p>
26  </div>
27</body>
28</html>
29

By mastering these advanced HTML techniques, you can create more sophisticated, accessible, and interactive web pages that enhance the user experience and improve your website's functionality.

The Bottom Line!

Mastering HTML codes and advanced techniques is essential for creating robust, user-friendly web pages. Understanding the basic HTML structure, and common elements, and using CSS for styling and multimedia integration form the foundation of effective web development. Integrating JavaScript can enhance interactivity, making your web pages more engaging.

Experiment with different HTML tags, CSS styles, and JavaScript functions to build your skills and create more sophisticated web applications. Learning web development is ongoing, and staying updated with the latest technologies and best practices will keep you at the forefront of this ever-evolving field.

Experience our new AI powered Web and Mobile app building platformrocket.new. Build any app with simple prompts- no code required.

HTML Codes for Beginners: Building Your First Web Page

Jinal Thakkar

Got a Figma? Or just a shower thought?

Figma to Code, instantly

Convert designs into high-quality, modular code with support for all the modern frontend frameworks you use daily.

About the Author

Jinal Thakkar

Related questions

1. Do I need any special software to write HTML?

2. How can I view the HTML code I've written as a web page?

Read More

HTML Codes for Beginners: Building Your First Web Page

Jinal Thakkar

Got a Figma? Or just a shower thought?

Figma to Code, instantly

Convert designs into high-quality, modular code with support for all the modern frontend frameworks you use daily.

About the Author

Jinal Thakkar

Related questions

1. Do I need any special software to write HTML?

2. How can I view the HTML code I've written as a web page?

Read More

Basic HTML Structure

Common HTML Elements

The Role of Doctype HTML

HTML Comments and Their Use

Writing HTML Documents

Choosing an HTML Editor

Structuring an HTML Document

HTML Tags and Their Purpose

Creating HTML Pages

Styling HTML Pages with CSS

Linking CSS to HTML

Inline and External CSS

Inline CSS

External CSS

Cascading Style Sheets for Layout

Flexbox Layout

Styling Text and Font Size

Adding Multimedia Elements

Inserting Images with the Src Attribute

Using Alt Attribute for Accessibility

Embedding Videos and Audio

Embedding a Video

Embedding Audio

Multimedia Elements in HTML

Handling Links and Href Attribute

Advanced HTML Techniques

HTML5 New Elements

Understanding Semantic HTML

Forms and Input Elements

HTML and JavaScript Integration

Building Interactive Web Pages

The Bottom Line!