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).