2 of 25

Objectives

Describe the anatomy of an HTML element
Describe the structure(anatomy) of an HTML document
Use the <p> tag to define a paragraph
Use headings <h1> to <h6> tags to define headings

3 of 25

HTML Elements

Recall that HTML consists of a series of elements that tell the browser (i.e. Firefox, Safari, Google Chrome) how to display the content
HTML elements describe content (such as paragraph or image) that appear on a web page

4 of 25

Anatomy of an HTML Element

An HTML element is defined by a start tag, some content, and an end tag.
Examples of some HTML elements:

<h1>My First Heading</h1>
<p>My first paragraph.</p>
<br>

5 of 25

Parts of an HTML Element

The opening tag: It consists of the name of the element enclosed in opening and closing angle brackets . This states where the element begins or starts to take effect
The closing tag: It is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
The content: This is the content of the element.
The element: The opening tag, the closing tag, and the content together comprise the element.

6 of 25

What are Tags and Attributes in an HTML Element?

Tags and attributes are the basis of HTML.
HTML attributes provide additional information about HTML elements.

7 of 25

HTML Attributes

All HTML elements can have attributes to provide additional information about the elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"

8 of 25

Parts of an HTML Element (Continued)

9 of 25

HTML Element Syntax

<tagname attribute=“value” >Content goes here...</tagname>
Opening Tag: every element has an opening tag witht the name of the element at the start <tagname attribute=“value” >
Attribute and its value: The opening Tag may have an optional attribute and its value <tagname attr=“value” >
Closing Tag: The closing tag has a forward slash / followed by the name of the element </tagname>

10 of 25

HTML Elements Continued

Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag.
<nametag attr=“value” />

11 of 25

The Structure of HTML5 Document

12 of 25

The Doctype <!Doctype html>

An HTML page starts with the Document Type Declaration or doctype.
The Doctype informs the browser what type of document it is
The doctype is always the first item at the top of any HTML file.
The doctype can be written in lowercase, uppercase, or mixed case.

13 of 25

The <html> element

The <html> follows the doctype.
The <html> element tells the browser that this is an HTML document.
The <html> element always has a closing </html> tag

14 of 25

The <head> Element

The <head> element contains metadata such document title, character set, styles, links, scripts), specific information about the web page
The HTML <head> element is a container for the following elements:

<title>
<style>
<meta>
<link>
<script>
<base>

15 of 25

The <head> Element

HTML metadata is data about the HTML document. Metadata is not displayed.
The <meta> element is used to specify the metadata to provide browsers and search engines with technical information about the web page.
<meta name="Author" content="W3docs"> Specifies the author of the document
<title>Specifies the title of the web page </title>

16 of 25

The <body> element

This is where the content of your html document goes.
The content can be images, links, texts, colors, graphics, tables, forms

17 of 25

HTML5 Page Structure(Anatomy)

18 of 25

Examples of Basic HTML Elements

We can be able to define paragraph, page heading or lists with HTML Elements

19 of 25

HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage.
There are six different types of text headers. HTML headings are defined with the <h1>, <h2>, <h3>, <h4>, <h5> <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Search engines use the headings to index the structure and content of your web pages.
Users often skim a page by its headings. It is important to use headings to show the document structure.
<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

20 of 25

Paragraphs

A paragraph is the basic unit of text in an HTML document.
A paragraph is enclosed in <p> opening and closing tags.
A paragraph always starts on a new line and is usually a block of text.
Paragraph Example:

<p>

This is a paragraph.

</p>

<p>

This is another paragraph.

</p>

21 of 25

HTML Comments

A comment is part of your HTML code that is not displayed by the browser, but it helps to document your HTML source code
Syntax for adding comment:

Example of a comment

<!– This my first homework for CMP 128 -->

We use comments to make notes to ourselves and others.
Notice that we only place the exclamation point (!) in the start tag, but not in the end tag.

�

22 of 25

HTML Comments (Continued)

We can also use comments when we are trying to find and fix errors in our code.
The process of finding and fixing errors in our code is called debugging.
An error is our code is also called a bug.

23 of 25

Empty HTML Elements

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

24 of 25

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.