Is HTML hard to learn?
HTML is the easiest markup language you will ever learn. It is smaller and easier than specialty markup languages often used in publishing or typesetting. It is much easier than programming.
What the heck is a markup language, anyway?
Simply put, it’s a set of tags used to “mark up” content for interpretation by a device. When you were in grade school and high school, your teachers used a sort of shorthand to “mark up” the reports you wrote. The shorthand told you if you should start a new paragraph, insert a phrase, or move chunks of text around. Markup languages for the web and for publishing/typesetting tell a device what type of content a chunk of text is — a paragraph, a header, a list — so that the device can render (display or print it) in a way that will make sense to the person reading the document.
Tags are easy to type. Seperating content from style makes writing code even easier, because your webpage code mostly consists of the actual content (the text) you want to be displayed. HTML is not a bunch of cryptic commands, functions, variables, statements, and conditional tests like a programming language. It is far simpler than trigonometry or calculus, or even algebra! It is very human-friendly!
The structure of an HTML document
To start you off, here is a simple webpage example. I recommend you copy this text and paste it into a file named “example1.html”, then double-click it — your browser will open the file automatically. What can you determine about HTML just by looking at the code here and the result in your browser?
example1.html
<head>
<title>Basic HTML Structure</title>
</head>
<body>
<h1>Some Great Website Features</h1>
<img src=”http://static.php.net/www.php.net/images/php.gif” />
<p>PHP is a <em>programming language</em>. It is used on websites with dynamic (changing) content, such as shopping carts, lists of items from a database, etc.</p>
<p>WordPress.com is a community and conversations continue from one blog post to another and through the comments. Our tag surfer feature makes it easy for you to find like minded bloggers interested in the same topics as you and connect with them.</p>
</body>
</html>
There are several things you probably noticed:
- The code consists of normal text surrounded by some odd-looking code. This code consists of what we call tags.
- The first item on the page was a large heading. This is the text between the <h1> </h1> tags. This text was automatically made large and bold.
- The second item on the page was an image. There is an <img> tag that has an attribute, called “src”, which holds the URL to an image file. The browser is obviously following the link to find and display the image automatically, and “img” is obviously short for “image”.
- The third and fourth items, the text between the <p> </p> tags, were displayed in big chunks that are seperate from each other. So “p” must mean “paragraph”.
- There is text that did not get displayed, between the <title> </title> tags. Why is that? You may have noticed that every element between the <body> </body> tags was displayed while the element between the <head> and </head> tags was not.
- The <html> </html> tags surround all other elements.
- Did you notic something different about the <em> </em> tags? They are in the middle of some text.
HTML document structure
Elements are the “parts” of a webpage. These elements consist of “markup” called tags and content made of plain text. The only exception is with images, because images are stored in special image files. Some elements are called “empty elements” because they have no contents — this is the case with the <img> element, because the image data is read from an image file instead. Given the URL to the image, the browser knows how to display it.
The <html> element is called the root element because it is the element which holds all others. It is the parent of all other elements in the document. Therefore, the other elements are child elements of <html>. So, all other code must go inside the <html> </html> tags. (There are actually 2 exceptions to this, special tags that provide basic information about the document, but that is not important now.)
The way you place tagged elements inside other elements is called nesting.
The root element is further divided into two more elements, <head> and <body>. As you already discovered, all child elements of the body represent items which will be displayed on the page. In contrast, the <head> element does not represent actual content. Instead, it holds special elements that provide additional information to the browser (or cellphone or search engine) about the document.
The <title> element serves several purposes:
- The operating system will display the title on the title bar (top part) of the browser window. (If there is no title, it will display the URL, or the path and filename.)
- Search engines will display the title in search results and make it the text of the link a potential vistor will (hopefully) click to navigate to your website.
- Browsers usually use the title as the title of a “bookmark” or “favorite” (saved browser link that allows users to visit your website again without searching). This happens when a user likes your page so much they decide to bookmark it!
We put some extra carriage returns, or newlines, in the file. This will not affect the display. Browsers determine how to display elements by their semantic meanings, and this includes determining how much space should surround an element. So, you can use extra newlines, tabs, and spaces to make your source code easy to read. This type of non-rendered spacing is called whitespace. (This term also has a second meaning, space with no content in the webpage display, often used when people take about good graphic design.)
There are several nested elements in the document, but which one is nested differently? The <em> element. This tag is inside the actual text that makes up a larger element. An element nested this way is an inline element. Inline elements, for the most part, do not have their own display style. The exception may be that the content of the inline element is bolded, italicized, underlined, or stands out in some other way.
The <em> element is used for words or phrases which are to be emphasized like this. They should be italicized in a graphical browser, and read with a little extra emphasis by a screen reader for the blind. Do not use the <i> element for emphasized text. Italics are a visual style and mean nothing to assistive technology. Furthermore, it is possible you may want to italicize other text, as well. If at any time you want to set or override visual styles for any element, it should be done in a stylesheet. For example, you may decide to style all <em> elements with a font-color or background-color or underline instead of making it italic. That is fine, and the emphasis will not be lost!
Some other examples of inline elements are hyperlinks, images, and strong text (emphasized strongly and bolded). Actually, images are kind of a different animal…they behave partially like inline elements and partially like block-level elements. They are not consistently inline because they can be aligned with respect to text and other content so that the text or other content flows nicely right around the image. Block-level elements are those which occupy their own horizontal space and are usually seperated from other content by whitespace. Notice that the image and paragraph start on the same line… this is what happens with the image element.
HTML syntax overview
Here are some basic facts about HTML tags and syntax:
- HTML tagsets have a “start tag” and an “end tag”. The exception is with empty elements.
- Tags begin and end with < and >; these are called angle brackets.
- Inside these brackets is the element name.
- Sometimes there are also one or more attributes to provide information that is not content. The “src” attribute in the <img> tag is an example. This attribute is required so that the browser can find and display the image.
- Attributes are in the form of name-value pairs. The attribute name is followed by an “=” (equals sign) and the value. The value must be surrounded by quotes (either single or double is fine, but the quotes must match).
- The end tag is identical to the start tag with two exceptions:
- The first character inside the end tag, after the opening bracket, is a forward slash. (This is found on the same key on your keyboard as the question mark.)
- Attributes go inside the start tag, not the end tag.
- Empty tags can be coded 2 ways:
- You can use two tags with nothing between them. (But on <img> you cannot do that.)
- You can use a “shorthand” tag instead. Put a space and then a backslash before the closing bracket. (But on <textarea>, a tag used inside forms, you cannot do that.)
There are some rules of syntax which are only loosely enforced in older standards.
Don’t fall into that trap! Use the stricter rules of the XHTML standard. This will avoid errors, and besides, can you imagine having to change almost every single tag in tens or hundreds of webpages later because you decide to upgrade to a stricter standard? Torture!
I will cover how to follow XHMTL rules (and where the term “XHTML” came from) soon enough. But before I do that, I want to talk about the minimum software you need to develop webpages, and additional software that you will probably want to use to make your life easier.
