HTML Codes for Beginners: Building Your First Web Page

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.

Copy
<!DOCTYPE html>
<html>
<head>
  <title>My First Web Page</title>
</head>
<body>
  <h1>Welcome to My Web Page</h1>
  <p>This is a paragraph of text on my first web page.</p>
</body>
</html>

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.

Copy
<h1>This is an H1 Heading</h1>
<h2>This is an H2 Heading</h2>
<p>This is a paragraph.</p>
<a href="<https://www.example.com>">This is a link</a>
<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.

Copy
<!DOCTYPE html>
<html>
<head>
  <title>Example of Doctype HTML</title>
</head>
<body>
  <p>This document uses the HTML5 doctype declaration.</p>
</body>
</html>

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 <!-- and end with -->.

Copy
<!DOCTYPE html>
<html>
<head>
  <title>HTML Comments Example</title>
</head>
<body>
  <!-- This is a comment and will not be displayed in the browser -->
  <p>This is a paragraph.</p>
</body>
</html>

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 tag, encompasses the entire document. Inside the tag, you have the and sections. The section contains meta information, such as the web page's title, while the section contains the actual content that will be displayed on the web page.

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 to tags are used for headings, the tag is used for paragraphs, and the tag is used for creating links. Each HTML tag typically consists of an opening tag, the content, and a closing tag.

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 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 tag within the 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:

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 attribute. External CSS is written in a separate file and linked to the HTML document. Internal CSS is written within the tag inside the section of the HTML document.

Inline CSS

External CSS

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

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.

Adding Multimedia Elements

Inserting Images with the Src Attribute

Adding images to your HTML documents enhances the visual appeal of your web pages. The 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.

Using Alt Attribute for Accessibility

The alt attribute in the 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.

Embedding Videos and Audio

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

Embedding a Video

Embedding Audio

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.

Handling Links and Href Attribute

Links are essential for navigating between web pages. The 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.

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 , , , , and .

Understanding Semantic HTML

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

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.

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 tag, you can include JavaScript code within your HTML documents.

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.

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.

<!DOCTYPE html>
<html>
<head>
  <title>Sample HTML Document</title>
</head>
<body>
  <h1>Main Heading</h1>
  <p>This is a sample paragraph in an HTML document.</p>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
  <title>Linking CSS to HTML</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Welcome to My Styled Page</h1>
  <p>This is a paragraph styled with CSS.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Inline CSS Example</title>
</head>
<body>
  <h1 style="color: blue;">This is a Blue Heading</h1>
  <p style="font-size: 16px;">This paragraph has a font size of 16px.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>External CSS Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>This is an H1 Heading</h1>
  <p>This paragraph is styled using an external CSS file.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Flexbox Layout Example</title>
  <style>
    .container {
      display: flex;
      justify-content: space-around;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Styling Text with CSS</title>
  <style>
    h1 {
      font-size: 24px;
      color: darkblue;
    }
    p {
      font-size: 16px;
      color: gray;
    }
  </style>
</head>
<body>
  <h1>Styled Heading</h1>
  <p>This paragraph is styled with a font size of 16px and gray color.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Inserting Images</title>
</head>
<body>
  <h1>My Web Page</h1>
  <img src="image.jpg" alt="Description of the image">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Using Alt Attribute</title>
</head>
<body>
  <h1>Accessibility Example</h1>
  <img src="image.jpg" alt="A scenic view of mountains during sunset">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Embedding Video</title>
</head>
<body>
  <h1>Video Example</h1>
  <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Embedding Audio</title>
</head>
<body>
  <h1>Audio Example</h1>
  <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Multimedia Elements</title>
</head>
<body>
  <h1>My Multimedia Web Page</h1>
  <img src="image.jpg" alt="A beautiful landscape">
  <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
  </video>
  <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
  </audio>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Handling Links</title>
</head>
<body>
  <h1>Link Example</h1>
  <p>Visit <a href="<https://www.example.com>">Example</a> for more information.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 New Elements</title>
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>
  <section>
    <article>
      <h2>Article Title</h2>
      <p>This is an article about HTML5 new elements.</p>
    </article>
  </section>
  <footer>
    <p>&copy; 2024 My Website</p>
  </footer>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Semantic HTML</title>
</head>
<body>
  <header>
    <h1>Semantic HTML Example</h1>
  </header>
  <section>
    <article>
      <h2>Understanding Semantic HTML</h2>
      <p>Semantic HTML enhances the meaning and structure of web pages.</p>
    </article>
  </section>
  <footer>
    <p>Footer Information</p>
  </footer>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>HTML Forms</title>
</head>
<body>
  <h1>Contact Form</h1>
  <form action="/submit_form" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Your name">
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Your email">
    <br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>HTML and JavaScript</title>
  <script>
    function showMessage() {
      alert('Hello, world!');
    }
  </script>
</head>
<body>
  <h1>Interactive Web Page</h1>
  <button onclick="showMessage()">Click Me</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Interactive Web Page</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
  <script>
    function toggleContent() {
      var content = document.getElementById('extraContent');
      if (content.classList.contains('hidden')) {
        content.classList.remove('hidden');
      } else {
        content.classList.add('hidden');
      }
    }
  </script>
</head>
<body>
  <h1>Welcome to My Interactive Web Page</h1>
  <button onclick="toggleContent()">Toggle Content</button>
  <div id="extraContent" class="hidden">
    <p>This is additional content that can be shown or hidden.</p>
  </div>
</body>
</html>