HTML Tutorials For Free ~ CODING AND TIPS

HTML stands for Hyper Text Markup Language, and is the code that all web pages are written in. The best way to think of HTML is that it’s a way of annotating a mass of plain text to turn it into a web page. By doing this, it can describe each and every part of the page’s structure.

HTML adds structure to text by annotating it with tags. A tag is made up of a word or abbreviation surrounded by angled brackets. In HTML, tags are placed at the beginning and at the end of the text they are structuring. These tag-content-tag combinations form HTML elements, or nodes. Here’s what an element looks like:

<tag>Element</tag>

Note that the closing tag includes a forward slash immediately inside of the opening bracket. Closing tags are very important, since they mark where an element ends.

OK, enough of the theory! Here are some real-world HTML tags.

HTML Tags

To make text bold, websites use the <strong> tag. Here’s an example:

Closing tags are <strong> very</strong> important.

Here’s the result:

Closing tags are very important.

The word ‘very’ has been bolded because it is surrounded by the <strong>tag.

Italics are much the same, but the <em>tag is used. Example:

In HTML, <strong> bold</strong> is for <strong>making text stand out</strong> , and <em>italics</em>are for <em>emphasis</em>.

Result:

In HTML, bold is for making text stand out, and italics are for emphasis.

Another important tag is the<h1>tag.

This is used to indicate the heading of a web page. Example:

<h1>Free HTML Tutorial</h1>

Each web page has one pair of<h1>tags. This page’s<h1>is the heading at the top of the page that reads ‘Free HTML Tutorial’.

For subheadings, there is a similar tag<h2>. In fact, there’s an<h2>coming up on this page right now…

HTML Structure

Moving on, every web page written in HTML shares a common structure, an example of which is below:

<!DOCTYPE html>
<html>
<head>
<title>A web Page</title>
</head>
<body>
<h1>A Web Page</h1>
</body>
</html>

<!DOCTYPE html> is the first and most important line of an HTML document. It ensures that web browsers will correctly read the HTML that follows. If you visit a page that doesn’t include it, the page might not display as the owner intended.

Next, there is an <html>tag that contains the entire contents of the page. There are only two tags immediately inside of <html>, and they are <head> and <body>.

<head> is the place for information about the web page - the title, a description, its correct URL, keywords to describe the page etc.

<body> is where you'll find everything that shows up on the page itself. This includes headers, main content, sidebars and footers.

Title Tag

You probably noticed the <title> tag and that it has the same contents as the <h1>tag. What's the difference?

While <h1> is what appears on the page itself, <title> is also used in search engine results. The contents of these two tags don't need to be identical, but sometimes they are.

READ-MORE