Basic HTML formatting

Before Alanna joined Comgem, she was oblivious to any kind of HTML tags/code. Now after being part of Comgem for almost 18 months, Alanna has picked up the basics and uses them on a daily basis. 

Alanna thought she would include the basic HTML formatting codes for others to use and familarise their self with.

 

Heading Tags

Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

While displaying any heading, browser adds one line before and one line after that heading.

Example

<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

This will produce following result:

HTML Heading Tags

 

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.

H1 headings should be main headings, followed by h2 headings, then the less important h3, and so on.

 

Paragraph Tag

The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example:

Example

<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

This will produce following result:

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

 

Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in XHTML

Example

<!DOCTYPE html>
<html>
<head>
<title>Line Break  Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>

This will produce following result:

Hello
You delivered your assignment ontime.
Thanks
Mahnaz

 

Centering Content

You can use <center> tag to put any content in the center of the page or any table cell.

Example

<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>

 

Making Content Bold

The HTML <b> element defines bold text, without any extra importance.

Example

<p>This text is normal.</p>

<p><b>This text is bold</b>.</p>

 

 

Making Content Italic

The HTML <i> element defines italic text, without any extra importance.

Example

<p>This text is normal.</p>

<p><i>This text is italic</i>.</p>

 

 

Making Content Smaller

The HTML <small> element defines small text:

Example

<h2>HTML <small>Small</small> Formatting</h2>

HTML Small Formatting

 

 

HTML Marked/Highlighted Formatting

The HTML <mark> element defines marked or highlighted text:

Example

<h2>HTML <mark>Marked</mark> Formatting</h2>

 

 

How To Add Bullet Points

The HTML <li> element defines the bullet points. Be sure to include <ul> before and </ul> after the bullet points so ensure the correct format. 

Example

 <ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

Makes a bulleted list using the default bullet type:

  • text
  • text
  • text

 

 

How To Add Numbered Bullet Points

 The HTML <li> element defines the bullet points. Include <ol> before and </ol> after the bullet points so change the bullet points to numbers 

Example

<ol>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>

Makes a numbered bulleted list using the default bullet type:

  1. text
  2. text
  3. text

 

Some examples taken from - http://www.tutorialspoint.com/html/html_basic_tags.htm

 


By Alanna at 11 Mar 2015, 12:34 PM