Learn HTML – Full Tutorial for Beginners

Brief Summary

This comprehensive HTML tutorial, presented by university instructor Dave Gray, guides viewers from basic to advanced HTML concepts through a series of ten structured lessons. The video covers essential tools, basic HTML elements, text content, links, images, tables, forms, and semantic HTML layout. It emphasizes practical application, validation, and accessibility, ensuring viewers gain a solid foundation in HTML for web development.

HTML basics and structure
Working with text, links and images
Creating tables and forms
Semantic HTML and accessibility

Introduction

Dave Gray introduces a comprehensive HTML tutorial designed for learners of all levels. The course is structured into ten tutorials that build upon each other, similar to chapters in a book. All resources and links mentioned throughout the video are compiled into a single GitHub resource, accessible in the description below.

What is HTML?

HTML, or Hypertext Markup Language, is the fundamental building block of the web, defining the structure and meaning of web content. Hypertext refers to the links that connect web pages, both within a single site and across different sites. HTML uses markup to annotate text, images, and other content for display in a web browser. To begin creating web pages, the tutorial recommends using Google Chrome as the web browser and suggests installing the "Dark New Tab" extension for a dark mode browsing experience.

Setting Up Your Development Environment

The tutorial recommends Visual Studio Code as the preferred code editor, which is available for free on Windows, Linux, and Mac OS. After installing Visual Studio Code, users are instructed to create a folder on their computer to store their HTML files. The first file should be named "index.html," following the naming convention of using lowercase letters, no spaces (using hyphens instead), and the ".html" extension. This setup ensures compatibility and avoids potential issues when hosting files on a web server.

Basic HTML Structure

The basic structure of an HTML page includes the <html>, <head>, and <body> elements. The <head> section contains metadata about the page, such as the title, which is defined using the <title> element. The <body> section contains the content that is visible in the browser. An <h1> element is used for the main heading, and <p> elements are used for paragraphs. The tutorial also suggests installing the "Prettier" extension for Visual Studio Code to auto-format code for better readability.

Essential VS Code Extensions

The tutorial recommends several Visual Studio Code extensions to enhance the development experience. The "VS Code Icons" extension adds icons to files, making it easier to identify file types visually. The "GitHub Theme" extension provides dark and light themes, with the default dark theme being preferred in the tutorial. The "Live Server" extension is essential for viewing web pages in real-time as changes are made, creating a local development server.

Viewing Your First Web Page

After installing the Live Server extension, users can right-click on the "index.html" file and choose "Open with Live Server" to view their web page in the browser. The title of the page is displayed in the browser tab. The tutorial also provides optional CSS styling to switch to dark mode, changing the font size, background color, and font color. Live Server automatically reloads the page whenever changes are saved in Visual Studio Code.

Validating HTML

To ensure the HTML code is valid and error-free, the tutorial introduces the W3C Markup Validation Service. Users can upload their "index.html" file to the validator to check for errors and warnings. The tutorial addresses common errors such as missing the lang attribute in the <html> tag, missing character encoding declaration, and missing the DOCTYPE declaration. Correcting these issues ensures the HTML document is valid and follows web standards.

More Head Elements

The <head> element can store additional metadata, such as the author and description of the page, using <meta> tags. The name attribute specifies the type of metadata (e.g., "author," "description"), and the content attribute provides the actual metadata. The tutorial also demonstrates how to add a favicon to the page using the <link> element, specifying the relationship, hypertext reference, and type of the icon file.

Linking to External CSS

The tutorial explains how to link to an external CSS file instead of including CSS directly within the <style> element in the <head>. A new file named "main.css" is created, and the CSS code is moved from the <style> element to this file. The <link> element is then used to link the "main.css" file to the HTML document, improving code organization and maintainability. The tutorial also emphasizes the importance of validating the HTML file after making changes.

Text Content Basics

The video covers the basics of creating text content on a web page, including the use of headings (<h1> to <h6>) and paragraphs (<p>). Headings have a hierarchy, with <h1> being the main title and subsequent headings (<h2>, <h3>, etc.) representing subtopics. The horizontal rule (<hr>) element is introduced as a visual separator. The tutorial also discusses white space collapsing and the use of line breaks (<br>) to control text formatting.

Block vs. Inline Elements

The video explains the difference between block-level and inline elements. Block-level elements (e.g., <p>, <h1>) start on a new line and create space around them, while inline elements (e.g., <em>, <strong>) do not create line breaks and flow within the text. The <em> element is used for emphasis, and the <strong> element is used for strong emphasis.

HTML Entities, Abbreviations and Addresses

The video covers HTML entities, which are used to display characters that have special meanings in HTML (e.g., <, >, &). It also discusses the use of the <abbr> element to provide abbreviations, with the title attribute providing the full text. The <address> element is introduced for marking up contact information, with the browser typically rendering it in italics. HTML comments are also covered, which are used to leave notes in the code that are not displayed on the page.

Creating Lists

The video explains how to create ordered lists (<ol>), unordered lists (<ul>), and description lists (<dl>). Ordered lists use numbers, unordered lists use bullet points, and description lists use terms and descriptions. The tutorial demonstrates how to create these lists and nest elements within list items. It also emphasizes the importance of validating the HTML code after making changes.

Creating Links

The video covers how to create links using the <a> (anchor) element. It explains the difference between absolute and relative references, and how to link to different sections within the same page using internal references or anchor links. The tutorial also discusses link naming conventions and provides guidelines for creating descriptive and accessible link text.

Adding Images

The video explains how to add images to a web page using the <img> element. The src attribute specifies the source of the image, and the alt attribute provides alternative text for accessibility and when the image cannot be loaded. The title attribute provides additional information that appears as a tooltip. The width and height attributes are used to specify the dimensions of the image, helping to prevent cumulative layout shift.

Lazy Loading and Figures

The video covers lazy loading, which is a technique to improve page performance by only loading images when they are about to come into view. The loading attribute is set to "lazy" to enable lazy loading. The <figure> element is introduced as a way to group an image with a caption, using the <figcaption> element. The tutorial also provides resources for finding free images and tools for resizing and compressing images.

Semantic HTML Layout

The video focuses on improving the HTML structure with semantic elements to enhance readability and accessibility. It covers the use of <header>, <main>, and <footer> elements to define the major sections of a page. The <nav> element is used for navigation menus, and the aria-label attribute is used to provide labels for assistive technology. The tutorial also discusses the use of <article> and <section> elements to organize content, and the <aside> element for complementary content.

Details, Time and HTML Outliner

The video introduces the <details> and <summary> elements for creating collapsible sections of content. The <time> element is used to mark up dates and times, with the datetime attribute providing machine-readable values. The tutorial also recommends using the HTML5 Outliner extension for Chrome to visualize the semantic structure of a page. It emphasizes the importance of using semantic elements instead of generic <div> and <span> elements.

Creating Tables

The video explains how to create tables using the <table> element. It covers the use of <tr> (table row), <th> (table header), and <td> (table data) elements to structure tabular data. The tutorial also demonstrates how to use the colspan and rowspan attributes to create cells that span multiple columns or rows. It emphasizes that tables should be used for tabular data, not for page layout.

Semantic Table Elements

The video focuses on adding semantic meaning to tables using elements such as <caption>, <thead>, <tbody>, and <tfoot>. The <caption> element provides a title for the table, and the <thead>, <tbody>, and <tfoot> elements define the header, body, and footer sections of the table. The scope attribute is used to specify whether a header cell applies to a column or a row, improving accessibility for screen readers.

Adding Forms

The video introduces forms, which allow users to send information back to the server. It covers the use of the <form> element, with the action attribute specifying the URL to which the form data should be sent, and the method attribute specifying the HTTP method (e.g., "get," "post"). The tutorial demonstrates how to create labels and inputs for various types of data, such as text, password, phone number, and number.

Form Input Types and Attributes

The video covers various input types and attributes for forms. It explains the use of the placeholder attribute to provide example text, the autocomplete attribute to enable or disable autocompletion, the required attribute to make a field mandatory, and the autofocus attribute to focus on a specific input when the page loads. The tutorial also demonstrates how to use the pattern attribute to enforce a specific format for an input, and the min, max, and step attributes for number inputs.

Select Menus and Option Groups

The video explains how to create select menus using the <select> and <option> elements. The <select> element creates a dropdown list, and the <option> elements define the available choices. The selected attribute is used to specify which option should be selected by default. The tutorial also demonstrates how to use the <optgroup> element to group options into categories, improving the organization of the select menu.

Data Lists and Fieldsets

The video introduces data lists as an alternative to select menus, using the <input> element with the list attribute and the <datalist> element to provide a list of suggestions. It also covers the use of <fieldset> and <legend> elements to group related form elements into sections, improving the organization and semantics of the form.

Radio Buttons and Checkboxes

The video explains how to create radio buttons and checkboxes using the <input> element with the type attribute set to "radio" or "checkbox." Radio buttons allow the user to select only one option from a group, while checkboxes allow the user to select multiple options. The tutorial emphasizes the importance of using the same name attribute for all radio buttons in a group to ensure that only one can be selected at a time.

Text Areas and Form Submission

The video covers the <textarea> element, which allows users to enter multi-line text. It also demonstrates how to add submit and reset buttons to a form using the <button> element with the type attribute set to "submit" or "reset." The tutorial explains how to use the formaction and formmethod attributes to override the default form action and method for specific buttons. It also discusses the difference between the "get" and "post" methods for submitting form data.

HTML Project: Little Taco Shop - Introduction

The video introduces an HTML project for beginners, which involves building a website for a fictional "Little Taco Shop." The project requires using everything learned in the previous lessons to create three HTML pages: "index.html" (home page), "hours.html" (store hours), and "contact.html" (contact us). The tutorial provides starter files, including images and CSS, and encourages viewers to attempt the project on their own before watching the solution.

Project Overview and Starter Files

The video provides an overview of the project, including the layout and content of each page. It highlights the use of semantic HTML elements, such as <nav>, <article>, and <address>, as well as various input types for the contact form. The starter files include a "readme.md" file with instructions, images, and a CSS file. The tutorial encourages viewers to use the provided examples as a reference while building the website.

Creating the Basic HTML Structure

The video begins by creating the basic HTML structure for each of the three pages. It covers the use of the <!DOCTYPE>, <html>, <head>, and <body> elements, as well as the lang attribute for the <html> tag. The <head> section includes metadata such as the character set, author, description, title, and links to the favicon and CSS file.

Adding the Header and Navigation

The video demonstrates how to add the header and navigation menu to each page. The <header> element includes the <h1> heading and the <nav> element, which contains an unordered list of links to the other pages and sections within the website. The tutorial also covers the use of anchor links to create internal navigation within a page.

Adding the Image and Footer

The video explains how to add the image and footer to each page. The <img> element is used to display the image, with the src, alt, title, width, and height attributes. The <footer> element contains the copyright information, using the © HTML entity for the copyright symbol.

Adding Content to the Hours Page

The video focuses on adding the specific content to the "hours.html" page. It covers the use of the <p> element to display the opening hours, and the <dl>, <dt>, and <dd> elements to create a description list of the store hours for each day of the week.

Adding Content to the Contact Page

The video explains how to add the specific content to the "contact.html" page. It covers the use of the <form> element to create a contact form, with various input types such as text, email, and textarea. The tutorial also demonstrates how to use the <address> element to display the store's address and phone number, with a tel: link for the phone number.

Completing the Home Page

The video focuses on adding the specific content to the "index.html" page. It covers the use of the <article> element to create sections for the "About LTS" and "Our Menu" content. The tutorial also demonstrates how to use the <aside>, <details>, and <summary> elements to create a "Taco Trivia" section with a collapsible answer.

Adding the Menu Table

The video explains how to create the menu table on the "index.html" page using the <table>, <caption>, <thead>, <tbody>, <th>, and <td> elements. It also covers the use of the scope attribute to improve accessibility for screen readers.

Completing the Project

The video concludes by reviewing the completed website and encouraging viewers to test the navigation and functionality. It emphasizes the importance of using semantic HTML elements and following best practices for web development. The tutorial expresses hope that viewers were able to complete much of the project on their own before watching the solution.