Introducing HyperText Markup Language (HTML)

Watch the following video to know about the course overview.

HTML (HyperText Markup Language) was developed in 1990 by web founder, Tim Berners-Lee. It is a markup language. This markup language is used to describe the logical components of a text-oriented document. In web design, attempts are made to organise page structuring and text structuring according to semantic aspects. HTML enables typical elements of a text-oriented document - such as headings, text paragraphs, lists, tables, or graphic references - to be correctly delineated.

At the beginning of its development, only a few HTML elements were available to the creators of web pages, which was also reflected in a corresponding simplicity of web pages. Early approaches included the insertion of images, which were also used in the form of graphic texts for headings.

In recent years, internet consumption has shifted away from desktop computers to mobile devices, which can be used while travelling as well as sitting on the couch at home.

HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a markup language. In this course, we will discuss the features of HTML5 and look at how to use it in practice. HTML5 introduces a number of new elements and attributes that can help you to built modern, accessible websites.

The following is a set of some of the most prominent features introduced in HTML5:

• New Semantic Elements: These are like <header>, <footer>, and <section>.
• Forms 2.0: These are improvements to HTML web forms, where new attributes have been introduced for the <input> tag.
• Persistent Local Storage: To achieve without resorting to third-party plugins.
• WebSocket: A next-generation bidirectional communication technology for web applications.
• Audio and Video: You can embed audio or video on your webpages without resorting to third-party plugins.
• Geolocation: Now visitors can choose to share their physical location with your web application.
• Drag and drop: Drag and drop the items from one location to another location on the same webpage.

HTML5 has been designed to deliver almost everything that you would want to do on the web without requiring additional software, such as browser plugins. It can do everything from animation to apps, music to movies, and can also be used to build complicated web applications that run in your browser.

It is also cross-platform, which means that it does not care whether you are using a tablet, smart phone, or notebook. If your browser supports HTML5, it should work.

In this lesson, we will look at different pieces of the puzzle so that we can use to start our HTML5 project. HTML5 files consist of the normal text that the visitor to the website will see later.

In addition, there are elements that marks the text semantically, that is, which defines what a heading is, for example.

HTML5 elements are marked up using start tags and end tags. Tags are delimited using angle brackets with the tag name in between.

The difference between start tags and end tags is that the latter includes a slash before the tag name.

In the example above, we see several HTML elements being used. We will now only look at the element marked in red. There we see the p tag in an opening and closing parenthesis.

The p tag is used to define a paragraph in our document where we have entered a text. At the end of the text we see the p tag in brackets again. However, this time there is a slash in front of the tag name. To create an element, we need an opening tag and a closing tag. With the slash in front of the tag name we can create a closing tag.

You can also create elements within other elements; this is called nesting. Elements can be nested within each other. This creates a hierarchical structure. Complex HTML files contain many nestings.

If, for example, we want our text to emphasize the fact we offer local drinks and food, we can use another element in the p element. To make the word basic bold on our page, we use the b tag.

However, you must be careful to nest the elements correctly: in the example above, we first opened the <p>-element, then opened the <b>-element. Therefore, we must first close the <b> element before we can close the <p> element.

There are two important categories of elements in HTML: block elements and inline elements.

Block elements form a visible box on the webpage - they appear on a new line no matter what content precedes that element and all content after that element is also pushed onto a new line. Block elements make up the structure of the web page, they represent paragraphs, lists, navigation menus, or the footer. A block element can not be inside an inline element, but it can be inside other block elements.

Inline elements are the elements that are always inside a block element and only occupy the space directly inside a line. Inline elements do not start a new line; they normally appear within a paragraph of text.

Note

The first elements in our example are inline elements, and are therefore all in one line without spacing. After that we use the p element which is a blockline element and therefore a line break is created and the element is in one line.

Not all elements follow the pattern with an opening tag, the content, and a closing tag. Some elements only need a single tag, which is often used to embed something on a page. The <img> element, as an example, is one of these empty elements, which is used to embed an image file.

An empty element is an element that can not have any child nodes.

Elements can also have attributes. Attributes contain extra information about the element that will not appear in the content.

Attributes should possess the following:

• A space between it and the element name - for an element with more than one attribute, the attributes should also be separated by spaces
• The attribute name, followed by an equal sign
• An attribute value, wrapped with opening and closing quote marks

The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages. This attribute can be seen in the figure above (in the red box).

When we deal with CSS later, we can use selectors to determine to which elements the respective CSS rule should apply. This can be done, for example, with the help of the attribute ID. The HTML id attribute is used to specify a unique id for an HTML element.

You can not have more than one element with the same id in an HTML document.

These attributes contain additional information about the element, which is not displayed as actual content. With the class attribute, we can give an element an identifying name, which can later be used to provide this element with information such as font and font color with the help of CSS.

An attribute should always have the following:

• A space between it and the element name, or the previous attribute if there are several used in an element
• The attribute name followed by the equal sign (=)
• Leading and trailing characters around the value

Hopefully, you will accompany various projects in your career and will also come across the strange and interesting uses of HTML code. This includes attribute values without quotes. This works in some places, but elsewhere it can break the whole code. Our advice is to always put the quotes around attribute values in order to avoid such problems and write more readable code.

We use double quotes for attribute values in this course, but you may see people using single quotes instead. It does not matter what kind of inverted commas are used, you can do it however you like, but you should not mix the types of inverted commas.

You now know how the individual elements in an HTML file are constructed. However, one element on its own does not do much. We will now look at how the individual elements are combined to build a functioning HTML document.

Consider the code in the following image:

Take note of the following:

1. <!DOCTYPE html>: This is the doctype. When HTML was young (1991-1992), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML. More recently, the doctype is a historical artifact that needs to be included for everything else to work right. <!DOCTYPE html> is the shortest string of characters that counts as a valid doctype.

2. <html></html>: This is the <html> element. This element wraps all the content on the page. It is occasionally known as the root element.

3. <head></head>: This is the <head> element. This element acts as a container for everything you want to include on the HTML page, that is not the content the page will show to viewers. This includes keywords and a page description that would appear in search results, CSS to style content, character set declarations, and more.

4. <meta charset="utf-8">: This element specifies the character set for your document to UTF-8, which includes most characters from most human written languages. With this setting, the page can now handle any textual content it might contain. There is no reason not to set this, and it can help avoid some problems later.

5. <title></title>: This is the <title> element. This sets the title of the page, which is the title that appears in the browser tab to which the page is loaded. The page title is also used to describe the page when it is bookmarked.

6. <body></body>: This is the <body> element. This contains all the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.

Watch the following video to learn more about each element of a HTML document.

HTML has a mechanism to write comments in the code. Browsers ignore comments, effectively making comments invisible to the user. The purpose of comments is to allow you to include notes in the code to explain your logic or coding.

This is very useful if you return to a code base after being away for long enough that you do not completely remember it. Likewise, comments are invaluable as different people are making changes and updates.

To write an HTML comment, wrap it in the special markers <!-- and -->

The first element we will look at is the head element we used in the previous lesson.

The header of an HTML document is the upper part within the <head> element, which is not directly shown in the web browser when the page is rendered. It contains additional information about the web page, such as the <title>, links to CSS files, other metadata such as the author of the web page and a short description for search engines.

We have already seen the <title> element in action - it can be used to add a title to the web page.

The <title> element belongs to the metadata and represents the title of the entire web page, not just the content of a page on it.

In the example shown in the figure above, we have a title element in the head area. The text of this element is not visible on the page, but you can see the name in the browser window bar.

Metadata is data that describes data. HTML has an "official" way to add metadata to a document, the <meta> element. There are a lot of different <meta> elements that can be placed in the <head> element. We will not explain all of them here.

In the example shown in the figure above, we used <meta charset="utf-8">.

This element determines the character set used on the web page - it sets the set of characters to be used by the browser. utf-8 is a universal character set that includes almost every character used in human writing. This means that your website can display almost any language. Consequently, it is a good idea to set this on every one of your web pages. If you do not use this, umlauts (Ä, ö) and ß will not be displayed correctly.

You can do without meta elements or use as many as you like. Each meta element consists at least of attributes for "property" and "content".

While metadata for HTML pages used to play an important role in the context of search engine optimization, their influence on the ranking of Google, Bing and Co. is now considered to be rather low. Nevertheless, it is advisable for website operators to maintain the information in the HTML head and to store detailed meta information. This is because they are still relevant for meta search engines and local search scripts. In addition, meta tags offer the possibility to define instructions for controlling search robots.

To include CSS files, the <link> element is used. This is included in the header of the HTML file. The element takes two attributes, one rel="stylesheet", which indicates that it is a stylesheet. The other attribute is href, which contains the path to the CSS file as a value:

The <script> element should also go into the head and should include an src attribute containing the path to the JavaScript you want to load, and defer, which instructs the browser to load the JavaScript after the page has finished parsing the HTML. This is useful as it makes sure that the HTML is all loaded before the JavaScript run so that you do not get errors resulting from JavaScript trying to access an HTML element that doesn't exist on the page yet. There are several ways to handle loading JavaScript on your page, but this is the most foolproof one to use for modern browsers.

The heading tag is used to define and classify headings in HTML documents. With </H1>, for example, a first-order heading is defined or opened. The heading is then closed again with </H1>. Headings are graded by the number behind the "H". HTML documents can contain headings from H1 to H6. The heading tag provides an HTML document with a structure or hierarchy.

Even if the stylesheet of the document cannot be read by the browser, the use of heading tags ensures that the content is structured, and the headings are displayed hierarchically. This also gives the user an immediate overview of which sections of the content are relevant to them - so the user can get an overview much faster.

There are six different heading elements: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Each of these elements represents a different weighting of content in the document. <h1> represents the main heading, <h2> represents sub-headings, <h3> represents sub-headings and so on.

The result is a clearly structured text.

Unordered lists are used to mark up lists of items for which the order of the items does not matter.

Every unordered list starts off with a <ul> element. This wraps around all the list elements, as shown in the following figure:

The result of the code above is an unordered list:

• Fruits
• Beach
• Sun

Ordered lists are lists in which the order of the items does matter.

The markup structure is the same as for unordered lists, except that you have to wrap the list items in an <ol> element, rather than <ul>.

The result of the code is as follows:

1. Ride to the end of the road.
2. Turn left.
3. After 200 meters turn right.
4. The Station is on your right, 100 meters up the road.

There are other types of list that we do not discuss in this course.

When we want to add emphasis in spoken language, we stress certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics.

In HTML, we use the <em> element to mark up such instances. As well as making the document more interesting to read, these are recognized by screen readers and spoken out in a different tone of voice. A browser’s style this as italic by default.

Hyperlinks are one of the most exciting innovations the Web has to offer. They've been a feature of the Web since the beginning, and are what makes the Web a web. Hyperlinks allow us to link documents to other documents or resources, link to specific parts of documents, or make apps available at a web address. Almost any web content can be converted to a link so that, when clicked or otherwise activated, the web browser goes to another web address (URL).

A link is simply created by nesting text or other content in an <a> element. The href attribute must also be added to this element, which contains the target web address as a value.

On the page, the description of the link and not the URL is visible. This is the part after the href attribute. Hyperlinks are colored on the page by default.

A table is an ordered compilation of texts or data. The contents to be displayed are divided into rows (horizontal) and columns (vertical). The point of a table is that it is rigid. Information is easily interpreted by making visual associations between row and column headers. HTML tables should be used for tabular data — this is the purpose for which they are designed.

Several elements are responsible for the construction of a table. In the simplest case, a table consists of table rows, in which table cells are located.

For tables, we use the <table> tag in HTML.

For the single cells, we use the <td> tag in HTML.

The single cells are combined again to a line by the <tr> tag. A table row can contain header cells or data cells.

The <th> tag defines a header cell in an HTML table.

An HTML table has two kinds of cells:

• Header cells - contains header information (created with the <th> element)
• Data cells - contains data (created with the <td> element)

The text in <th> elements are bold and centered by default.

The text in <td> elements are regular and left-aligned by default.

In theory, you can create various headings in tables with normal table cells, that is, with the <td> tag. However, the problem is that different desired formatting, for example through CSS, is only possible if you create numerous different classes.

However, there is a more elegant solution, by adding a header to a table. This is done by the <thead> tag, which is filled with <th> entries. The principle is like the normal td-cells, but the h indicates that the cells in the header are to be addressed.

The following tags - <tbody>, <thead> and <tfoot> - divide tables into three areas:

1. <tbody> defines the table body, that is, where the table data is located. <thead> defines the table header. <tfoot> defines the table footer.

2. Whether or not <thead>, <tbody>, or <tfoot> are explicitly in the source code of the HTML file, a <tbody> element is always implicit. <thead> encompasses one or more rows of an HTML table and identifies it as the table header. <tbody> encompasses the actual contents of the table. <tfood> spans the rows of the table that can be assigned to the table footer.

3. Browsers can use these elements to enable scrolling of the table body independently of the header and footer. In addition, when you are printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.