HTML Tags: The Basic Mechanism of Webpage Formatting

HTML has not been around for many years. November 1990 marks the day of the first web page and back then there were little to know HTML standards to be followed. A group called World Wide Web Consortium was then formed and have since set the standards that are widely accepted.

Hence, creating an HTML document is easy. To begin coding HTML you need only two things: a simple-text editor and a browser. Notepad is the most basic of simple-text editors and you will probably code a fair amount of html with it.

FrontPage can virtually work miracles, but what's going on behind the curtain doesn't have to remain a complete mystery.

In fact, even if you don't plan on writing one iota of HTML, familiarity with the basics html tags can help you understand why FrontPage behaves the way it does. What follows is an ultra-fast HTML lesson.

It's quite a bit less than you'd actually need to write your own web pages by hand, but it will get started if you need to take a look at some of the HTML TAGS that FrontPage generates.

A web page is nothing more than a simple text file containing HTML tags and attributes. When a web browser summons an HTML file, it transforms this HTML into web pages. You could actually create your entire site using only Notepad, Windows's bare-bones text editor.

Inside every HTML document you will find two kinds of information:  the actual content that appears in a web browser and some strange looking fragments of text enclosed in brackets (< >) that are called HTML tags. These tags tells browsers how to display your content: how big it should be, how it should be formatted, and so on. HTML tags are easy to pick out. Just look for the brackets (< >) in this basic html tags sample of html page:

< html>
< head>
< title>Sample HTML Document< /title>
< /head>

< body>

< p> This is sample text on a sample page < /p>

This is a paragraph.

Text can be < b> bold < /b> or < i>italic< /i> or plain.

< /body>
< /html>

Basic HTML Tags Explained

Here's a breakdown of what is happening in that mini Web page:

• The < !DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.
• The < html> tag tells the browser what kind of document it has encountered.
• The < title> element, this comes between < head> & < /head> and will label the web browser's title bar, which is located in the top left of most browsers.
• The < head> tags contain basic information about the page. For example, the document title appears here. (The text of the title appears between its own < title> tags so a browser can find and display it.) If this were a more complex page, the head might also include some HTML style tag information or even a script that animates text or pictures with the help of Javascript or HTML image tag on a particular web page.
• The < body> tags surround the star of the show: the content of your page. Everything between these tags is what viewers will see in their web browsers (paragraphs, pictures, tables, etc).
• < p> indicates the beginning of a paragraph and < /p> the end of the paragraph.

A tag actually consists of two parts: an opening tag and closing tag. The closing tag is identical to the opening tag except that it contains a forward slash (< />). 

When a browser comes across an opening tag, like < b> bold tag in the example above, it applies the tag to everything that follows until the closing tag appears. In order words, tags enclose all the content they affect.

So, all text between the opening < b> bold tag and the closing < /b> bold tag will appear as bolded text. As you can see in the code just shown, each tag has an accompanying closing tag somewhere. The closing tag can be one character away or miles down the page.

For instance, the closing < /html> tag doesn't appear until the end of the document. That's because everything between the < html> tags is HTML. There are a few HTML tags that don't require a closing tag, but they're the exception to the rule.

HTML Basic Tag List with Example

HTML headings are defined with the < h1> to < h6> tags: < h1> defines the most important heading. < h6> defines the least important heading

Example:

< 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> 

HTML Paragraphs

HTML paragraphs are defined with the < p> tag.

Example:

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

HTML Links 

HTML links are defined with the < a> tag.

Example:

< a href="https://comfortskillz.com/">This is a link< /a>

HTML Images Tags

HTML images are defined with the tag. The source file (src), alternative text (alt), width, and height are provided as attributes.

Example:

<#img src="Html-element.jpg" alt="Html-element" width="240" height="320"/>.

The above html tags are all that is required to create a basic web page!