Back to Courses

HTML Fundamentals

HTML Fundamentals is a course that teaches you the basics of HTML, the markup language that is used to create web pages.

Authored by

Table of Content

Introduction to HTML

HTML (Hypertext Markup Language) is the standard markup language used for creating web pages. It provides the structure and content of a webpage, defining elements and their arrangement on the page. In this course, we will cover the fundamentals of HTML, including tags, attributes, and basic page structure.

Table of Contents

  • Getting Started with HTML
  • HTML Tags
  • HTML Attributes
  • HTML Document Structure
  • HTML Headings and Paragraphs
  • HTML Links
  • HTML Images
  • HTML Lists
  • HTML Tables
  • HTML Forms

Getting Started with HTML

HTML files have a .html extension and can be created using any text editor. To get started, create a new file with the .html extension and open it in your preferred web browser. The basic structure of an HTML file consists of opening and closing tags.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

The <!DOCTYPE html> declaration specifies the HTML version being used. The <html> element is the root element of an HTML page. The <head> element contains metadata about the page, such as the title displayed in the browser's title bar. The <body> element holds the visible content of the page.

HTML Tags

HTML tags are used to define elements and their properties. Tags are enclosed in angle brackets (<>) and usually come in pairs: an opening tag and a closing tag. The content placed between the opening and closing tags represents the element.

<tagname>Content goes here</tagname>

For example, the <h1> tag is used for the main heading of a page:

<h1>This is a Heading</h1>

HTML tags can also have attributes, which provide additional information about the element. Attributes are specified within the opening tag and consist of a name and a value.

<tagname attribute="value">Content goes here</tagname>

For example, the <a> tag is used for creating links and requires the href attribute to specify the destination URL:

<a href="https://www.example.com">Visit Example.com</a>

HTML Attributes

HTML attributes provide additional information about HTML elements. They are placed within the opening tag and consist of a name and a value, separated by an equals sign (=). Multiple attributes can be added to a single tag.

<tagname attribute1="value1" attribute2="value2">Content goes here</tagname>

For example, the <img> tag is used to embed images and requires the src attribute to specify the image source file:

<img src="image.jpg" alt="Image Description">

In this example, the alt attribute provides alternative text that is displayed if the image fails to load.

HTML Document Structure

Every HTML document has a specific structure. It begins with a <!DOCTYPE html> declaration, followed by the <html> element as the root element. Inside the <html> element, we have the <head> and <body> elements.

The <head> element contains metadata, such as the title of the page, linked stylesheets, and scripts. The <body> element holds the visible content of the page, including text, images, links, and other elements.

<!DOCTYPE html>
<html>
  <head>
    <!-- Metadata goes here -->
  </head>
  <body>
    <!-- Visible content goes here -->
  </body>
</html>

HTML Headings and Paragraphs

Headings and paragraphs are fundamental elements for structuring content within an HTML page. There are six levels of headings, ranging from <h1> (the highest) to <h6> (the lowest). Headings are used to define the hierarchy and importance of text.

<h1>This is the main heading</h1>
<h2>This is a subheading</h2>
<h3>This is a sub-subheading</h3>

Paragraphs are created using the <p> tag. They are used to group text content into paragraphs.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Links are used to navigate between different web pages or sections within a page. HTML uses the <a> tag to create links. The href attribute specifies the URL or target location of the link.

<a href="https://www.example.com">Click here</a> to visit Example.com.

In addition to external links, you can create internal links by using relative URLs. For example, to link to a section within the same page, you can use an anchor tag with an id attribute.

<a href="#section2">Jump to Section 2</a>

<h2 id="section2">Section 2</h2>

HTML Images

Images can be embedded within HTML pages using the <img> tag. The src attribute specifies the source file or URL of the image, and the alt attribute provides alternative text for accessibility.

<img src="image.jpg" alt="Description of the image">

You can also specify the width and height of the image using the width and height attributes.

<img src="image.jpg" alt="Description" width="300" height="200">

HTML Lists

HTML supports three types of lists: ordered lists, unordered lists, and definition lists.

Ordered lists are created using the <ol> tag, and each item is represented by the <li> tag.

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Unordered lists are created using the <ul> tag, and each item is represented by the <li> tag.

<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

Definition lists consist of terms and their definitions, represented by the <dl>, <dt>, and <dd> tags, respectively.

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

HTML Tables

HTML tables are used to present data in rows and columns. The table structure is created using the <table>, <tr>, and <td> tags.

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

You can also use the <th> tag to create table headers.

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

HTML Forms

HTML forms allow users to input and submit data. The form structure is created using the <form>, <input>, and <button> tags.

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Submit</button>
</form>

In this example, the <input> tag is used to create input fields, and the <button> tag creates a submit button.

Video Resources