HTML Comment Tags

You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

Comments are not displayed by the browser, but they can help document your HTML.

Example

<!-- This is a comment -->

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

<!-- Remember to add more information here -->

Software Program Tags:

• HTML comments tags can also be generated by various HTML software programs.
• For example <!--webbot bot--> tags wrapped inside HTML comments by FrontPage and Expression Web.
• As a rule, let these tags stay, to help support the software that created them.

HTML Computer Code

HTML Computer Code Formatting:

• HTML normally uses variable letter size and spacing.
• This is not wanted when displaying examples of computer code.
• The <kbd>, <samp>, and <code> elements all support fixed letter size and spacing.
• HTML <kbd> For Keyboard Input

The HTML <kbd> element defines keyboard input:

Example

<kbd>File | Open...</kbd>

HTML <samp> For Computer Output:

The HTML <samp> element defines sample output from a computer program:

Example

<samp>

demo.example.com login: Apr 12 09:10:17

Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189

</samp>

HTML <code> For Computer Code:

The HTML <code> element defines a piece of programming code:

Example

<code>

var x = 5;

var y = 6;

document.getElementById("demo").innerHTML = x + y;

</code>

HTML Quotation

HTML Quotation and Citation Elements:

HTML for Short Quotations:

• The HTML element defines a short quotation.
• Browsers usually insert quotation marks around the element.

HTML

for Long Quotations:

• The HTML

  element defines a quoted section.

• Browsers usually indent

  elements.

HTML for Abbreviations:

• The HTML element defines an abbreviation or an acronym.
• Marking abbreviations can give useful information to browsers, translation systems and search-engines.

HTML

:

• The HTML
  element defines contact information (author/owner) of a document or article.
• The
  element is usually displayed in italic. Most browsers will add a line break before and after the element.

HTML :

• The HTML element defines the title of a work.
• Browsers usually display elements in italic.

HTML for Bi-Directional Override:

• The HTML element defines bi-directional override.
• The element is used to override the current text direction:

HTML Formatting

HTML Formatting Elements:

• In the previous chapter, you learned about the HTML style attribute.

• HTML also defines special elements for defining text with a special meaning.

• HTML uses elements like and for formatting output, like bold or italic text.

• Formatting elements were designed to display special types of text:

• - Bold text
• - Important text
• - Italic text
• - Emphasized text
• - Marked text
• - Small text
• - Deleted text
• - Inserted text
• _{- Subscript text}
• ^{- Superscript text}

HTML Styles

HTML Style Attribute:

• Setting the style of an HTML element, can be done with the style attribute.

• The HTML style attribute has the following syntax:

• style="property:value;"

• The property is a CSS property. The value is a CSS value.

HTML Background Color:

• The background-color property defines the background color for an HTML element:
• This example sets the background for a page to lightgrey:

Example:

This is a heading

This is a paragraph.

HTML Text Color:

The color property defines the text color for an HTML element:

Example:

This is a heading

This is a paragraph.

HTML Fonts:

The font-family property defines the font to be used for an HTML element:

Example:

This is a heading

This is a paragraph.

HTML Text Size:

The font-size property defines the text size for an HTML element:

Example:

This is a heading

This is a paragraph.

HTML Text Alignment:

The text-align property defines the horizontal text alignment for an HTML element:

Example:

Centered Heading

This is a paragraph.

Chapter Summary:

• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment

HTML Paragraphs

HTML Paragraphs:

The HTML element defines a paragraph.

Example:

• This is a paragraph
• This is another 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:

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

HTML Line Breaks:

• The HTML
  element defines a line break.
• Use
  if you want a line break (a new line) without starting a new paragraph:

Example:

This is
a para
graph with line breaks

HTML

 Element:

• The HTML

   element defines preformatted text.

• The text inside a

   element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

HTML Headings

HTML Headings:

• Headings are defined with the

  to

  tags.

• defines the most important heading.

  defines the least important heading.

Example:

This is a heading

This is a heading

This is a 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 soon.

HTML Horizontal Rules:

• The

  ---

  tag creates a horizontal line in an HTML page.
• The hr element can be used to separate content:

HTML Element:

• The HTML element has nothing to do with HTML headings.
• The HTML element contains meta data. Meta data are not displayed.
• The HTML element is placed between the tag and the tag:

HTML