HTML Basic Tutorial of Commonly Used Tags

Often when I deliver a custom WordPress website to a client I get asked a lot of questions in regards to HTML code and what the tags mean, primarily because they don’t want to “accidentally break” their website. Although it is not easy to do that within a WordPress environment I have put together a small tutorial on the most commonly used HTML elements. I hope it helps.

HTML Introduction:

HTML Stands for Hyper Text Markup Language, made up of markup tags which are then used to describe web pages. HTML markup tags are often called HTML tags and they are surrounded by angled brackets <>, most HTML tags normally come in pairs comprised of an opening <p> and closing </p> tag.

Browsers such as Opera, Safari, Chrome, Internet Explorer, and Firefox read the HTML documetns and display them as webpages, they do not display the tags themeselves but use them to interpret to content of the document.

HTML Basics

An HTML Element is everything from the opening tag to the closing tag and the HTML Content is everything between.
Example: <p>(opening tag) THIS IS THE HTML CONTENT </p>(closing tag)

Some HTML elements have empty content and are “closed” in the opening tag. An example of this would be the <img> (or image) tag.

HTML Attributes provide additional information about an element and are always defined withing the opening tag. Attributes always come in name=”value” pairs

HTML Headings are defined by the <h1> to <h6> tags, with the <h1> tag defining the first (and usually largest) heading while the <h6> tag would be the last (and usually smallest) heading.
Example: <h1>This is a first heading</h1>

HTML Paragraphs are defined by the <p> tag, each paragraph must be defined by the opening <p> and closing </p> tag in order for the browser to accurately display proper spacing between paragraphs.

HTML Links are defined by the <a> tag; however, in order to properly apply a link you must include the href attribute.
Example: <a href=”http://www.avantmg.com”>THIS IS A LINK</a>)

HTML Images are defined with the <img> tag and its common attribues are “src”, “width”, and “height”, the src attribute stands for “source” and it refers to the location of the image itself while the width and height attributes define the dimensions of the image that will be displayed in the browser:
Example: <img src=”/image-sample.jpg” width=”100″ height=”100″ /> Please note that the <img> tag does not require a closing tag because it has “empty content” and therefore it is closed “/” within the opening tag.

HTML Line Breaks <br />are used to start a new line with out starting a new paragraph.
Example: <p>This is a paragraph <br />line break</p>