HTML Code

In this comprehensive guide to HTML code, you will explore the fundamentals of creating webpages, from basic codes to more advanced techniques. Delve into essential tags and attributes as you learn to build a basic webpage and enhance it with colour and character codes. As you progress, discover how to use HTML table code for structuring content, and keep your code error-free with the help of an HTML code checker. Finally, gain access to a must-have HTML codes list and popular code examples, perfect for both beginners and experienced web developers.

Introduction to HTML Code

HTML (Hypertext Markup Language) is the standard language used to create and design websites and web applications. This markup language uses various elements called HTML tags to structure content on the Web. By learning HTML code, you can create appealing and functional websites with ease.

Basic HTML Codes for Web Design

When designing a website, there are several basic HTML codes you should be familiar with. These codes help to structure your site's content, set up its layout, and provide formatting options. Some of the most essential HTML elements include:

1. Document Structure

   • !DOCTYPE html: Defines the document type and HTML version.
   • html: The root element of an HTML document.
   • head: Contains meta information, links to CSS/JS, and the title.
   • body: Contains the content of the webpage.

2. Metadata and Linking

   • meta: Provides metadata about the HTML document (e.g., character set, viewport settings).
   • link: Defines relationships between the document and external resources (like CSS files).
   • title: Sets the title of the webpage (shown in the browser's title bar or tab).

3. Text Content

   • h1, h2, ..., h6: Headings, with h1 being the highest and h6 being the lowest level.
   • p: Paragraphs.
   • br: Line break.
   • hr: Thematic break (typically displayed as a horizontal line).

4. Formatting

   • strong: Emphasizes text as important, typically shown as bold.
   • em: Emphasizes text, typically shown as italic.
   • blockquote: Represents a block of quoted content.
   • code: Displays a single line of code.
   • pre: Represents preformatted text.

5. Lists

   • ul: Unordered list.
   • ol: Ordered list.
   • li: List item (used within both and ).

6. Links and Media

   • a: Hyperlink.
   • img: Image.
   • audio: Audio player.
   • video: Video player.

7. Forms

   • form: Represents an interactive form.
   • input: Input field (with various types like text, password, radio, checkbox).
   • textarea: Multi-line text input.
   • button: Clickable button.
   • select: Dropdown list.
   • option: Option in a dropdown list.

8. Divisions and Groups

   • div: A generic container for flow content, which does not inherently represent anything.
   • span: A generic inline container, used to mark up a specific piece of content.

9. Semantic Elements

   • header, footer: Represents the header or footer of a document or section.
   • nav: Represents a section with navigation links.
   • main: Contains the main content of the document.
   • article, section, aside>: Semantic elements defining the structure and meaning of content.

Common Attributes:

1. Global Attributes (can be used on any HTML element, though some will have no effect on certain elements):

   • class: Specifies one or more class names for an element.
   • id: Specifies a unique id for an element.
   • style: Inline CSS style for an element.
   • title: Specifies extra information about an element (usually as a tooltip).

2. Link and Resource Attributes:

   • href: Specifies the URL of a linked resource (used with a, and link).
   • src: Specifies the URL of an embedded resource (used with img, script, audio, video)

3. Form Attributes:

   • action: Specifies where to send form data.
   • method: Specifies the HTTP method to use (e.g., "GET", "POST").
   • name: Name of the input element.
   • value: Value of the input element.
   • placeholder: A hint to the user of what can be entered in the input field.
   • required: Specifies that the input field must be filled out.

4. Input Attributes:

   • type: Specifies the type of input (e.g., "text", "password", "submit", "radio", "checkbox").

5. Media Attributes:

6. controls: Specifies that media controls should be displayed (used with, "audio" and "video").

   • loop: Specifies that the audio/video will start over again when finished.
   • muted: Specifies that the audio output should be muted.
   • autoplay: Specifies that the audio/video should start playing as soon as it's ready.

Beyond these basic HTML codes, you'll also need to be familiar with some essential attributes that can modify HTML elements. Some examples include:

• id: A unique identifier for an element within a page, often used by CSS and JavaScript to target specific elements.
• class: A class name that can be applied to multiple elements and is useful in styling with CSS.
• src: Specifies the URL of external resources, such as images or videos.
• alt: This attribute provides alternative text for images, displayed when the image cannot be loaded, and improves accessibility for visually impaired users.

HTML Code Example: Building a Basic Webpage

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Simple Webpage</title>
<style>
body {
            font-family: Arial, sans-serif;
            margin: 40px;
            background-color: #f4f4f4;
        }
        .container {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 5px;
        }
        h1 {
            color: #333366;
        }
        p {
            color: #666666;
        }
    </style>
</head>
<body>
<div class="container">
<h1>Welcome to My Simple Webpage</h1>
<p>This is a basic webpage made with HTML. It includes a title and a paragraph.</p>
<h2>About Me</h2>
<p>Hi! I'm Jane Doe, a web enthusiast. I love creating web pages and exploring new designs.</p>
<h2>Contact</h2>
<p>You can reach me at: <a href="mailto:jane.doe@example.com">jane.doe@example.com</a></p>
</div>
</body>
</html>

In addition to the elements and attributes listed above, there are many other HTML elements and attributes that can further enrich and improve your website. As you advance in your knowledge of HTML code, you'll discover more ways to create engaging and interactive web pages.

Enhancing HTML with Colour and Character Codes

By incorporating colour and special character codes, you can make your HTML code more appealing and distinctive. These features can be added to style elements and improve the overall appearance of the content, making it more engaging for website visitors.

HTML Colour Codes: Adding Style to Your Webpage

Using HTML colour codes, you can specify the colours for text, backgrounds, borders, and other elements within your website. Colour codes can be written in various formats, including hexadecimal, RGB (Red, Green, Blue), and HSL (Hue, Saturation, Lightness).

• Hexadecimal colour codes: Normally written as a hash symbol (#) followed by six digits or letters, combining Red, Green, and Blue components. For example, #FF5733 represents an orange shade.
• RGB colour codes: Denoted by the "rgb()" function, where R, G, and B represent the intensity values of Red, Green, and Blue (ranges from 0 to 255). For example, rgb(255, 87, 51) is the RGB equivalent of the above orange shade.
• HSL colour codes: Written using the "hsl()" function, where the hue ranges from 0 to 360 degrees, and the saturation and lightness are percentage values from 0% to 100%. For instance, hsl(14, 100%, 60%) represents the same shade of orange.

You can use colour codes to define various styles in your CSS (Cascading Style Sheets) or inline within HTML tags.

How to Choose and Use HTML Colour Codes

Finding the perfect set of colours to match your website's design can be a challenge. However, with a few helpful tools and tips, you can simplify the process and create an appealing colour scheme for your webpage:

1. Colour picker tools: Use online tools and browser extensions, such as Adobe Color CC or ColorZilla, to help you choose and generate colour codes.
2. Colour harmonies: Choose colours based on colour harmonies, such as monochromatic, complementary, or analogous schemes, to ensure a balanced and aesthetically pleasing look.
3. Contrast: Opt for contrasting text and background colours for enhanced readability. Light text on a dark background or vice versa is a common choice.
4. Colour accessibility: Ensure that your colour choices are inclusive to users with colour blindness or visual impairments. Online tools, such as WebAIM or Color Safe, can help create accessible colour palettes.
5. Consistency: Stick to a consistent colour scheme throughout your website to maintain the overall design and brand identity.

Once you have chosen your colour codes, apply them to your website using CSS or inline HTML styles. For example, to set the text colour, use the "color" CSS property or the "style" attribute within the HTML tag:

This text will be in orange colour.

You can also apply colour codes to backgrounds, borders, links, and more by modifying the appropriate CSS properties or inline styles.

HTML Character Codes for Special Symbols

HTML character codes, also known as HTML entities, allow you to incorporate special characters and symbols that may not be available on your keyboard, or display incorrectly if directly typed into the HTML. Some commonly used entities include:

• & - Ampersand
• < - Less than
• > - Greater than
• - Non-breaking space
• € - Euro symbol
• © - Copyright symbol

By using these entities in your HTML code, you can ensure that your text displays correctly and consistently across various browsers and devices.

Using HTML Character Codes Safely and Effectively

To properly use HTML character codes and render special symbols in your web content, follow these guidelines:

By following these best practices, you can safely and effectively use HTML character codes to enhance the visual appeal of your web content and ensure that your special symbols display correctly.

Structuring Content with HTML Table Code

HTML tables offer a way to organise and present data efficiently, allowing you to arrange content in rows and columns, making it easy to navigate and understand. Mastering the art of creating tables can be beneficial for displaying structured information, such as statistics, schedules, or product lists, on your webpages.

Creating Tables in HTML: A Step-by-Step Guide

Building an HTML table involves using a range of tags and elements designed specifically for organising and displaying tabular data. This step-by-step guide will help you understand how to create HTML tables from scratch:

1. Define the table: Begin with the tag to indicate you are creating a table. This tag contains the entire structure, rows, and cells of the table.
2. Create table rows: Utilise the (table row) tag to define each row in your table. The number of rows required depends on the information you wish to present.
3. Add table cells: Insert either (table data) or (table header) tags within the table rows to establish individual cells. While denotes a standard data cell, identifies header cells and often has a different style to distinguish them from the rest.
4. Combine cells with colspan and rowspan: When necessary, use the colspan and rowspan attributes within or tags to merge cells horizontally or vertically. Colspan denotes how many columns the cell should span, whereas rowspan specifies the number of rows.
5. Format your table: To improve readability, include borders, adjust the size, and add other styling options to your table using CSS (Cascading Style Sheets) or inline styles within HTML tags.
6. Enhance accessibility: Implement tags to provide a title or summary of the table's content and use , , and to group the table's content and improve accessibility for screen readers. Note that these tags are optional and are not required for basic table structure.

By following this guide, you can create HTML tables that are both visually appealing and accessible, offering users an optimal browsing experience.

HTML Table Code Example for Organising Data

In this section, we will walk you through an example of creating an HTML table showcasing a list of products and their prices:

table border="1" cellpadding="5" cellspacing="0"
thead                                 
tr
th Product /th                       
th Price /th
/tr
/thead           
caption Product List /caption              
tbody
tr
td Product A /td                    
td £10 /td
/tr                   
tr
td>Product B /td                        
td>£15 /td
/tr                
tr
td Product C /td                        
td £8 /td
/tr
/tbody
/table		
Result: 

This example demonstrates how to use the tags to create a simple table that displays product names and prices in rows and columns. You can customise this basic structure to suit your needs by adding more rows, cells or applying various styling options.

Equipped with this knowledge, you can now create more sophisticated HTML tables to present your data and enhance the functionality and user experience of your website.

Keeping Your HTML Code Error-Free

Creating clean, effective, and error-free HTML code is vital to achieving a well-structured, accessible, and reliable website. By validating your code and identifying common mistakes, you can ensure a better user experience and improve your site's overall performance.

How to Use HTML Code Checker to Validate Your Code

An HTML code checker, also known as an HTML validator, is a tool designed to help you identify and fix errors in your HTML code. By verifying that your code adheres to web standards and fixing issues, you can create a more accessible, stable, and user-friendly website.

There are numerous HTML code checkers available, both online tools and offline software. Here are some steps to guide you through the process of using an HTML code checker to validate your code:

1. Select a validator: Choose an appropriate HTML validator based on your needs and preferences. W3C Markup Validation Service, Nu Html Checker, and HTML Tidy are some popular options.
2. Input your code: Upload your HTML file, provide a URL, or paste your code directly into the validator, depending on the available options.
3. Check settings: Ensure that the validator's settings are configured to check for the correct version of HTML you're using (e.g., HTML5).
4. Run the validator: Initiate the validation process and allow the validator to check your HTML code for any errors or warnings.
5. Analyse the results: Review the report provided by the validator, which will outline errors, warnings, and suggestions for improvement.
6. Fix the issues: Address the identified problems by revising your HTML code accordingly, focusing on critical errors first.
7. Revalidate: After making the necessary changes, validate your code again to ensure that all errors have been resolved.

Regularly using an HTML code checker to validate your code can significantly enhance your website's stability, performance, and overall user experience.

Simple Tips for Identifying Common HTML Errors

In addition to using HTML validators, you can take a proactive approach to identify and avoid common errors when writing HTML code. Below are some simple tips to help you recognise frequent mistakes:

• Unclosed tags: Ensure that every opening tag has a corresponding closing tag, and that they are correctly nested within each other.
• Attribute errors: Double-check your attribute names and values, ensuring they are correctly formatted and enclosed in quotation marks when necessary.
• Missing required elements: Verify that your HTML document includes all essential elements, such as , , , and .
• Misused elements:Utilise HTML elements for their intended purpose to avoid layout or accessibility problems (e.g., don't use
  instead of
• Deprecated elements: Stay up-to-date with the latest HTML specifications and refrain from using outdated elements or attributes.
• Improper nesting: Ensure that your HTML elements are nested correctly, without overlapping or incorrectly enclosing other tags.

By following these simple tips and utilising HTML validators, you can minimise errors in your HTML code, improve your website's performance, and ensure a positive user experience.

Comprehensive HTML Codes Reference

Whether you're a seasoned web developer or a beginner venturing into the world of HTML, having a comprehensive reference of HTML codes at your disposal can significantly improve your efficiency and productivity. This reference guide will provide you with a cheat sheet of essential HTML codes, as well as examples for popular website elements that you will encounter regularly.

HTML Codes List: A Must-Have Cheat Sheet for Web Developers

Keeping a list of commonly used HTML codes can greatly assist in the creation and maintenance of websites and applications. A cheat sheet filled with fundamental tags and attributes allows you to quickly access the necessary information without having to search on-the-fly. Here are some key HTML elements to include in a comprehensive cheat sheet:

Basic HTML Document Structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
</body>
</html>

Head Elements:

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

Text Formatting:

<h1>Heading 1</h1> ... <h6>Heading 6</h6>
<p>Paragraph text</p>
<strong>Bold text</strong>
<em>Italicized text</em>
<abbr title="Hypertext Markup Language">HTML</abbr>
<blockquote cite="source">Blockquote text</blockquote>
<code>Code snippet</code>
<pre>Preformatted text</pre>

Lists:

<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>

Links and Images:

<a href="https://www.example.com">Link Text</a>
<img src="image.jpg" alt="Image description">

Tables:

<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>

Forms:

<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>

Other Useful Tags:

<br>
<hr>
<video src="video.mp4" controls></video>
<audio src="audio.mp3" controls></audio>
<header></header>
<nav></nav>
<main></main>
<article></article>
<aside></aside>
<figure>
<img src="image.jpg" alt="An example image">
<figcaption>Caption for the image</figcaption>
</figure>
<footer></footer>

To further enhance your cheat sheet, consider including useful attributes that are often used with these HTML elements, such as:

• id and class - For targeting specific elements with CSS and JavaScript
• src and alt - For external resources and accessibility purposes
• colspan and rowspan - For customising table layouts
• placeholder, required, and type - For controlling form input elements

Creating a customised, comprehensive cheat sheet will not only save you time but also make your work more consistent and efficient.

By familiarising yourself with these HTML code examples and incorporating them into your cheat sheet, you'll be well-equipped to tackle a wide range of website development tasks effectively and efficiently.