* This excerpt was taken from pages 8-15 of Quick and Fun guide for HTML and CSS
HTML stands for HyperText Markup Language; as its name says, it is a markup language used to define and describe the structure of a webpage.
All the Content in HTML is annotated using tags; web browsers, like Firefox or Google Chrome, know how to read those tags and display them correctly.
Documents created using HTML might look similar to this:
Moreover, it’ll be displayed this way by a browser:
Notice that tags are hidden in the final result shown by the browser.
Tools to use
Editor
The text editor could be any, from the most simple notepad to the most sophisticated editor. Our suggestions are:
Notepad++. A free source code editor available only for Windows
Visual Studio Code. A free and open source editor developed by Microsoft. It is available for Linux, Mac OS and Windows
Aptana Studio. It is a open source IDE (Integrated Development Environment) used to build web applications. It is available for Windows, Mac OS and Linux
Browser
The browser is used to test and see the final result of our documents. For this purpose, you can use any browser (even Internet Explorer)
Tags
HTML uses tags to mark each section of a document
HTML Elements
An HTML Element is created by marking some piece of content with an opening tag, placed before the content, and a closing tag placed after the content, both tags using the same name.
Although most of the elements use a pair of tags, there exist some elements that don’t need a closing tag (they don’t have a content either), those elements are called empty elements. Those elements are closed by using a forward slash (/) at the end of the opening tag like this:
In the latest version of HTML (5th version) it is not mandatory to close the empty elements so that they could be written like this:
We can place one element inside other (not empty) elements, nesting many levels of elements one inside other, when doing so we must be careful to close all elements we create inside another before to closing the central element.
All HTML documents consist of nested HTML elements.
Attributes
Besides the element’s name, opening tags can consist of some other values that provide additional information about an element. Those values are called attributes.
Every single element in HTML can have attributes, to add an attribute to an element, we usually write them in name/value pairs:
Attributes can only be placed on the opening tag of an element, never in the closing tag.
Quotes are sometimes necessary to specify the value in an attribute, mainly when the value contains spaces. Although, some Attributes in HTML are boolean (only allowing true/false values), for those its only presence indicates the true value, and its absence a false value, without needing to specify it using the regular format.
Core Attributes
Some attributes can be written on any HTML element.
The most used are:
Id
It specifies a unique id for an element, with this attribute we can accurately refer to an element when using CSS or JavaScript
class
Specifies a class name for an element, it refers to a class in a CSS stylesheet
title
Specifies extra information (tooltip) about an element, that extra information is available to the user when he passes the mouse over the element, let’s define the title for a paragraph
lang
Indicates the language of the element’s content, for example, we can write a text on French or Spanish, and define its lang attribute to be “fr” or “es”
style
Specifies an inline CSS style for an element, this attribute is used to change the style of an element directly on its start tag. If we want to change, for example, the width of an image, we could write something like this:
dir
Specifies the text direction of the element’s content, this is useful when writing our document in languages written in a different direction. Valid values are ltr (left to right), rtl (right to the left) or auto.
Comments
You can add comments to your HTML documents. Comments are beneficial when you want to add information about a specific part of your document, or when you don’t want an element to show on the browser.
To create a comment we must follow this syntax:
If we want to comment on a particular element or group of elements, we can place the comment symbols surrounding the elements we want to comment, like this:
Comments are great tools to document your HTML code, making it easier to read.
Document Structure
Now that we are already experts in HTML Elements and attributes let’s review the primary structure for an HTML document
The basic structure for an HTML document looks like this:
If we make a revision of our previously created document (HelloWorld.html), we’ll find the same structure:
Now, let’s practice a little:
Quiz: Introduction to HTML
Test your HTML knowledge with our quiz!!
* This excerpt was taken from pages 8-15 of Quick and Fun guide for HTML and CSS
