This is a continuation of our HTML Basics: Introducing Elements article.
Properly Nesting Elements
Elements also need to be properly nested. Meaning if an opening element is within another element, it must be closed before its parent element is closed. Using just the required elements mentioned, this is how they are written when making a super basic web page. Please note the nesting. Where one element is within another, it’s closed before its container is. Look at the title within head, for example.
Element Usage Example:
<!--Opening HTML element.-->
<html>
<!--Opening HEAD element. The HEAD contains special purpose elements-->
<head>
<!--Opening TITLE element-->
<title>
<!--The page’s title (important)-->
THIS IS THE TITLE
<!--Closing TITLE element-->
</title>
<!--Closing HEAD element-->
</head>
<!--Opening BODY element. The BODY will contain visible content-->
<body>
<!--Closing BODY element-->
</body>
<!--Closing HTML element-->
</html>
Notes: There are <!--comments--> in the code above. <!--Comments--> aren’t visible on a web page. Also note, the layout and spacing of the text/elements shown above aren’t important. They are written as such, indented and spaced, to make reading the code easier.
These, as well as an introduction to the most common elements, will be discussed at another time. Baby steps for now. This is a web page, though. Copy the code above and put it in a text file, then save it as testpage.html, then browse to it on your computer. Using your web browser you’d enter an address like this (fixing the file path as needed):
file:///C:/Documents%20and%20Settings/Your%20Name/My%20Documents/testpage.html <!--Note: The %20 is a space-->
You won’t see anything but a blank page, probably a white background, and that’s because there is no content. However, on the title bar of your browser, at the very top, you should read the text “THIS IS THE TITLE” so you’ll at least know you did it right and found the page. Save this page, we’ll use it again.
Inline or Block… Usually
Before we move on, it should be noted that most elements will fall into one of two categories: Inline or block. As the names imply, inline elements can be used within a sentence for example, whereas block or block-level elements sit on a line all their own. Please note that there are styling methods that allow one to employ block elements in a fashion similar to inline elements, but that is for another time. What you need to know right now is this small rule-of-thumb: Block-level elements may contain inline elements, but inline elements cannot contain block-level elements.
Element Use in WordPress
When you publish in WordPress, the elements mentioned in this segment and some of the elements that will be discussed in future articles, will never be used. The reason for this is simple. Using WordPress (and other such software) you are only adding content to a web page template. In other words the elements mentioned in this article exist as part of the template. What’s added in the admin just the content part with some lower-level HTML being used.
Want more like this? There’s more to come. Subscribe to our feed to be notified via our site’s syndication when we post another article. What’s a feed, you ask? Happily we wrote an article about that, too.
Continuation Pages: 1 • 2 •