HTML Elements
HTML elements exist on many levels. Everything you see in front of you, the paragraph texts, the Tizag banner, and the navigation links on the left are all elements of this web page. An element in HTML is a loose term that describes each individual piece of your web page.An element consists of three basic parts: an opening tag, the element's content, and finally, a closing tag.
- <p> - opening paragraph tag
- Element Content - paragraph words
- </p> - closing tag
The <html> Element...</html>
<html> begins and ends each and every web page. Its sole purpose is to encapsulate all the HTML code and describe the HTML document to the web browser. Remember to close your HTML documents with the corresponding </html> tag at the bottom of the document.If you haven't already, open up Notepad or Crimson Editor and have a new, blank document ready to go. Copy the following HTML code into your text editor.
HTML Code:
<html> </html>
If you opened up your index.html document, you should be starring at your very first blank (white) web page!
The <head> Element
The <head> element is "next" as they say. As long as it falls somewhere between your <html> tag and your web page content (<body>), you're golden. The head functions "behind the scenes." Tags placed within the head element are not directly displayed by web browsers. We will be placing the <title> element here and we'll talk about the other possible elements in later lessons.Other elements used for scripting (Javascript) and formatting (CSS) will eventually be introduced and you will have to place them within your head element. For now, your head element will continue to lay empty except for the title element that will be introduced next.
Here's a sample of the initial set up.
HTML Code:
<html> <head> </head> </html>
The <title> Element
Place the <title> tag within the <head> element to title your page. The words you write between the opening and closing <title></title> tags will be displayed at the top of a viewer's browser. Here's the html code:HTML Code:
<html>
<head>
<title>My WebPage!</title>
</head>
</html>
Name your webpage as you please, just keep in mind, the best titles are brief and descriptive.
The <body> Element
The <body> element is where all content is placed. (Paragraphs, pictures, tables, etc). As the menu on the left suggests, we will be looking at each of these elements in greater detail as the tutorial progresses. For now, it is only important to understand that the body element will encapsulate all of your webpage's viewable content.HTML Code:
<html> <head> <title>My WebPage!</title> </head> <body> Hello World! All my content goes here! </body> </html>
