HTML Text Formatting Elements
Text Formatting
This text is bold
This text is italic
This is superscript
HTML Formatting Elements
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.These elements are called formatting elements.
HTML Bold Formatting
The HTML <b> element defines bold text, without any extra importance.The HTML <strong> element defines strong text, with added semantic importance.
HTML Italic Formatting
The HTML <i> element defines italic text, without any extra importance.The HTML <em> element defines emphasized text, with added semantic importance.
Browsers display <strong> as <b>, and <em> as <i>.
However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text,
but <strong> and <em> means that the text is "important".
HTML Marked Formatting
The HTML <mark> element defines marked or highlighted text:
HTML
DeletedFormattingThe HTML <del> element defines deleted (removed) of text.
HTML Inserted Formatting
The HTML <ins> element defines inserted (added) text.
HTML Subscript Formatting
The HTML <sub> element defines subscripted text.
HTML Superscript Formatting
The HTML <sup> element defines superscripted text.
Try it Yourself Summary
HTML Text Formatting Elements
Tag Description <b> Defines bold text <em> Defines emphasized text <i> Defines a part of text in an alternate voice or mood <small> Defines smaller text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text <mark> Defines marked/highlighted text
HTML Paragraphs
HTML documents are divided into paragraphs.
HTML Paragraphs
The HTML <p> element defines a paragraph.Browsers automatically add an empty line before and after a paragraph.
HTML Display
You cannot be sure how HTML will be displayed.Large or small screens, and resized windows will create different results.With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.The browser will remove extra spaces and extra lines when the page is displayed.Any number of spaces, and any number of new lines, count as only one space.Example
<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>
Try it Yourself »
Don't Forget the End Tag
Most browsers will display HTML correctly even if you forget the end tag:The example above will work in most browsers, but don't rely on it.Forgetting the end tag can produce unexpected results or errors.Stricter versions of HTML, like XHTML, do not allow you to skip the end tag.
HTML Line Breaks
The HTML <br> element defines a line break.Use <br> if you want a line break (a new line) without starting a new paragraph:The <br> element is an empty HTML element. It has no end tag.
The Poem Problem
Example
<p>This poem will display as one line:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
Try it Yourself »
The HTML <pre> Element
The HTML <pre> element defines a block of pre-formatted text, with structured spaces and lines.To display anything, with right spacing and line-breaks, you must wrap the text in a <pre> element:Example
<p>This will display as a poem:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
Try it Yourself »
HTML Tag Reference
W3Schools' tag reference contains additional information about HTML elements and their attributes.Tag Description <p> Defines a paragraph <br> Inserts a single line break <pre> Defines pre-formatted text
HTML Headings
Headings are important in HTML documents.
HTML Headings
Headings are defined with the <h1> to <h6> tags.<h1> defines the most important heading. <h6> defines the least important heading.Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Try it Yourself »Note: Browsers automatically add some empty space (a margin) before and after each heading.
Headings Are Important
Use HTML headings for headings only. Don't use headings to make text BIG or bold.Search engines use your headings to index the structure and content of your web pages.Users skim your pages by its headings. It is important to use headings to show the document structure.h1 headings should be main headings, followed by h2 headings, then the less important h3, and so on.
HTML Horizontal Rules
The <hr> tag creates a horizontal line in an HTML page.The hr element can be used to separate content:Example
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
Try it Yourself »
The HTML <head> Element
The HTML <head> element has nothing to do with HTML headings.The HTML <head> element only contains meta data.The HTML <head> element is placed between the <html> tag and the <body> tag:Example
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
.
.
.
Try it Yourself »Meta data means data about data. HTML meta data is data about the HTML document.
The HTML <title> Element
The HTML <title> element is meta data.It defines the HTML document's title. It will not be displayed in the document.However, it might be displayed in one of the browser tabs.
The HTML <meta> Element
The HTML <meta> element is meta data.It defines the character set used in the HTML document.
More Meta Elements
In the following chapter you will learn more about meta elements:The HTML <style> element defines internal CSS style sheets.The HTML <link> element can define external CSS style sheets.
HTML Tip - How to View HTML Source
Have you ever seen a Web page and wondered "Hey! How did they do that?"To find out, right-click in the page and select "View Page Source" (in Chrome) or "View Source" (in IE), or similar in another browser. This will open a window containing the HTML code of the page.
Examples From This Page
HTML Headings
How to display headings in an HTML document.HTML horizontal rules
How to insert horizontal lines.The HTML <head> element
How to add meta information.
HTML Tag Reference
W3Schools' tag reference contains additional information about these tags and their attributes.You will learn more about HTML tags and attributes in the next chapters of this tutorial.Tag Description <html> Defines an HTML document <body> Defines the document's body <head> Defines the document's head Element <h1> to <h6> Defines HTML headings <hr> Defines a horizontal line HTML Basic Examples
Don't worry if these examples use tags you have not learned.
You will learn them in the next chapters.
HTML Documents
All HTML documents must start with a type declaration: <!DOCTYPE html>.The HTML document itself begins with <html> and ends with </html>.The visible part of the HTML document is between <body> and </body>.Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Try it Yourself »
HTML Headings
HTML headings are defined with the <h1> to <h6> tags:Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Try it Yourself »
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
HTML Links
HTML links are defined with the <a> tag:The link address is specified in the href attribute.Attributes are used to provide additional information about HTML elements.
HTML Images
HTML images are defined with the <img> tag.The source file (src), alternative text (alt), and size (width and height) are provided as attributes:
HTML can be edited by using a professional HTML editor like:
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML.Follow the 4 steps below to create your first web page with Notepad.
Step 1: Open Notepad
To open Notepad in Windows 7 or earlier:Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click Notepad.To open Notepad in Windows 8 or later:Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Step 2: Write Some HTML
Write or copy some HTML into Notepad.Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Step 3: Save the HTML Page
Save the file on your computer.Select File -> Save as in the Notepad menu.When saving an HTML file, use either the .htm or the .html file extension. There is no difference, it is entirely up to you.
Step 4: View HTML Page in Your Browser
Double-click your saved HTML file, and the result will look much like this:
HTML INTRODUCTION
What is HTML?
HTML is a markup language for describing web documents (web pages).- HTML stands for Hyper Text Markup Language
- A markup language is a set of markup tags
- HTML documents are described by HTML tags
- Each HTML tag describes different document content
HTML Example
<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>HTML
HTML stands for Hypertext Markup Language.HTML files are basically special text files:- Contain special control sequences or tags that control how text is to be formatted.
- HTML files are the ``source code'' for Web Browsers
- A browser reads the HTML file and
- Tries to display it using the tags to control layout.
Tags exist to control various display items:
- Titles
- Heading Levels
- Styles of font (e.g Bold, Italic)
- Lists and list items
- Hypertext links to other URLs and files.
Hypertext Terminology
Below is listed some common terms you will need to become familiar with:
- Page
- - Refers to a single HTML file. Sometimes referred to as a document
- Home page
- - Refers to a designated entry point for access to a local web
- Hot spot
- - A region of displayed hypertext that, when selected, links the user to another location
- web
- - A set of hypertext pages considered to be a single work
- Web or WWW
- - the union of all hypertext on all Web servers worldwide
Creating HTML Documents
HTML files are Plain text (ascii) format, created using any text editor.
Many WYSIWYG HTML editors exist, e.g. Claris Home Page, Macromedia Dreamweaver. Netscape Communicator also has a built in editor.
It is however recommended that you at least learn the basics of HTML tagging before you dive into WYSIWYG editing as this mask the programming issues and ultimately hinders the learning process.- With HTML you can create your own Web site.
This tutorial teaches you everything about HTML.
HTML is easy to learn - You will enjoy it.
Examples in Every Chapter
This HTML tutorial contains hundreds of HTML examples.With our online HTML editor, you can edit the HTML, and click on a button to view the result.Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Introduction
What is HTML?
HTML is a markup language for describing web documents (web pages).
- HTML stands for Hyper Text Markup Language
- A markup language is a set of markup tags
- HTML documents are described by HTML tags
- Each HTML tag describes different document content
HTML Example
Small HTML document
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Try it Yourself »Example Explained
- The DOCTYPE declaration defines the document type
- The text between <html> and </html> describes the web document
- The text between <body> and </body> describes the visible page content
- The text between <h1> and </h1> describes a heading
- The text between <p> and </p> describes paragraph
HTML Tags
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>- HTML tags normally come in pairs like <p> and </p>
- The first tag in a pair is the start tag, the second tag is the end tag
- The end tag is written like the start tag, but with a slash before the tag name
The start tag is often called the opening tag. The end tag is often called the closing tag.
Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.
The browser does not display the HTML tags, but uses them to determine how to display the document:
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<body></html>
<h1>This is a heading</h1><p>This is a paragraph.</p><p>This is another paragraph.</p></body>
HTML Versions
Since the early days of the web, there have been many versions of HTML:
Version Year HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2012
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration helps the browser to display a web page correctly.
There are many different documents on the web, and a browser can only display an HTML page correctly if it knows the HTML version and type.
Common Declarations
HTML5
<!DOCTYPE html>HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML
Subscribe to:
Posts (Atom)
easy to learn.............
ReplyDelete