What is HTML?
Posted December 18th, 2013 at 11:57am by Dan Birlew in HTML. Comments Off on What is HTML?
HTML stands for Hyper Text Markup Language. It consists of a series of markup tags that format text. The tags not only describe each piece of text, they tell web browsers how to display that text. HTML tags also allow you to break up a document into nice sections.
When the term HTML is used, it refers not only to the markup, but also to the file type: basic HTML files are saved with the .html extension. Sometimes web files are saved as other file types because they are written in scripting languages. But the ultimate goal of any scripting language is to convert data into HTML that can be read by a browser.
HTML files can be written in any plain text editor, such as Notepad on Windows or TextEdit on Mac (although TextEdit requires a little tweaking). However, if you’re planning to write a lot of HTML I recommend you download something like Notepad++, which is free and formats code as you write it, making it easier not only to separate tags from text, but also to see when you’ve made mistakes in syntax. HTML should not be written in a text editor that automatically applies formatting, such as WordPad, MS Word or other document software.
Every HTML tag starts with a less than symbol and ends with a greater than symbol, such as:
Every opening tag requires a closing tag. All closing tags begin with the less than sign and a forward slash, such as:
Without the closing tag, the file will not operate properly.
Each HTML file must begin with a doctype declaration. This tells the browser which version of HTML is being used. The doctype declaration for the HTML5 is:
Write this as the top of your plain text file.
After the doctype declaration, you must then enclose the rest of the file within <html> tags, like so:
<!DOCTYPE html> <html> </html>
Between the <html> tags there needs to be two sections: the head and the body. The head is where meta data, such as the page title and description, is declared. It is also where outside files are referenced, such as scripts. The body is where your text and formatting tags go. Declare the head and body elements by entering their tags between the opening and closing <html> tags:
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Save this file to your computer as mypage.html and open it. Your computer should open it in your default browser.
Not much to see right? Let’s add a few basics. First of all, the browser tab is probably showing the filename or file path. Wouldn’t it be better to show the page title? (Yes, it would.) Let’s add another required tag, the <title>, between the opening and closing <head> tags:
<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> </body> </html>
Now refresh your page in your browser and your page title appears in the browser tab. This is also the element that search engines will index as the title of your page.
To make something appear on the page, enter it between the <body> tags. Let’s add a title and paragraph:
<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <h1>My First Page</h1> <p>This is my first HTML page. How exciting!</p> </body> </html>
Save the file and refresh your browser. You’ll see the following:
Now you can see your header (the <h1>) and the text on the page. Browsers naturally apply default styles to the elements so that the header is double size and bold, and the font is serif. I’ll show you how to make it nicer in another tutorial.
Now that you understand what HTML is and how it’s created, we’ll explore further next time.