HTML Elements
An HTML element is defined by a start tag, some content, and an end tag.
HTML Elements
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
Note: Some HTML elements have no content (like the <br> element). These elements
<br> none none
are called empty elements. Empty elements do not have an end tag!
1)HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
2) HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white
space (a margin) before and after a paragraph.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
3) HTML Text Formatting Elements
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
4) HTML Comment Tag
HTML comments are not displayed in the browser, but they can help document your
HTML source code.
Example
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
5) HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. A link can be an image or any other HTML
element!
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
Example
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
6) HTML Images
Images can improve the design and the appearance of a web page.
HTML Images Syntax
The <img> tag is empty, it contains attributes only, and does not have a closing
tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">
1) The src Attribute
The required src attribute specifies the path (URL) to the image.
2) The alt Attribute
The required alt attribute provides an alternate text for an image, if the user for
some reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).
Example
<img src="wrongname.gif" alt="Flowers in Chania">
3) Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
Example
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
7) HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
Define an HTML Table
A table in HTML consists of table cells inside rows and columns
Table Cells
Each table cell is defined by a <td> and a </td> tag.
Table Rows
Each table row starts with a <tr> and end with a </tr> tag.
Table Headers
Sometimes you want your cells to be headers, in those cases use the <th> tag instead
of the <td> tag:
Example
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
HTML Table Colspan & Rowspan
HTML tables can have cells that spans over multiple rows and/or columns.
HTML Table - Colspan
To make a cell span over multiple columns, use the colspan attribute:
HTML Table - Rowspan
To make a cell span over multiple rows, use the rowspan attribute
Example
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
</table>
HTML Table Padding & Spacing
HTML tables can adjust the padding inside the cells, and also the space between the
cells.
HTML Table - Cell Padding
Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
HTML Table - Cell Spacing
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
8) HTML Lists
HTML lists allow web developers to group a set of related items in lists.
HTML List Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
9) HTML Block and Inline Elements
Every HTML element has a default display value, depending on what type
of element it is.
There are two display values: block and inline.
1. Block-level Elements
A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available (stretches out
to the left and right as far as it can).
Two commonly used block elements are: <p> and <div>.
The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a section in an HTML document.
The <p> element is a block-level element.
The <div> element is a block-level element.
Example
<p>Hello World</p>
<div>Hello World</div>
Here are the block-level elements in HTML:
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
2. Inline Elements
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
Example
<span>Hello World</span>
Here are the inline elements in HTML:
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
Note: An inline element cannot contain a block-level element!
11) HTML Forms
An HTML form is used to collect user input. The user input is most often sent
to a server for processing.
The <form> Element
The HTML <form> element is used to create an HTML form for user input
<form>
form elements
</form>
The <form> element is a container for different types of input elements, such as:
text fields, checkboxes, radio buttons, submit buttons, etc.
The <input> Element
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many
choices)
<input Displays a checkbox (for selecting zero or more of
type="checkbox"> many choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
HTML Form Attributes
1. The Action Attribute
The action attribute defines the action to be performed when the form is
submitted.
Usually, the form data is sent to a file on the server when the user clicks on the
submit button.
If the action attribute is omitted, the action is set to the current page.
2. The Target Attribute
The target attribute specifies where to display the response that is received after
submitting the form.
Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
Example
<form action="/action_page.html" target="_blank">
3. The Method Attribute
The method attribute specifies the HTTP method to be used when submitting the
form data.
The form-data can be sent as URL variables (with method="get") or as HTTP
post transaction (with method="post").
Example
<form action="/action_page.php" method="get">
<form action="/action_page.php" method="post">
HTML Form Elements
The HTML <form> element can contain one or more of the following form elements:
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
1) The <input> Element
One of the most used form element is the <input> element.
The <input> element can be displayed in several ways, depending on
the type attribute.
Example
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
2) The <label> Element
The <label> element defines a label for several form elements.
The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small
regions (such as radio buttons or checkboxes) - because when the user clicks
the text within the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.
3) The <select> Element
The <select> element defines a drop-down list:
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
4) The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
5) The <button> Element
The <button> element defines a clickable button:
Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
6) The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
7) The <datalist> Element
The <datalist> element specifies a list of pre-defined options for
an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.
Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
HTML Input Types
Here are the different input types you can use in HTML:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
Tip: The default value of the type attribute is "text".
HTML Input Attributes
1) The value Attribute
The input value attribute specifies an initial value for an input field:
Example
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
2) The readonly Attribute
The input readonly attribute specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it, highlight
it, and copy the text from it).
The value of a read-only input field will be sent when submitting the form!
Example
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
3) The disabled Attribute
The input disabled attribute specifies that an input field should be disabled.
A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!
Example
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
4) The size Attribute
The input size attribute specifies the visible width, in characters, of an input field.
The default value for size is 20.
Note: The size attribute works with the following input types: text, search, tel, url, email,
and password.
Example
form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="5"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
5) The maxlength Attribute
The input maxlength attribute specifies the maximum number of characters
allowed in an input field.
Example
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
6) The placeholder Attribute
The input placeholder attribute specifies a short hint that describes the expected
value of an input field (a sample value or a short description of the expected
format).
The short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search, url,
tel, email, and password.
Example
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678">
</form>
7) The required Attribute
The input required attribute specifies that an input field must be filled out before
submitting the form.
The required attribute works with the following input types: text, search, url, tel,
email, password, date pickers, number, checkbox, radio, and file.
Example
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
12) HTML Multimedia
Multimedia on the web is sound, music, videos, movies, and
animations.
1) HTML Video
The HTML <video> element is used to show a video on a web page.
Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
To start a video automatically, use the autoplay attribute
Add muted after autoplay to let your video start playing automatically
(but muted):
2) HTML Audio
The HTML <audio> element is used to play an audio file on a web page.
Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
</audio>
Add muted after autoplay to let your audio file start playing automatically
(but muted):
3) HTML YouTube Videos
The easiest way to play videos in HTML, is to use YouTube.
Example
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
13) HTML File Paths
A file path describes the location of a file in a web site's folder
structure.
1) Absolute File Paths
An absolute file path is the full URL to a file
Example
<img src="images/picture.jpg" alt="Mountain">
2.Relative File Paths
A relative file path points to a file relative to the current page
Example
<img src=”picture.jpg" alt="Mountain">
Best Practice
It is best practice to use relative file paths (if possible).
