HTML Crash Course for Complete Beginners

2025-02-27

Introduction to Web Development with HTML

Welcome to the world of web development! If you’re taking your first steps towards becoming a web developer, you’ve come to the right place. This chapter will guide you through the fundamentals of HTML, the cornerstone of web page creation.

The Three Pillars of Web Development

Building websites typically involves three core technologies working in harmony:

HTML (HyperText Markup Language): This is the structural foundation of your website. It defines the content and organization of elements like text, images, and other media that users see.

HTML (HyperText Markup Language): HTML is the standard markup language for documents designed to be displayed in a web browser. It provides the structure of a webpage and defines elements within the content.
CSS (Cascading Style Sheets): CSS is responsible for the visual presentation of your website. It controls aspects like colors, spacing, alignment, fonts, and overall aesthetics, making your website visually appealing.
JavaScript: JavaScript adds interactivity to your website. It handles dynamic behaviors such as button clicks, form submissions, animations, and more, making your website engaging and responsive to user actions.

HTML serves as the prerequisite for both CSS and JavaScript in web development. Therefore, mastering HTML is your essential first step in this exciting journey.

Course Overview: What to Expect

This chapter is designed to be a crash course for complete beginners with no prior knowledge of HTML. We will cover essential concepts that are crucial for your initial years in web development.

Key aspects of this course:

Beginner-Friendly: Assumes no prior HTML knowledge.
Comprehensive Coverage: Covers most fundamental HTML concepts necessary for beginners.
Focused on HTML: Concentrates solely on HTML, setting the stage for CSS and JavaScript in subsequent learning.
Practical Approach: Encourages coding along with the examples to facilitate effective learning.
Crash Course Format: While comprehensive, it is not an exhaustive guide covering every single HTML topic.

This chapter is structured to provide you with a solid understanding of HTML, equipping you with the necessary skills to begin building web pages. Remember to take breaks as needed and actively code along to maximize your learning experience.

Setting Up Your Development Environment

To start writing HTML, you will need two essential tools: a web browser and a code editor.

Choosing a Web Browser

A web browser is the application you will use to view and test your HTML code. Popular choices include:

Chrome
Firefox
Edge

For this chapter, we will be using Chrome, but feel free to use any browser you are comfortable with.

Selecting a Code Editor

A code editor is a specialized text editor designed for writing code. It provides features like syntax highlighting, code completion, and debugging tools to enhance your coding experience. Visual Studio Code (VS Code) is highly recommended and widely used in web development.

Installing Visual Studio Code:

Navigate to code.visualstudio.com in your web browser.
Download the installer appropriate for your operating system (Windows, macOS, or Linux).
Follow the installation instructions to install VS Code on your computer.

Installing the Prettier Extension:

Once you have VS Code installed, we will add an extension to help format your HTML code, making it cleaner and more readable.

Open Visual Studio Code.
Click on the Extensions icon in the sidebar (it looks like four squares).
In the search bar, type “Prettier”.
Locate the “Prettier - Code formatter” extension, which should have over 17 million installations.
Click the Install button to install the Prettier extension.

Extension (in Code Editors): An extension is a software add-on that enhances the functionality of a code editor. Extensions can provide features like code formatting, linting, debugging support, and more.

Opening a Project Folder:

To organize your HTML files, it’s best to work within a dedicated folder.

Create a new folder on your computer for this HTML crash course (e.g., “html-crash-course”).
Open Visual Studio Code.
Go to File in the menu bar and click on Open Folder….
Navigate to the folder you created (“html-crash-course”) and select it.

This setup completes your development environment. You are now ready to start learning HTML.

Understanding HTML Fundamentals

What is HTML?

HTML stands for HyperText Markup Language. It is the foundational language for creating web pages.

Markup Language: A markup language is a system for annotating a document in a way that is syntactically distinguishable from the text. These annotations, or “markups,” provide instructions to the computer on how to process and display the text.

While the full expansion is “HyperText Markup Language,” it’s universally known and referred to simply as HTML. Crucially, remember that HTML is a markup language, not a programming language.

Markup Language Nature: HTML uses tags to “mark up” different parts of the content, instructing the web browser on how to structure and display that content. It focuses on structure and presentation rather than logic or computation.
No Logic or Conditionals: Unlike programming languages, HTML does not involve complex logic, conditional statements (like “if-else”), or loops.

HTML Elements: The Building Blocks

HTML documents are built from a series of elements. Each element serves as an instruction to the browser on how to display specific content. Learning HTML is essentially about understanding these individual elements and how to use them effectively.

HTML Element: An HTML element is a fundamental component of an HTML document. It consists of a start tag, an end tag, and the content in between, defining a specific part of the document’s structure or content.

Structure of an HTML Element:

Most HTML elements follow a standard structure:

Opening Tag: Marks the beginning of an element. It is enclosed in angle brackets (e.g., <p>).
Closing Tag: Marks the end of an element. It is similar to the opening tag but includes a forward slash before the element name (e.g., </p>).
Content: The text, images, or other elements placed between the opening and closing tags.

Example:

<p>This is a paragraph of text.</p>

In this example, <p> is the opening tag for a paragraph element, </p> is the closing tag, and “This is a paragraph of text.” is the content.

Nesting HTML Elements:

HTML elements can be nested within each other. This means you can place one element inside another to create more complex structures. Nesting is essential for building practical web pages.

Example of Nesting:

<div>
  <p>This paragraph is inside a div element.</p>
</div>

Here, the paragraph element (<p>) is nested within a division element (<div>).

Creating Your First HTML File

Let’s put our understanding into practice by creating your first HTML file and displaying content in a web browser.

Creating an HTML File

In Visual Studio Code, in the Explorer pane (usually on the left), click the New File icon (it looks like a page with a plus sign).
Name the file index.html. The .html extension is crucial as it tells the browser that this file contains HTML code.
- While you can use other filenames (e.g., hello.html, test.html), index.html is a common convention for the main page of a website, and it is recommended to follow this convention.

Writing Basic HTML Code

Open the index.html file in VS Code.
Type the following text into the file: Welcome to HTML
Save the file by pressing Ctrl + S (Windows) or Cmd + S (macOS).

Viewing in a Browser

Navigate to the folder where you saved index.html (e.g., “html-crash-course”).
Double-click the index.html file. This will open the file in your default web browser.
You should see the text “Welcome to HTML” displayed in the browser window.

Congratulations! You have successfully displayed content on a web browser using HTML. However, simply writing plain text is not the essence of HTML. HTML is about marking up text to present it in structured and meaningful ways.

The Basic Structure of an HTML Document

Every valid HTML document follows a specific structure. Let’s break down the essential components.

Document Type Declaration (`<!DOCTYPE html>`)

The very first line in any HTML document should be the document type declaration:

<!DOCTYPE html>

This declaration informs the web browser that the document is an HTML5 document. It is essential for ensuring that the browser renders the page correctly in standards mode.

The Root Element (`<html>`)

The entire content of your HTML document is enclosed within the <html> element. This is known as the root element of the HTML page.

<html>
  <!-- All HTML content goes here -->
</html>

The <html> tag acts as the container for all other HTML elements on the page.

The `<head>` Element: Document Metadata

Within the <html> element, you’ll find the <head> element:

<head>
  <!-- Metadata about the HTML document -->
</head>

The <head> element contains metadata – information about the HTML document itself, rather than content to be displayed to the user.
Metadata includes things like the document title, character set, links to stylesheets, and scripts.
Content within the <head> is not directly visible on the webpage itself but is crucial for browser behavior and SEO (Search Engine Optimization).

Metadata: Metadata is “data about data.” In HTML, metadata provides information about the HTML document, such as its title, author, character set, and other settings that are not displayed as content on the page but are important for browsers and search engines.

The <title> Element:

A common element within the <head> is the <title> element:

<head>
  <title>HTML Crash Course</title>
</head>

The <title> element sets the title of the HTML page.
This title appears in the browser tab or window title bar.
It is also used when bookmarking the page and in search engine results.

The `<body>` Element: Visible Content

The <body> element is where you place all the content that will be visible to users on the web page.

<body>
  <!-- Content to be displayed on the webpage -->
</body>

This is where you put text, images, videos, links, forms, and all other elements that users will interact with.

Putting it All Together: A Basic HTML Document Structure

Let’s combine these elements to create a complete basic HTML document structure:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Crash Course</title>
</head>
<body>
  Welcome to HTML
</body>
</html>

Formatting Your HTML Code:

To improve readability, it’s good practice to format your HTML code. VS Code with the Prettier extension makes this easy.

Press Ctrl + Shift + P (Windows) or Cmd + Shift + P (macOS) to open the command palette.
Type “Format Document” and select it.
If prompted, choose “Prettier” as the code formatter.
- Alternatively, you can use the shortcut Alt + Shift + F (Windows) or Option + Shift + F (macOS) to format the document.

Save the index.html file, refresh your browser, and you should see “Welcome to HTML” displayed in the browser window, and the title “HTML Crash Course” in the browser tab.

This basic HTML document structure is the foundation for all web pages you will create.

Formatting Text in HTML

One of the primary functions of HTML is to structure and format text for web pages. Just like in newspapers or documents, web pages use headings, paragraphs, and various text styles to organize and present information effectively.

Heading Elements (`<h1>` to `<h6>`)

HTML provides six levels of heading elements, from <h1> (most important, largest) to <h6> (least important, smallest). Headings are used to define titles and subtitles within your content.

<h1>: Main heading, typically the title of the page. It’s best practice to have only one <h1> per page for SEO and accessibility.
<h2> to <h6>: Subheadings used to structure content hierarchically. <h2> is for major subheadings, <h3> for sub-subheadings, and so on.

Example Usage:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Heading</h3>
<h4>Subsection</h4>
<h5>Minor Heading</h5>
<h6>Least Important Heading</h6>

Characteristics of Heading Elements:

New Line Start: Each heading element starts on a new line, creating visual separation.
Bold and Larger Font Size: Headings are typically displayed in bold font and larger sizes compared to regular text.
Spacing: Headings usually have some spacing below them to separate them from the following content.

Paragraph Element (`<p>`)

The <p> element is used to define paragraphs of text. It’s the standard element for displaying blocks of text content, such as in blog posts, articles, or product descriptions.

Example Usage:

<p>This is the first paragraph of text.</p>
<p>This is the second paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Characteristics of Paragraph Elements:

New Line Start: Each paragraph starts on a new line.
Block of Text: Paragraphs are designed to display blocks of text content.
Spacing: Paragraphs typically have some spacing above and below them, creating visual separation between blocks of text.

Ignoring Extra Spaces and Lines:

Browsers automatically handle whitespace in HTML code. Multiple spaces or line breaks in your HTML code will be collapsed into a single space when rendered on the page.

Example:

<p>This paragraph
  has extra


    spaces and lines.</p>

This HTML code will be displayed in the browser as: “This paragraph has extra spaces and lines.”

Line Break Element (`<br>`)

If you need to force a line break within a block of text, you can use the <br> element.

Self-Closing Tag: A self-closing tag is an HTML tag that does not require a closing tag. It is typically used for elements that do not contain any content. In XHTML and HTML5, self-closing tags are often written with a forward slash before the closing angle bracket (e.g., <br />).

Example Usage:

<p>This is the first line.<br>This is the second line.<br>And this is the third line.</p>

Characteristics of Line Break Element:

Forces a Line Break: Inserts a single line break at the point where it is placed.
Self-Closing Tag: <br> is a self-closing tag; it does not have a closing tag (</br>). You can write it as <br> or <br />.

Horizontal Rule Element (`<hr>`)

The <hr> element creates a horizontal line across the page. It is often used to visually separate sections of content.

Example Usage:

<p>Paragraph above the horizontal rule.</p>
<hr>
<p>Paragraph below the horizontal rule.</p>

Characteristics of Horizontal Rule Element:

Horizontal Line: Renders a horizontal line across the width of its container.
Visual Separator: Used to create a visual break between different parts of a webpage.
Self-Closing Tag: <hr> is also a self-closing tag, written as <hr> or <hr />.

Inline Text Formatting

HTML provides several elements for formatting text inline, meaning they affect the text within a line without starting a new line.

Strong Element (`<strong>`)

The <strong> element is used to indicate strong importance or emphasis to text. Browsers typically render text within <strong> tags in bold.

Example Usage:

<p>This text is <strong>important</strong>.</p>

Semantic Meaning: <strong> conveys semantic meaning, indicating that the text is important. It’s preferred over the <b> tag for bold text because of its semantic value.

Emphasis Element (`<em>`)

The <em> element is used to emphasize text. Browsers usually render text within <em> tags in italics.

Example Usage:

<p>This text is <em>emphasized</em>.</p>

Semantic Meaning: <em> conveys semantic meaning, indicating emphasis. It’s preferred over the <i> tag for italics due to its semantic value.

Small Element (`<small>`)

The <small> element is used to represent side comments, disclaimers, fine print, or other text that is less important than the main content. It typically renders text in a smaller font size.

Example Usage:

<p>This is regular text. <small>This is smaller text.</small></p>

Mark Element (`<mark>`)

The <mark> element is used to highlight text for reference or emphasis. Browsers usually render marked text with a yellow background, similar to highlighting text in a book.

Example Usage:

<p>This text is <mark>marked</mark> for attention.</p>

Delete Element (`<del>`)

The <del> element represents text that has been deleted or removed from a document. Browsers typically render deleted text with a strikethrough line.

Example Usage:

<p>The old price was <del>$20</del>. The new price is $15.</p>

Insert Element (`<ins>`)

The <ins> element represents text that has been inserted into a document. It is often used in conjunction with <del> to show edits. Browsers usually render inserted text underlined.

Example Usage:

<p>The original text was incorrect. <ins>This is the corrected text.</ins></p>

Subscript Element (`<sub>`)

The <sub> element is used to define subscript text, which appears below the normal line of text, often smaller.

Example Usage:

<p>Water is H<sub>2</sub>O.</p>

Superscript Element (`<sup>`)

The <sup> element is used to define superscript text, which appears above the normal line of text, often smaller.

Example Usage:

<p>This is x<sup>2</sup>.</p>

Block-Level vs. Inline Elements

HTML elements are categorized into two main display types: block-level elements and inline elements. Understanding this distinction is crucial for layout and styling.

Block-Level Elements

New Line Start: Block-level elements always start on a new line in the browser.
Full Width: They take up the full width available in their container (parent element).
Content Model: Block-level elements can contain other block-level elements or inline elements.
Examples: <h1> to <h6>, <p>, <div>, <ul>, <ol>, <li>, <table>, <form>.

Inline Elements

No New Line Start: Inline elements do not start on a new line; they flow within the text.
Width as Content: They only take up as much width as necessary to contain their content.
Content Model: Inline elements can only contain other inline elements or text data, not block-level elements.
Examples: <span>, <a>, <img>, <strong>, <em>, <small>, <mark>, <del>, <ins>, <sub>, <sup>.

Division Element (`<div>`)

The <div> element is a generic block-level container. It is used to group other HTML elements together for styling or layout purposes. <div> elements, by themselves, do not have any semantic meaning.

Example Usage:

<div>
  <p>This is block 1.</p>
</div>
<div>
  <p>This is block 2.</p>
</div>

Characteristics of <div> Element:

Block-Level: Always starts on a new line and takes full width.
Generic Container: Used for grouping and structuring content, often in conjunction with CSS for styling.

Span Element (`<span>`)

The <span> element is a generic inline container. It is used to group inline elements or text for styling or manipulation, without adding semantic meaning or line breaks.

Example Usage:

<p>This is <span>inline element 1</span> and <span>inline element 2</span>.</p>

Characteristics of <span> Element:

Inline: Does not start on a new line and only takes up necessary width.
Generic Container: Used for styling or manipulating small portions of text or inline elements, often with CSS.

While <div> and <span> are less semantically meaningful on their own in pure HTML, they become incredibly powerful when combined with CSS for styling and JavaScript for dynamic behavior. You’ll revisit these elements extensively in the CSS crash course.

Working with Lists in HTML

Lists are fundamental for organizing and presenting information clearly and concisely on web pages. HTML provides three main types of lists: unordered lists, ordered lists, and description lists.

Unordered Lists (`<ul>`)

Unordered lists are used to display a collection of items where the order is not important. They are typically rendered with bullet points.

HTML Tags for Unordered Lists:

<ul>: Defines the unordered list container.
<li>: Defines each list item within the <ul>.

Example Usage:

<ul>
  <li>Bread</li>
  <li>Milk</li>
  <li>Eggs</li>
</ul>

Rendering in Browser:

Bread
Milk
Eggs

Ordered Lists (`<ol>`)

Ordered lists are used when the sequence of items is significant. They are typically rendered with numbers or letters.

HTML Tags for Ordered Lists:

<ol>: Defines the ordered list container.
<li>: Defines each list item within the <ol>.

Example Usage:

<ol>
  <li>Reach point A</li>
  <li>Turn right and reach point B</li>
  <li>Turn left and arrive at point C</li>
</ol>

Rendering in Browser:

Reach point A
Turn right and reach point B
Turn left and arrive at point C

Description Lists (`<dl>`)

Description lists, also known as definition lists, are used to present terms and their corresponding descriptions. They are useful for glossaries, dictionaries, or displaying term-definition pairs.

HTML Tags for Description Lists:

<dl>: Defines the description list container.
<dt>: Defines a term (description term).
<dd>: Defines the description of the term (description definition).

Example Usage:

<dl>
  <dt>Ice Cream</dt>
  <dd>A soft sweet frozen food.</dd>
  <dt>Tea</dt>
  <dd>A hot drink.</dd>
</dl>

Rendering in Browser:

Ice Cream : A soft sweet frozen food. Tea : A hot drink.

HTML Attributes

HTML attributes provide additional information about HTML elements. They modify the behavior or characteristics of elements. Attributes are always specified in the opening tag of an element.

HTML Attribute: An HTML attribute is a modifier of an HTML element. Attributes either modify the default functionality of an element type or provide functionality to certain element types allowing them to work correctly.

Structure of an HTML Attribute:

Attributes are written in the following format within the opening tag:

attribute-name="value"

attribute-name: The name of the attribute (e.g., src, href, id, class).
value: The value assigned to the attribute, enclosed in double quotes (e.g., "logo.jpg", "https://google.com", "username", "main-title").

Let’s explore attributes in the context of two important HTML elements: images and links.

Image Element (`<img>`) and the `src` Attribute

The <img> element is used to embed images into a web page. It is a self-closing tag and requires the src attribute to specify the source (path or URL) of the image file.

Example Usage:

<img src="logo.jpg" alt="Code Evolution Logo">

Key Attributes for <img>:

src (Source): Specifies the path to the image file.
- If the image is in the same folder as your HTML file, you can just use the filename (e.g., "logo.jpg").
- You can also use a URL (Uniform Resource Locator) for images hosted online.
alt (Alternative Text): Provides alternative text for the image.
- This text is displayed if the image cannot be loaded.
- It is crucial for accessibility (screen readers for visually impaired users) and SEO (search engine optimization).
URL (Uniform Resource Locator): A URL is the address of a resource on the internet. It specifies the location of a web page, image, video, or other file and provides a way to access it.

Optional Attributes for <img>:

width: Sets the width of the image in pixels.
height: Sets the height of the image in pixels.

Example with width and height attributes:

<img src="logo.jpg" alt="Code Evolution Logo" width="200" height="200">

Anchor Element (`<a>`) and the `href` Attribute

The <a> element (anchor) is used to create hyperlinks to other web pages, files, or locations within the same page. The href attribute is essential for defining the link’s destination.

Example Usage:

<a href="https://google.com">Google</a>

Key Attribute for <a>:

href (Hypertext Reference): Specifies the URL or path to which the link should navigate.
- Can be an external URL (e.g., "https://google.com") for linking to other websites.
- Can be a relative path (e.g., "contact.html") for linking to pages within your own website.

Optional Attribute for <a>:

target: Specifies where to open the linked document.
- _blank: Opens the link in a new tab or window.
- _self (default): Opens the link in the same tab or window.

Example with target="_blank" attribute:

<a href="https://google.com" target="_blank">Google</a>

Linking Between Pages within Your Website:

To create links between pages in your own project folder, use relative paths in the href attribute.

Example: Linking index.html and contact.html:

In index.html:

<a href="contact.html">Contact Us</a>

In contact.html:

<a href="index.html">Home</a>

HTML Tables (`<table>`)

HTML tables (<table>) are used to display data in a structured grid of rows and columns. They are ideal for presenting tabular information such as data lists, schedules, and comparative data.

HTML Tags for Tables:

<table>: Defines the table container.
<thead>: Defines the table header section (optional but recommended).
<tbody>: Defines the table body section.
<tr> (Table Row): Defines a row within the table (in <thead> or <tbody>).
<th> (Table Header): Defines a header cell within a table row in <thead>. Typically displayed in bold.
<td> (Table Data): Defines a data cell within a table row in <tbody>.

Basic Table Structure:

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
    <tr>
      <td>Data 7</td>
      <td>Data 8</td>
      <td>Data 9</td>
    </tr>
  </tbody>
</table>

Explanation of Table Structure:

<table>: The outermost tag that encloses the entire table.
<thead>: Optional but recommended for semantic structure. Contains the table’s header row(s).
<tbody>: Contains the main data rows of the table.
<tr> (Table Row): Represents a single row within <thead> or <tbody>.
<th> (Table Header): Used in <thead> to define header cells (column titles). Typically displayed in bold and centered.
<td> (Table Data): Used in <tbody> to define data cells (content within each row and column).

Nesting Levels in Tables:

Understanding the nesting hierarchy is crucial for creating tables correctly:

<table> <thead> <tr> <th>…</th> <th>…</th> </tr> </thead> <tbody> <tr> <td>…</td> <td>…</td> </tr> <tr> <td>…</td> <td>…</td> </tr> </tbody> </table>

While basic HTML tables provide structure, styling (borders, spacing, alignment) is primarily handled using CSS.

HTML Forms (`<form>`)

HTML forms (<form>) are used to collect user input on web pages. Forms allow users to enter data, which can then be sent to a web server for processing. This chapter focuses on the HTML structure of forms, not the server-side processing.

Basic Form Structure:

Every HTML form starts with the <form> element, which acts as a container for all form controls.

<form>
  <!-- Form controls go here -->
</form>

Common Form Controls:

HTML provides various form controls to collect different types of user input:

Text Input (<input type="text">): For single-line text input (e.g., username, email).
Textarea (<textarea>): For multi-line text input (e.g., comments, descriptions).
Dropdown Select (<select>): For choosing one option from a list of predefined options.
Radio Buttons (<input type="radio">): For selecting one option from a group of mutually exclusive choices.
Checkboxes (<input type="checkbox">): For selecting one or more options from a list of choices.
Submit Button (<button type="submit">): To submit the form data.

Label Element (`<label>`)

The <label> element is used to associate a text label with a form control. It improves accessibility and user experience.

Example Usage with <label> and <input type="text">:

<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>

Key Attributes for <label>:

for: Specifies the id of the form control (e.g., <input>, <textarea>, <select>) that the label is associated with.

Benefits of Using <label>:

Accessibility: Screen readers use labels to announce form controls to visually impaired users.
Usability: Clicking on a label focuses the associated form control, making it easier to interact with forms, especially on smaller screens.

Input Element (`<input>`)

The <input> element is a versatile form control used for various types of user input, determined by its type attribute.

Common type Attributes for <input>:

text: (Default if type is not specified) Single-line text input.
radio: Radio button for selecting one option from a group.
checkbox: Checkbox for selecting one or more options.

Example Usage of Different <input> Types:

Text Input:

<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>

Textarea:

<label for="about">About You:</label><br>
<textarea id="about" name="about"></textarea><br><br>

Dropdown Select (<select> and <option>):

<label for="country">Country:</label><br>
<select id="country" name="country">
  <option value="india">India</option>
  <option value="singapore">Singapore</option>
  <option value="vietnam">Vietnam</option>
</select><br><br>

Radio Buttons:

<label>Job Type:</label><br>
<input type="radio" id="part-time" name="job-type" value="part-time">
<label for="part-time">Part-time</label><br>
<input type="radio" id="full-time" name="job-type" value="full-time">
<label for="full-time">Full-time</label><br><br>

Checkboxes:

<label>Job Type (Checkboxes):</label><br>
<input type="checkbox" id="part-time-checkbox" name="job-type-checkbox" value="part-time">
<label for="part-time-checkbox">Part-time</label><br>
<input type="checkbox" id="full-time-checkbox" name="job-type-checkbox" value="full-time">
<label for="full-time-checkbox">Full-time</label><br><br>

Submit Button (<button type="submit">):

<button type="submit">Submit</button>

When a submit button is clicked within a <form>, it triggers the form submission process (though server-side handling is beyond the scope of this HTML chapter).

Semantic HTML

Semantic HTML is about using HTML elements that convey meaning about the structure and content of a web page, both to humans and machines (browsers, search engines, screen readers). It moves away from relying solely on generic elements like <div> and <span> for layout and structure.

Semantic HTML: Semantic HTML is the practice of using HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation or look. Semantic HTML makes web pages more informative and adaptable, allowing browsers and search engines to better understand the content.

Benefits of Semantic HTML:

Accessibility: Semantic elements help screen readers and assistive technologies understand the structure of the page, improving accessibility for users with disabilities.
SEO (Search Engine Optimization): Search engines can better understand the content and context of your page, potentially improving search rankings.
Maintainability: Semantic code is more readable and easier to understand and maintain for developers.
Code Clarity: Semantic elements make the purpose of different parts of the HTML code clearer.

Common Semantic HTML5 Elements:

<header>: Represents the header section of a page or a section within a page. Typically contains introductory content, navigation, and branding.
<nav>: Represents a section of navigation links. Used for menus, site navigation, and table of contents.
<section>: Represents a thematic grouping of content, typically with a heading. Used to divide a page into logical sections.
<article>: Represents a self-contained composition in a document, page, application, or site. Used for blog posts, news articles, forum posts, and independent content.
<aside>: Represents content that is tangentially related to the main content around it. Used for sidebars, related links, pull quotes, and advertising.
<footer>: Represents the footer section of a page or a section within a page. Typically contains copyright information, contact details, and links to related documents.

Example of Semantic HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Semantic HTML Example</title>
</head>
<body>

  <header>
    <h1>Website Title</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section>
    <h2>Introduction Section</h2>
    <p>This is the introduction content for this section.</p>
  </section>

  <article>
    <h2>Blog Post Title</h2>
    <p>This is the content of a blog post.</p>
  </article>

  <aside>
    <h3>Related Links</h3>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>
  </aside>

  <footer>
    <p>&copy; 2023 Website Name. All rights reserved.</p>
  </footer>

</body>
</html>

By using semantic elements, you create HTML code that is not only structurally sound but also more meaningful and accessible.

Diving Deeper into the `<head>` Element

As introduced earlier, the <head> element in HTML contains metadata about the HTML document. Let’s explore some important meta tags that are commonly used within <head>.

Meta Element (`<meta>`)

The <meta> element is used to provide various types of metadata, such as character set, author, description, viewport settings, and more. Meta tags are self-closing and are always placed within the <head> section.

Common Meta Tags:

Character Set (<meta charset="UTF-8">):
```
<meta charset="UTF-8">
```
- Specifies the character encoding for the HTML document. UTF-8 is the recommended character set, as it supports a wide range of characters from different languages. It ensures your webpage can display text in virtually any language.
Character Encoding: Character encoding is a system that maps characters to numerical codes. It allows computers to represent and display text in various languages and symbols. UTF-8 is a widely used character encoding that supports almost all characters from all languages.
Author (<meta name="author" content="Your Name">):
```
<meta name="author" content="Code Evolution">
```
- Specifies the author of the HTML document. The content attribute holds the author’s name or organization.
Description (<meta name="description" content="Page Description">):
```
<meta name="description" content="This web page aims to provide beginner's information about HTML fundamentals.">
```
- Provides a brief description of the web page’s content. This description is often used by search engines in search results snippets. It’s important for SEO to write a concise and informative description.
SEO (Search Engine Optimization): SEO is the practice of improving the visibility of a website or a web page in search engine results pages (SERPs). It involves various techniques to help search engines like Google understand and rank your website better, ultimately driving more organic traffic to your site.
Viewport (<meta name="viewport" content="width=device-width, initial-scale=1.0">):
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
- Configures the viewport for responsive web design.
- width=device-width: Sets the viewport width to the device width, ensuring the page adapts to different screen sizes (mobile, tablet, desktop).
- initial-scale=1.0: Sets the initial zoom level when the page is first loaded.
Viewport: In web development, the viewport is the visible area of a web page to the user. It varies with the device – it will be smaller on a mobile phone than on a desktop screen. Meta viewport tags are used to control how web pages are displayed on different screen sizes, ensuring responsiveness.

Other Elements in <head>:

Besides <meta> and <title>, the <head> section can also contain:

<link>: To link external stylesheets (CSS files).
<style>: To embed CSS styles directly within the HTML document.
<script>: To include JavaScript code or link external JavaScript files.

These elements, particularly <style> and <script>, will be explored in more detail in the CSS and JavaScript crash courses.

Conclusion

Congratulations on completing this HTML crash course! You’ve now gained a solid foundation in the fundamentals of HTML, from basic document structure to text formatting, lists, tables, forms, and semantic HTML. You’ve also learned about essential meta tags within the <head> section.

This knowledge equips you to create structured and meaningful web pages. Remember to practice coding along and experiment with different HTML elements to solidify your understanding.

The next step in your web development journey is to learn CSS to style and visually enhance your HTML structures. Stay tuned for the CSS crash course!

HTML Crash Course for Complete Beginners

Introduction to Web Development with HTML

The Three Pillars of Web Development

Course Overview: What to Expect

Setting Up Your Development Environment

Choosing a Web Browser

Selecting a Code Editor

Understanding HTML Fundamentals

What is HTML?

HTML Elements: The Building Blocks

Creating Your First HTML File

Creating an HTML File

Writing Basic HTML Code

Viewing in a Browser

The Basic Structure of an HTML Document

Document Type Declaration (<!DOCTYPE html>)

The Root Element (<html>)

The <head> Element: Document Metadata

The <body> Element: Visible Content

Putting it All Together: A Basic HTML Document Structure

Formatting Text in HTML

Heading Elements (<h1> to <h6>)

Paragraph Element (<p>)

Line Break Element (<br>)

Horizontal Rule Element (<hr>)

Inline Text Formatting

Strong Element (<strong>)

Emphasis Element (<em>)

Small Element (<small>)

Mark Element (<mark>)

Delete Element (<del>)

Insert Element (<ins>)

Subscript Element (<sub>)

Superscript Element (<sup>)

Block-Level vs. Inline Elements

Block-Level Elements

Inline Elements

Division Element (<div>)

Span Element (<span>)

Working with Lists in HTML

Unordered Lists (<ul>)

Ordered Lists (<ol>)

Description Lists (<dl>)

HTML Attributes

Image Element (<img>) and the src Attribute

Anchor Element (<a>) and the href Attribute

HTML Tables (<table>)

HTML Forms (<form>)

Label Element (<label>)

Input Element (<input>)

Semantic HTML

Diving Deeper into the <head> Element

Meta Element (<meta>)

Conclusion

Document Type Declaration (`<!DOCTYPE html>`)

The Root Element (`<html>`)

The `<head>` Element: Document Metadata

The `<body>` Element: Visible Content

Heading Elements (`<h1>` to `<h6>`)

Paragraph Element (`<p>`)

Line Break Element (`<br>`)

Horizontal Rule Element (`<hr>`)

Strong Element (`<strong>`)

Emphasis Element (`<em>`)

Small Element (`<small>`)

Mark Element (`<mark>`)

Delete Element (`<del>`)

Insert Element (`<ins>`)

Subscript Element (`<sub>`)

Superscript Element (`<sup>`)

Division Element (`<div>`)

Span Element (`<span>`)

Unordered Lists (`<ul>`)

Ordered Lists (`<ol>`)

Description Lists (`<dl>`)

Image Element (`<img>`) and the `src` Attribute

Anchor Element (`<a>`) and the `href` Attribute

HTML Tables (`<table>`)

HTML Forms (`<form>`)

Label Element (`<label>`)

Input Element (`<input>`)

Diving Deeper into the `<head>` Element

Meta Element (`<meta>`)