HTML Examples

Jump to Quick Reference

Text Styling

This is a paragraph in the standard font size (14px) for this page. Aeriri nominavi incorrupte pri ex, ad etiam veniam disputando duo. Habeo facilisi rationibus ne duo, cu eum recteque splendide consectetuer. Mentitum urbanitas delicatissimi eum in, eros invidunt est et.

HTML: <p>This is a paragraph in the standard font size (14px) for this page...</p>

This is a paragraph in 18px font size. You can change the font size of just this paragraph by using a style within the p tag like this <p style="font-size: 18px;">. Aeriri nominavi incorrupte pri ex, ad etiam veniam disputando duo.

HTML: <p style="font-size: 18px;">This is a paragraph in 18px font size. You can change the font size of just this paragraph...</p>

You can change styling for portions of a paragraph like this by surrounding the selected text with a span tag including a style. See below for some style options.

HTML: <p>You can change styling for <span style="font-weight:bold;">portions of a paragraph like this </span> by surrounding the selected text with a span tag including a style.</p>

You can combine multiple styles into one by separating them with a semi-colon like this. See below for some style options.

HTML: <p>You can combine multiple styles into one by separating them with a semi-colon <span style="font-size: 18px; color: purple; font-weight: bold;">like this</span>.</p>

If you need to separate lines within one paragraph like this,
insert a line break <br /> tag wherever you want the break. This is usually only used for addresses, poems, and lyrics. If you need a list of items, see below.

HTML: <p>If you need to separate lines within one paragraph like this,<br /> insert a line break...</p>

This is a list:

  • Bolts
  • Nails
  • Screws
  • Tools and More
  • (It is generally not recommended to use bulleted lists on a website.)

HTML: <p>This is a list:</p>

  • <ul>
    • <li>Bolts</li>
    • <li>Nails</li>
    • <li>Screws</li>
    • <li>Tools and More...</li>
  • </ul>

Font Style Examples:

  • This is underlined.
  • This is italicized.
  • This is bold.
  • This is purple.

Font Size Examples:

  • This is 12px.
  • This is 14px.
  • This is 16px.
  • This is 18px.
  • This is 20px.
  • This is 22px.
  • Just keep going...

Images

  • Image width 100px, with 10px margin:
  • Image width 200px, with 10px margin:
  • Image width 300px, with 10px margin:

HTML: <img src="/images/inxsql/INXSQLEcommerce.jpg" style="width: 100px; margin: 10px;">
Change the width and margin numbers accordingly.

Image with 10px border and 10px margin:

HTML: <img src="/images/inxsql/INXSQLEcommerce.jpg" style="border: 10px solid gray; width: 150px; margin: 10px;">
Change the numbers and color accordingly.

Learn more about using file paths.

Hyperlinks

This links to another page on your website:
Learn more about our E-commerce Technical Requirements

HTML: <p>Learn more about our <a href="/Home/Page/technical">E-commerce Technical Requirements</a></p>

This links to a pdf file: Hammer Anchor Specs

HTML: <a href="/Images/pdf/HammerAnchorSpecs.pdf">Hammer Anchor Specs</a>

This is an image link (click image):

HTML: <a href="/Home/Page/technical"><img src="/images/inxsql/INXSQLEcommerce.jpg" style="width: 100px; margin: 10px;"></a>

To make a link open in a new browser tab, add target="_blank" in the <a> tag:
E-commerce Technical Requirements

HTML: <a href="/Home/Page/technical" target="_blank">E-commerce Technical Requirements</a>

Learn more about using file paths.

Quick Reference

HTML Tag Use
<p> </p> Creates a new paragraph.
<br/> Inserts a line break.
<span> </span> Used to format inline content within another element (i.e. paragraph).
<ul> </ul> Creates a list.
<li> </li> Encompasses a list item. Used inside the <ul> tag.
<img src="URL"/> Adds an image. Insert image file path as the URL.
Learn more about using file paths.
<a href="URL">Clickable Text Here</a> Creates a link. Insert file path or web address as the URL.
Learn more about using file paths.
<a href="URL"><img src="URL"/></a> Creates an image link.
Insert the corresponding link and image file path or web address as the URL.
Learn more about using file paths.
<a href="URL" target="_blank">Clickable Text or Img Src Here</a> Creates a link & opens it in a new browser tab. Insert file path or web address as the URL.
Learn more about using file paths.

Style Attributes

Use style="insert style here;" within an element tag such as p, span, li, img & more. Don't forget the quotes & semi-colon.
For example, a 16px paragraph is: <p style="font-size:16px;">My paragraph text.</p>

Style Use
font-size: 16px Change font size.
text-decoration: underline Underline text.
font-style: italic Italicize text.
font-weight: bold Bold text.
color: purple Purple text.
width: 100px Make 100px wide.
margin: 10px Add a 10px margin on every side.
border: 10px solid gray Add a 10px wide, solid line, gray border.
font-weight: bold; color: red; Combine multiple styles into one by separating with a semi-colon.
This example would make the text bold & red:
<span style="font-weight: bold; color: red;">My text.</span>
Item Added to Cart
View Cart
Wishlist Updated
View Wishlists
This website uses cookies to ensure you get the best user experience. By continuing to use this site, you agree to our cookies and terms of use policy.