Scribd
Upload
4 views

Simple HTML Tags

simple html tags

Uploaded by

kuzi Chikanya
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

Simple HTML Tags

simple html tags

Uploaded by

kuzi Chikanya
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Simple HTML tags

There are many tags available in HTML. Here you will learn about common tags that
you'll use as a developer.

Headings
Headings allow you to display titles and subtitles on your webpage.

<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>

The following displays in the web browser:

Paragraphs
Paragraphs contain text content.

<p>
This paragraph
contains a lot of lines
but they are ignored.
</p>

The following displays in the web browser:

Note that putting content on a new line is ignored by the web browser.
Line Breaks
As you've learned, line breaks in the paragraph tag line are ignored by HTML.
Instead, they must be specified using the <br> tag. The <br> tag does not need a
closing tag.

<p>
This paragraph<br>
contains a lot of lines<br>
and they are displayed.
</p>

The following displays in the web browser:

Strong
Strong tags can be used to indicate that a range of text has importance.

<p>
No matter how much the dog barks: <strong>don't feed him chocolate</strong>.
</p>

The following displays in the web browser:

Bold
Bold tags can be used to draw the reader's attention to a range of text.

<p>
The primary colors are <b>red</b>, <b>yellow</b> and <b>blue</b>.
</p>

The following displays in the web browser:

The following displays in the web browser:

Bold tags should be used to draw attention but not to indicate that something is
more important. Consider the following example:
1
The three core technologies of the Internet are <b>HTML</b>, <b>CSS</b> and <b>J
avascript</b>.
The following displays in the web browser:

Emphasis
Emphasis tags can be used to add emphasis to text.

<p>
Wake up <em>now</em>!
</p>

The following displays in the web browser:

Italics
Italics tags can be used to offset a range of text.

<p>
The term <i>HTML</i> stands for HyperText Markup Language.
</p>

The following displays in the web browser:

Emphasis vs. Italics

By default both tags will have the same visual effect in the web browser. The only
difference is the meaning.
Emphasis tags stress the text contained in them. Let's explore the following example:

1
I <em>really</em> want ice cream.

The following displays in the web browser:

Italics represent off-set text and should be used for technical terms, titles, a thought
or a phrase from another language, for example:

1
My favourite book is <i>Dracula</i>.

The following displays in the web browser:

Screen readers will not announce any difference if an italics tag is used.
Lists

You can add lists to your web pages. There are two types of lists in HTML.
Lists can be unordered using the <ul> tag. List items are specified using the <li> tag,

for example:

<ul>
<li>Tea</li>
<li>Sugar</li>
<li>Milk</li>
</ul>

This displays in the web browser as:

Lists can also be ordered using the <ol> tag. Again, list items are specified using
the <li> tag.

<ol>
<li>Rocky</li>
<li>Rocky II</li>
<li>Rocky III</li>
</ol>

This displays as the following in the web browser.

Div tags

A <div> tag defines a content division in a HTML document. It acts as a generic


container and has no effect on the content unless it is styled by CSS.
The following example shows a <div> element that contains a paragraph element:

<div>
<p>This is a paragraph inside a div</p>
</div>

This displays as the following in the web browser.


It can be nested inside other elements, for example:

<div>
<div>
<p>This is a paragraph inside a div that’s inside another div</p>
</div>
</div>

This displays in the web browser as:

As mentioned, the div has no impact on content unless it is styled by CSS. Let’s add a
small CSS rule that styles all divs on the page.
Don't worry about the meaning of the CSS just yet, you'll explore CSS further in a
later lesson. In summary, you're applying a rule that adds a border and some visual
spacing to the element.

<style>
div {
border: 1px solid black;
padding: 2px;
}
</style>
<div>
<div>
<p>This is a paragraph inside stylized divs</p>
</div>
</div>

This displays in the web browser as:

Div elements are an important part of building webpages. More advanced usage of
div elements will be explored in another course.

Comments

If you want to leave a comment in the code for other developers, it can be added as:
<!-- This is a comment -->
The comment will not be displayed in the web browser.

Attributes
Attributes provide additional information about the contents of an element. They
appear on the opening tag of the element and are made up of two parts: a name and
a value, separated by an equals sign.

<p lang="en-us">Paragraph in English</p>

The attribute name indicates what kind of extra information you are supplying about
the element's content. It should be written in lowercase.

Value
The value is the information or setting for the attribute. It should be placed in double
quotes. Different attributes can have different values.
Here an attribute called lang is used to indicate the language used in this element.
The value of this attribute on this page

HTML5 allows you to use uppercase attribute names and omit the quotemarks, but
this is not recommended. The majority of attributes can only be used on certain
elements, although a few attributes (such as lang) can appear on any element. Most
attribute values are either pre-defined or follow a stipulated format. We will look at
the permitted values as we introduce each new attribute. The value of the lang
attribute is an abbreviated way of specifying which language is used inside the
element that all browsers understand.

You might also like