Introduction to HTML

HTML stands for HyperText Markup Language, the standard markup language for creating web pages.
It describes the structure of a web page and consists of a series of elements.

HTML Structure

HTML documents are structured with a basic skeleton including <!DOCTYPE html>, <html>, <head>, and <body> tags.
<!DOCTYPE html> declares the document type and version of HTML being used (HTML5).
The <html> element is the root element of an HTML page.
The <head> element contains meta-information about the HTML page, such as the title, character set, styles, and links to scripts.
The <body> element contains the visible page content.

HTML Elements

HTML elements are defined by a start tag, some content, and an end tag, e.g., <p>This is a paragraph</p>.
Some elements have no content and are called empty elements, e.g., <br>.
Elements can be nested (elements can contain other elements).
Attributes provide additional information about HTML elements and are specified in the start tag.

Basic HTML Elements

<h1> to <h6> define HTML headings, with <h1> being the most important.
<p> defines a paragraph.
<a> defines a hyperlink, with the href attribute specifying the URL.
<img> defines an image, with the src attribute specifying the path to the image, alt for alternative text, width and height for dimensions.
<ul> defines an unordered list.
<ol> defines an ordered list.
<li> defines a list item.
<span> is an inline container used to mark up a part of a text, or a part of a document.
<div> defines a division or a section in an HTML document and is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.

HTML Attributes

Attributes provide additional information about HTML elements.
Attributes are always specified in the start tag.
Attributes usually come in name-value pairs like: name="value".
Common attributes include id, class, style, title, and src.

Common HTML Attributes Explained

The href attribute of <a> specifies the URL of the page the link goes to.
The src attribute of <img> specifies the path to the image to be displayed.
The width and height attributes of <img> specify the width and height of the image in pixels.
The alt attribute of <img> specifies an alternate text for the image, if the image cannot be displayed.
The style attribute is used to add styles to an element, such as color, font, size, and more.
The lang attribute specifies the language of the element's content.
The title attribute specifies extra information about an element (displayed as a tooltip).

HTML Formatting Elements

<b> defines bold text.
<strong> defines important text.
<i> defines italic text.
<em> defines emphasized text.
<mark> defines marked/highlighted text.
<small> defines smaller text.
<del> defines deleted text.
<ins> defines inserted text.
<sub> defines subscript text.
<sup> defines superscript text.

HTML Forms

HTML forms are used to collect user input and send it to a server for processing.
The <form> element is a container for different types of input elements, such as text fields, checkboxes, radio buttons, submit buttons, etc.

Form Elements

<input> element is the most used form element.
<textarea> defines a multi-line text input control (text area).
<select> defines a drop-down list.
<button> defines a clickable button.
<label> defines a label for an input element.
<fieldset> groups related elements in a form.
<legend> defines a caption for the <fieldset> element.
<datalist> specifies a list of pre-defined options for an <input> element.
<output> displays the result of a calculation.

Input Types

<input type="text"> defines a single-line text input field.
<input type="password"> defines a password field (characters are masked).
<input type="submit"> defines a submit button for submitting the form data to a form-handler.
<input type="radio"> defines a radio button, letting a user select only one of a limited number of choices.
<input type="checkbox"> defines a checkbox, letting a user select zero or more options of a limited number of choices.
<input type="button"> defines a clickable button.
number: Used for numeric input.
email: Used for email addresses, with validation.
date: Used for selecting dates.
file: Allows users to upload files.

Form Attributes

The action attribute in <form> specifies the URL where the form data is sent when the form is submitted.
The method attribute specifies the HTTP method used to submit the form data (get or post).
The name attribute specifies a name for the form.
The target attribute specifies where to display the response after submitting the form (_blank, _self, _parent, _top)
The autocomplete attribute specifies whether a form should have autocomplete on or off.
The novalidate attribute specifies that the form should not be validated when submitted

Input Attributes

value: Defines the initial value for an input field.
readonly: Read-only input field.
disabled: Disables the input field.
size: Specifies the width (in characters) of an input field.
maxlength: Specifies the maximum number of characters allowed in an input field.
min and max: Specifies minimum and maximum values for an input field.
multiple: Allows the user to enter more than one value in an input field.
pattern: Specifies a regular expression pattern that the input field's value is checked against.
placeholder: Specifies a short hint that describes the expected value of an input field.
required: Specifies that an input field must be filled out before submitting the form.

The `<label>` Element

The <label> element defines a label for several form elements.
Useful for screen-reader users, who will have the label read out loud when they focus on the element.
By using the for attribute in <label>, it can be bound to a specific form element (by id).

Introduction to HTML

Choose a study mode

Podcast

Questions and Answers

Which of the following HTML elements is used to define the structure for displaying tabular data?

What is the primary function of the alt attribute in the `` element?

When should you use the element instead of the element?

In HTML forms, what is the purpose of the action attribute within the `` element?

Which input type would be most appropriate for a user to select their birth date when filling out a form?

What is the purpose of the HTML pattern attribute within an input tag?

What is the correct HTML for making a text input required?

Which of the following is the correct usage of the <label> element in HTML forms?

Which attribute is used to specify that an input field should be automatically pre-filled with a suggestion based on user's previous inputs?

What is the purpose of the fieldset element in HTML forms?

Flashcards

What is HTML?

HTML structure

HTML Attributes

href attribute

src attribute

alt attribute

<form> element

<input type="text">

<input type="submit">

Study Notes

HTML Structure

HTML Elements

Basic HTML Elements

HTML Attributes

Common HTML Attributes Explained

HTML Formatting Elements

HTML Forms

Form Elements

Input Types

Form Attributes

Input Attributes

The <label> Element

Studying That Suits You

More Like This

Overview of HTML: The Essential Web Markup Language

Introduction to HTML

HyperText Markup Language (HTML)

Introduction to HTML

What is the primary function of the `alt` attribute in the `` element?

When should you use the `element instead of the` element?

In HTML forms, what is the purpose of the `action` attribute within the `` element?

What is the purpose of the HTML `pattern` attribute within an `input` tag?

Which of the following is the correct usage of the `<label>` element in HTML forms?

What is the purpose of the `fieldset` element in HTML forms?

`href` attribute

`src` attribute

`alt` attribute

The `<label>` Element