HTML (Hyper Text Markup Language) is the language used to create web page documents. There are a few versions of HTML in use today: HTML 4.01 is the most firmly established and the newer, steadier HTML5 is gaining steam and browser support. Both versions have a stricter implementation called XHTML, which is essentially the same language with much stricter syntax rules.
HTML editors
HTML editors are designed to speed up the process of writing HTML by hand. They do not allow you edit the page visually, so you need to check your work in a browser. Some recommended HTML editors are listed below:
- Notepad: It is a simple and inexpensive plain-text code editor for Windows.
- Coda by Panic: Coda users like its visual workflow, file management tools, and built-in terminal access.
Introduction to HTML
All the HTML documents start with a common inevitable code which is depicted below.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title here</title> </head> <body> Page content goes here. </body> </html>
- ‘!DOCTYPE HTML’ is a document type declaration (also called DOCTYPE declaration) that identifies this document as an HTML5 document.
- The entire document is contained within an html element. The html element is called the root element because it contains all the elements in the document, and it may not be contained within any other element. Let’s see a sample screenshot of a web page loaded with some fundamental HTML codes.
- Within the html element, the document is divided into a head and a body. The head element contains descriptive information about the document itself, such as its title, the style sheet(s) it uses, scripts, and other types of “meta” information.
- Also in the head is the mandatory title element. According to the HTML specification, every document must contain a descriptive title.
- Finally, the body element contains everything that we want to show up in the browser window.
Let’s see a sample output of an HTML document in a web browser.
The HTML code for the above screenshot is depicted below.
<!DOCTYPE html> <html> <head> <title>Sahara Desert</title> </head> <body> <b>The Sahara Desert</b> <p><em>The Sahara Desert</em> is located in the northern portion of Africa and covers over 3,500,000 square miles (9,000,000 sq km) or roughly 10% of the continent. It is bounded in the east by the Red Sea and it stretches west to the Atlantic Ocean. To the north, the Sahara Desert's northern boundary is the Mediterranean Sea, while in the south it ends at the Sahel, an area where the desert landscape transforms into a semi-arid tropical savanna.</p> <p>Since the Sahara Desert makes up nearly 10% of the African continent, the Sahara is often cited as the world's largest desert.</p> <hr> <p><small>Copyright 2013, Sahara</small></p> </body> </html>
To a beginner, the above cluster of text may appear scrambled, with lot of ‘tags’ (< or >) and similar rubbish. However they are apparently the structural and functional units of HTML. We will discuss the usage of different HTML elements in the next section. Prior to that, you must understand some HTML rules. First of all, when the browser encounters an open bracket (<), it assumes all of the following characters are part of the mark-up until it finds the closing bracket (>).In our HTML document, <b> indicates that the following text should be a level-1 heading; </b> indicates the end of the heading. Some elements, called empty elements, do not have content. In our sample, the <hr> tag indicates an empty element that tells the browser to “insert a thematic divider here” (most browsers indicate the thematic divider with a horizontal rule [line], which is how the hr element got its initials).
Slash vs. Backslash
HTML tags and URLs use the slash character (/). The slash character is found under the question mark (?) on the standard QWERTY keyboard. It is easy to confuse the slash with the backslash character (\), which is found under the bar character (|). The backslash key will not work in tags or URLs, so be careful not to use it.
Adding Hidden Comments
You can leave notes in the source document for yourself and others by marking them up as comments. Anything you put between comment tags (<!– –>) will not display in the browser and will not have any effect on the rest of the source.
<!-- This is a comment --> <!-- This is a multiple-line comment that ends here. -->
Don’t Forget a Good Title
Not only is a title element required for every document, it is quite useful as well. The title is what is displayed in a user’s Bookmarks or Favourites list and on tabs in desktop browsers. Descriptive titles are also a key tool for improving accessibility, as they are the first thing a person hears when using a screen reader. Search engines rely heavily on document titles as well. For these reasons, it’s important to provide thoughtful and descriptive titles for all your documents and avoid vague titles, such as “Welcome” or “My Page.” You may also want to keep the length of your titles in check so they are able to display in the browser’s title area. Another best practice is to put the part of the title with more specific information first (for example, the page description ahead of the company name) so that the page title is visible when multiple tabs are lined up in the browser window.
No comments yet (leave a comment)