You are on page 1of 24

PHYSICAL TAGS

Teletype<tt></tt>
The "title" attribute is used to show the spelled-out version of the acronym or abbreviation when holding the mouse pointer over the element.
This only works for the acronym element in IE5+. This works for both the a

small<small></small>
The "title" attribute is used - times new roman 9.5

bold <bold></bold>
this will print bold text - times new roman 12 bold

big <big></big>
this will print big text - times new roman 14.05
italize <i></i>
this will print italized text - times new roman 12 italize

superscript <sup></sup>
<p>10<sup>3</sup></p> 103

subscript <sub></sub>
<p>10<sub>3</sub></p> 10 2

<!DOCTYPE html>
<html>
<body>

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

This is a paragraph. - times new roman 12

This is a paragraph.

This is a paragraph.

<!DOCTYPE html>
<html>
<body>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

<p>
The number of lines in a paragraph depends on the size of the browser window.
If you resize the browser window, the number of lines in this paragraph will change.
</p>

</body>
</html>

This paragraph contains a lot of lines in the source code, but the browser ignores it.

This paragraph contains a lot of spaces in the source code, but the browser ignores it.

The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will
change.

HORIZONTAL RULE
<!DOCTYPE html>
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
</body>
</html>

The hr tag defines a horizontal rule:

This is a paragraph.

This is a paragraph.

This is a paragraph.
EMPTY TAG
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).
HTML <br> Tag
Tips and Notes. Tip: The <br> tag is useful for writing addresses or poems.
Note: Use the <br> tag to enter line breaks, not to separate paragraphs.
<!DOCTYPE html>
<html>
<body>

<p>
To break lines<br>in a text,<br>use the br element.
</p>

</body>
</html>
To break lines
in a text,
use the br element.

<!DOCTYPE html>
<html>
<body>

<h2>Submit Button</h2>
<p>The <strong>input type="submit"</strong> defines a button for submitting
form data to a form-handler:</p>

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

<p>If you click "Submit", the form-data will be sent to a page called
"/action_page.php".</p>

</body>
</html>

Submit Button
The input type="submit" defines a button for submitting form data to a form-handler:

First name:

Mickey

Last name:
Mouse

If you click "Submit", the form-data will be sent to a page called "/action_page.php".

LOGICAL TAGS
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>
<p>Can I get this <abbr title="as soon as possible">ASAP</abbr>?</p>

<p>The title attribute is used to show the spelled-out version when


holding the mouse pointer over the acronym or abbreviation.</p>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<abbr title="United Nations">UN</abbr>


<br><br>
<acronym title="World Wide Web">WWW</acronym>
<p>The "title" attribute is used to show the spelled-out version of the
acronym or abbreviation when holding the mouse pointer over the
element. This only works for the acronym element in IE5+. This works
for both the abbr and acronym element in Netscape 6.2.</p>
</body>
</html>
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_address
<!DOCTYPE html>
<html>
<body>

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>

Written by Jon Doe.


Visit us at:
Example.com
Box 564, Disneyland
USA

Once omit the tag address it will still display but not italized

Written by Jon Doe.


Visit us at:
Example.com
Box 564, Disneyland
USA

<dfn>Definition term</dfn>

<!DOCTYPE html>
<html>
<head>
<style>
/* Default CSS Values */
dfn {
font-style: italic;
}
</style>
</head>
<body>

<p>A dfn element is displayed like this:</p>

<dfn>Definition term</dfn>

<p>A customized dfn element (changed font-style):</p>


<dfn style="font-style:normal;">Definition term</dfn>

</body>
</html>

A dfn element is displayed like this:


Definition term
A customized dfn element (changed font-style):
Definition term

HTML <em> Tag


<!DOCTYPE html>
<html>
<body>

<em>Emphasized text</em><br>

<strong>Strong text</strong><br>

<code>A piece of computer code</code><br>

<samp>Sample output from a computer program</samp><br>

<kbd>Keyboard input</kbd><br>
<var>Variable</var>
</body>
</html>

Emphasized text - times new roman 12 italize


Strong text - times new roman 12 bold
A piece of computer code - consolas 10
Sample output from a computer program - consolas 10
Keyboard input - consolas 10
Variable - times new roman 12 italize
Tag Description

<em> Renders as emphasized text

<strong> Defines important text

<code> Defines a piece of computer code

<samp> Defines sample output from a computer


program

<kbd> Defines keyboard input

<var> Defines a variable

<!DOCTYPE html>
<html>
<head>
<style>
em {
font-style: italic;
}
</style>
</head>
<body>

<p>An em element is displayed like this:</p>


<em>Some emphasized text</em>
<p>Change the default CSS settings to see the effect.</p>

</body>
</html>
An em element is displayed like this:
Some emphasized text
Change the default CSS settings to see the effect.

HTML <q> Tag


Example

Mark up a short quotation:

<p>WWF's goal is to:


<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

<!DOCTYPE html>
<html>
<body>

<p>WWF's goal is to:


<q>Build a future where people live in harmony with
nature.</q>
We hope they succeed.</p>

</body>
</html>
WWF's goal is to: Build a future where people
live in harmony with nature. We hope they
succeed.

You might also like