Introduction, Syntax & Terminology

Before beginning our journey to learn HTML and CSS it is important to understand the differences between the two languages, their syntax, and some common terminology.

As an overview, HTML is a hyper text markup language created to give content structure and meaning. CSS , also known as cascading style sheets, is a presentation language created to give content style and appearance.

Common HTML Terms

When getting started with HTML you are likely to hear new, and often strange, terms . Over time you will become more and more familiar with all of them but three terms you should learn today include tags, elements, and attributes.

Elements

Elements are designators that define objects within a page, including structure and content. Some of the more popular elements include h1 through h6 , p , a , div , span , strong , and em .

<a> 

Tags

Elements are often made of multiple sets of tags, identified as opening and closing tags. Opening tags mark the beginning of an element, such as <div> Closing tags mark the end of an element and begin with a forward slash, such as </div>

<a>  . . .  </a>

Attributes

Attributes are properties used to provide additional instruction to given elements. More commonly, attributes are used to assign an id , class , or title to an element, to give media elements a source src, or to provide a hyperlink reference href.

 <a href="http://www.transpiresolutions.com"> Transpire Solutions  </a> 
Demo of above code
Transpire Solutions

HTML Document Structure & Syntax

All HTML documents have a required structure that includes the following declaration and tags: doctype, html, head, and body.

The doctype declaration is used to instruct web browsers which version of HTML is being used and is placed at the very beginning of the HTML document. Following the doctype declaration, html tags signify the beginning and end of the document.

The head of the document is used to outline any meta data, the document title, and links to any external files. Any context included within the head tags is not visible within the actual web page itself. All of the content visible within the web page will fall within the body tags.

A general HTML document structure looks like the following:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>Hello World</title>
</head>
<body>
   <h1>Hello World</h1>
   <p>This is a website.</p>
</body>
</html>
Demo of above code

Hello World

This is a website.


comments powered by Disqus