1 of 20

HTML5 Basic Elements

2 of 20

Objectives

Use the <p> tag to define a paragraph
Use headings <h1> to <h6> tags to define headings
Use the <a> tag to define a link
Use the the <img> element to define an image
Use list tags <ul> (unordered list), <ol> ordered list and <li> (list elements) to define list
Use HTML tables to create tables

3 of 20

HTML Basic Elements

A text header, denoted using the <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags.
A paragraph, denoted using the <p> tag.
A horizontal ruler, denoted using the <hr> tag.
A link, denoted using the <a> (anchor) tag.
A list, denoted using the <ul> (unordered list), <ol> (ordered list) and <li> (list element) tags.
An image, denoted using the <img> tag
A divider, denoted using the <div> tag
A text span, denoted using the <span> tag

4 of 20

HTML Links

Links are used in webpages for navigation from one page to another
The HTML <a> tag defines a hyperlink.

5 of 20

HTML Links – Syntax and Semantic

Syntax for <a> tag

<a href=“url”>link text</a>

The link text is visible to the user
The url for the href attribute indicates the link destination
Semantic for <a> tag

When a user clicks on the link text, the user is sent to the specified url

Example: This example shows how to link to http://lehman.edu/:

<a href=“http://lehman.edu/”> Lehman College </a>

6 of 20

HTML Links – target Attribute

The linked page is displayed in the current browser by default when clicked.
We can use the target attribute to specify where to open the linked document
target attribute values

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

7 of 20

The <img> element

We use the <img> tag to embed an image into an HMTL page.
The <img> element requires to have the src attribute, which is used to provide the path to the image to displayed when a page is loaded
<img> syntax:

<img src=“shoe.jpg”>

8 of 20

HTML File Paths

A file path describes a location for a file in a web site's folder structure.
We use file paths when linking to web pages, images, styles sheet(CSS), and JavaScript.
There are two types of paths

Absolute paths
Relative paths

9 of 20

Absolute File Paths

An absolute file path is the full URL to a file.
Use an absolute path to link to a file that is hosted on another website

10 of 20

Relative File Paths

A relative file path points to a file relative to the current page.

11 of 20

Nested HTML Elements

From our previous examples we can observe that HTML elements can be nested (This means elements can be placed inside other elements)
HTML documents are built from nesting HTML
Recall we nested the <body> tag into the <html>, <head> tag into the <head>, <title> element into the <head> tag, <p> into the <body> tag

12 of 20

HTML List Tags

List tags are used to group related items in a list form
List can be ordered with items listed with ordered numbering such as 1, 2, 3… <ol> or unordered <ul> with the unordered list with bullets

13 of 20

Unordered HTML List Element

An unordered list starts with the <ul> tag. Each list item (placed inside this <ul> tag) starts with the <li> tag.
In webpage, the list items are marked with bullets by default. We can be able to change these markings
Example:

<ul>� <li>Lehman College</li>� <li>City College of New York</li>� <li>John Jay College of Criminal Justice</li>�</ul>

14 of 20

Ordered HTML List

We use ordered list if we want our content to be displayed with some form of numbering
An unordered list starts with the <ol> tag. Each list item (placed inside this <ol> tag) starts with the <li> tag.
Example

15 of 20

Empty HTML Elements

HTML elements with no content are called empty elements.
For example, the <br> tag. The <br> tag defines a line break

16 of 20

HTML <hr> Tag

The <hr> (short for horizontal rule) tag is used to insert a horizontal rule or line to separate document sections, visually.
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

17 of 20

Tables

A table is an HTML structure surrounded by the <table> opening and closing tags that allows data to be organized in rows and columns.
The <tr> opening and closing tags create a table row, which contains all the row's cells.
The <th> opening and closing tags create a new table cell containing table header information about the data. Usually, the browser will display the table headers centered with a bold font.
The <td> opening and closing tags create a new table cell containing a table datum.

18 of 20

Table Header, body, and footer

Three optional table tags specify each part of a table:

The <thead> tag specifies the table header.
The <tbody> tag specifies the table body.
The <tfoot> tag specifies the table footer.

The <thead>, <tbody>, and <tfoot> tags do not affect the layout of the table, but browsers may use the tags to enable the table body to scroll independently of the header and footer or to print the header and footer on each page of a multi-page table printout.

19 of 20

Spanning multiple columns and rows

A single table cell occupies a single row and column by default, but a cell may span multiple columns or multiple rows using the colspan attribute and rowspan attribute to specify how many columns or rows to span.
The colspan and rowspan attributes apply to <td> and <th> tags.