When I was active on forums years ago, I became familiar with BBCode because I use it often to format my text.

HTML is somewhat similar to BBCode so I found it familiar and much easier than CSS (at least, the basic ones).

As you know, W3Schools is my go-to resource for CSS. It also has HTML tutorial. Here are some HTML that I think would be useful to know.

[Entrepreneurship Tips] Ultimate HTML Basic Fundamental Guide For Beginners

Disclosure: Some of the links below are affiliate links. I will earn a small commission, at no extra cost to you, if you purchase through these links. Your support encourages me to continue blogging and help with the costs of hosting this site. Thank you!

HTML Overview: What Is HTML?

HTML, which stands for Hyper Text Markup Language, is the standard markup language for web pages. HTML elements tell the browser how to display the content.

Remember, HTML Is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>

The HTML standard does not require lowercase tags. But it’s recommended to use lowercase in HTML, especially for stricter document types like XHTML.

HTML Element

HTML element is defined by a start tag, some content and an end tag. It includes everything so never skip the end tag! Unexpected errors may occur if you forget the end tag.

Note that some HTML elements have no content like the <br> tag which defines a line break. These are called empty elements. They do not have a closing tag!

W3Schools - HTML Element

HTML Attributes

Attributes provide additional information about HTML elements.

They’re always specified in the start tag with name=”value”

Remember to always quote the attribute values. Also, do use lowercase.

Here’s a complete list of all attributes for each HTML element.

We’ll see some examples of HTML attributes later on.

HTML Styles

As its name suggests, the style attribute adds style to an element. Examples include color, size and font.

Here’s the syntax:

  • <tagname style=”property:value;”>

Note that the property is a CSS property and the value is a CSS value.

W3Schools - HTML Styles

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>

The HTML document begins with <html> and ends with </html>

The visible part of the HTML document is between <body> and </body>

As shown in the example below, HTML elements can be nested (this means that elements can contain other elements). There are 4 elements here: <html>, <body>, <h1> and <p>

W3Schools - HTML Documents

HTML Headings

Headings are important because search engines use them to index the structure and content of your web pages. They also help your readers (actual humans) understand the flow of your content. They can quickly scan through and decide whether or not to read your web page or article.

Just like how you format your headings in WordPress, you can use <h1> to <h6> tags.

<h1> defines the most important heading while <h6> defines the least important heading.

Each HTML heading has a default size. However, you can specify the size with the style attribute, using the CSS font-size property.

  • <h1 style=”font-size:60px;”>Heading 1</h1>

Bear in mind that you should use this for headings only. Don’t use headings to make text BIG or bold.

Also, browsers automatically add some white space (margin) before and after headings.

HTML Paragraphs

A paragraph, usually a block of text, always starts on a new line.

Again, browsers automatically add some white space (margin) before and after a paragraph.

Paragraphs are defined with the <p> tag. Remember to close it with </p>!

HTML Links

Also known as hyperlinks, these links allow users to jump from page to page.

Links are defined with the <a> tag while the URL is specified in the href attribute. Link text is the part that will be visible to users. Clicking on the link text will sender users to the specified URL address.

  • <a href=”url”>link text</a>

By default, unvisited links are underlined and blue while visited links are underlined and purple.

You can also use an image as the link. Simply put the <img> tag inside the <a> tag.

  • <a href=”default.asp”>
    <img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;”>
    </a>

To link to an email address, use mailto: inside the href attribute. Clicking this will open the user’s email program.

HTML Images

Images are defined with the <img> tag. This is used to embed an image in a web page.

There are 2 required attributes:

  • src: Source file which is the path to the image
  • alt: Alternative text for the image (if the user cannot view the image)

You can add other attributes too like width and height.

HTML Text Formatting

Here’s a table of HTML text formatting elements that you can use to display your text:

W3Schools - HTML Text Formatting

HTML Quotation and Citation

There are various HTML quotation and citation elements.

Depending on whether you write many research papers, you might find this useful.

However, I only want to highlight the <blockquote> tag (which is usually indented) and <q> tag (where browsers would insert quotation marks around the quotation). They’re the most useful in my opinion. You might even use them in blog posts.

W3Schools - HTML Quotation Citation

HTML Colors

Similar to CSS, HTML colors are specified with predefined color names, RGB, HEX, HSL, RGBA or HSLA values.

Here are some examples:

  • <p style=”background-color:Tomato;”>Lorem ipsum…</p>
  • <h1 style=”background-color:rgb(255, 99, 71);”>…</h1>
  • <h1 style=”background-color:#ff6347;”>…</h1>
  • <h1 style=”background-color:hsla(9, 100%, 64%, 0.5);”>…</h1>

HTML Tables

Arrange data into rows and columns with HTML tables.

Firstly, use <table> tag to define the table.

Next, use <tr> tag which stands for table row. Each table row starts with a <tr> and ends with a </tr> tag.

Finally, use <td> tag which stands for table data. Everything between <td> and </td> are the content of the table cell. Alternatively, you can use <th> tag instead of <td> tag if you want table header cells. <th> stands for table header. Text within <th> and </th> are bold and centered by default.

W3Schools - HTML Tables

HTML Lists

There are 2 types of lists: unordered and ordered.

W3Schools - HTML List Types

An unordered list starts with <ul> tag and each list item is specified with <li> tag. By default, the list items will be marked with bullets (small black circles).

  • <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ul>

An ordered list starts with the <ol> tag and each list item is specified with <li> tag. By default, the list items will be marked with numbers.

  • <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>

W3Schools - HTML Lists

HTML Comments

Although HTML comments aren’t displayed in the browser, they appear in the HTML source code.

The tag for this is simple: <!– Write your comments here –>

Note that the exclamation point (!) is only included in the start tag (not in the end tag). Also, the comment doesn’t have to be one line. It can be a few lines. Everything between <!– and –> will be hidden from display.

HTML comments can be used as notifications or reminders.

W3Schools - HTML Comments

Now It’s Your Turn

For more hands-on practice, you can try using a simple text editor like Notepad (PC) or TextEdit (Mac). Or simply analyze and edit the HTML code in your WordPress posts and pages.

If you encounter problems, you can hire an HTML expert from Fiverr.

 

Copyright © 2017-2024
Nicole C. W. All Rights Reserved.

Want to receive updates?

Join My Newsletter Now

 

Be the first to know about hot new releases, tips from my blog and more.

Pin It on Pinterest

Share This