HTML Overview
HTML stands for Hypertext Markup Language. It allows the user to create and structure sections, paragraphs, headings, links, and blockquotes for web pages and applications. HTML is not a programming language, meaning it doesn’t have the ability to create dynamic functionality. Instead, it makes it possible to organize and format documents, similarly to Microsoft Word. When working with HTML, we use simple code structures (tags and attributes) to mark up a website page. For example, we can create a paragraph by placing the enclosed text within a starting
and closing
tag.The History of HTML
HTML was invented by Tim Berners-Lee, a physicist at the CERN research institute in Switzerland. He came up with the idea of an Internet-based hypertext system. Hypertext means a text that contains references (links) to other texts that viewers can access immediately. He published the first version of HTML in 1991, consisting of 18 HTML tags. Since then, each new version of the HTML language came with new tags and attributes (tag modifiers) to the markup. According to Mozilla Developer Network’s HTML Element Reference, currently, there are 140 HTML tags, although some of them are already obsolete (not supported by modern browsers). Due to a quick rise in popularity, HTML is now considered an official web standard. The HTML specifications are maintained and developed by the World Wide Web Consortium.
How Does HTML Work?
HTML documents are files that end with a .html or .htm extension. You can view then using any web browser (such as Google Chrome, Safari, or Mozilla Firefox). The browser reads the HTML file and renders its content so that internet users can view it. Usually, the average website includes several different HTML pages. For instance: home pages, about pages, contact pages would all have separate HTML documents. Each HTML page consists of a set of tags (also called elements), which you can refer to as the building blocks of web pages. They create a hierarchy that structures the content into sections, paragraphs, headings, and other content blocks. Most HTML elements have an opening and a closing that use the syntax. Below, you can see a code example of how HTML elements can be structured:
The outmost element is a simple division (
) you can use to mark up bigger content sections.It contains a heading (
), a subheading (), two paragraphs (), and an image (The second paragraph includes a link () with a href attribute that contains the destination URL.
The image tag also has two attributes: src for the image path and alt for the image description.
HTML Tags
HTML tags have two main types: block-level and inline tags.
Block-level elements take up the full available space and always start a new line in the document. Headings and paragraphs are a great example of block tags.
Inline elements only take up as much space as they need and don’t start a new line on the page. They usually serve to format the inner contents of block-level elements. Links and emphasized strings are good examples of inline tags.
Block-Level Tags
The three block level tags every HTML document needs to contain are , , and .
The tag is the highest level element that encloses every HTML page.
The tag holds meta information such as the page’s title and charset.
Finally, the tag encloses all the content that appears on the page.
Headings have 6 levels in HTML. They range from
to , where h1 is the highest level heading and h6 is the lowest one. Paragraphs are enclosed by , while blockquotes use the tag.Divisions are bigger content sections that typically contain several paragraphs, images, sometimes blockquotes, and other smaller elements. We can mark them up using the
tag. A div element can contain another div tag inside it as well.You may also use
- List item 1
- List item 2
- List item 3
Inline Tags
Many inline tags are used to format text. For example, a tag would render an element in bold, whereas tags would show it in italics.
Hyperlinks are also inline elements that require tags and href attributes to indicate the link’s destination:
Click me!
Images are inline elements too. You can add one using without any closing tag. But you will also need to use the src attribute to specify the image path, for example:
