Scribd
Upload
23 views

Lesson 3html Elements

The document discusses HTML elements and their structure. It defines common elements like headings, paragraphs, and images. It also covers attributes that provide additional information for elements and how elements can be nested within each other to build up an HTML page.

Uploaded by

Eunice Ermac
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

Lesson 3html Elements

The document discusses HTML elements and their structure. It defines common elements like headings, paragraphs, and images. It also covers attributes that provide additional information for elements and how elements can be nested within each other to build up an HTML page.

Uploaded by

Eunice Ermac
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

LESSON 3 HTML ELEMENTS

HTML ELEMENTS

An HTML element usually consists of a start tag and an end tag, with the content inserted in
between:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br>

HTML elements with no content are called empty elements. Empty elements do not have an
end tag, such as the <br> element (which indicates a line break).

NESTED ELEMENTS

HTML elements can be nested (elements can contain elements).

All HTML documents consist of nested HTML elements.

This example contains four HTML elements:

Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Example Explained

The <html> element defines the whole document.

It has a start tag <html> and an end tag </html>.

Inside the <html> element is the <body> element.

<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

The <body> element defines the document body.

It has a start tag <body> and an end tag </body>.

Inside the <body> element is two other HTML elements: <h1> and <p>.

<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>.

The element content is: My First Heading.

<h1>My First Heading</h1>


The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>.

The element content is: My first paragraph.

<p>My first paragraph.</p>

Attributes provide additional information about HTML elements.

HTML ATTRIBUTES

 All HTML elements can have attributes


 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

href Attribute

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

Example
<a href="https://www.w3schools.com">This is a link</a>

src Attribute

HTML images are defined with the <img> tag.

The filename of the image source is specified in the src attribute:

Example
<img src="img_girl.jpg">

width and height Attributes

HTML images also have width and height attributes, which specifies the width and height of the
image:

Example
<img src="img_girl.jpg" width="500" height="600">

The width and height are specified in pixels by default; so width="500" means 500 pixels wide.
alt Attribute

The alt attribute specifies an alternative text to be used, if an image cannot be displayed.

The value of the alt attribute can be read by screen readers. This way, someone "listening" to
the webpage, e.g. a vision impaired person, can "hear" the element.

Example
<img src="img_girl.jpg" alt="Girl with a jacket">

The alt attribute is also useful if the image cannot be displayed (e.g. if it does not exist):

style Attribute

The style attribute is used to specify the styling of an element, like color, font, size etc.

Example
<p style="color:red">This is a red paragraph.</p>

lang Attribute

The language of the document can be declared in the <html> tag.

The language is declared with the lang attribute.

Declaring a language is important for accessibility applications (screen readers) and search
engines:

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

The first two letters specify the language (en). If there is a dialect, add two more letters (US).

title Attribute

Here, a title attribute is added to the <p> element. The value of the title attribute will be
displayed as a tooltip when you mouse over the paragraph:
Example
<p title="I'm a tooltip">
This is a paragraph.
</p>

Use Lowercase Attributes

The HTML5 standard does not require lowercase attribute names.

The title attribute can be written with uppercase or lowercase like title or TITLE.

Quote Attribute Values

The HTML5 standard does not require quotes around attribute values.

W3C recommends quotes in HTML, and demands quotes for stricter document types like
XHTML.

Sometimes it is necessary to use quotes.

Using quotes are the most common. Omitting quotes can produce errors.
At W3Schools we always use quotes around attribute values.

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can
also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use
single quotes:

<p title='John "ShotGun" Nelson'>

Or vice versa:

<p title="John 'ShotGun' Nelson">


HTML PAGE STRUCTURE

Attribute Description

Alt Specifies an alternative text for an image, when the image cannot be
displayed

disabled Specifies that an input element should be disabled

Href Specifies the URL (web address) for a link

Id Specifies a unique id for an element

Src Specifies the URL (web address) for an image

style Specifies an inline CSS style for an element

title Specifies extra information about an element (displayed as a tool tip)

Below is a visualization of an HTML page structure:

<html>

<head>
<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

Note: Only the content inside the <body> section (the white area above) is displayed in a
browser.

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display
web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

You might also like