Modern HTML 5 Tutorial for Angular Developers

Originally published at https://www.techiediaries.com

HTML stands for HyperText Markup Language is an artificial markup language that can be used by programmers to create the structure of web document. It’s one of the three pillars pillars of the web along with JavaScript and CSS. It can be interpreted by a web browser which transforms the an HTML source code comprised of HTML tags to actual web page with text, tables, forms and links etc.

Note: A web browser can only understand plain HTML, JavaScript and CSS. While Angular uses HTML for creating views, it adds some template structures such as loops and conditional directives along with other syntax symbols for variable interpolation and data binding which are not part of HTML thus they are compiled ahead of time and transformed to plain HTML.

An HTML document is simply a plain text document with the .html extension instead of .txt

Most tags have opening and closing parts. Each tag begins with < symbol and ends with > symbol. For example:

The topmost tag that defines and HTML document is <html></html>. All the content should be contained between the opening and closing tags.
The body tag that defines the body of the web page is <body></body>.
The tag to add a title of the page is <title> … </title>. etc.

Tags can have attributes that provide extra information to the browser for how to display the element.

Web servers serve only plain HTML to web browsers without any server-side programming constructs.

HTML is an essential requirement if you want to create websites. Most developers start their journey in web development by learning HTML, this is the case for both frontend developers that use JavaScript to create client-side apps and backend developers that use server-side languages like PHP or Python to create web apps.

Notes: You can also use JavaScript frameworks like Angular or libraries like React or Vue to create apps with JS and HTML. All these tools, make use of components that use HTML as the template language for creating views.

You can extend HTML by creating new tags using custom elements and web components which are standard browser technologies that don’t require a third-party tool, framework or library to be interpreted by the browser.

Prerequisites

You don’t need a fully-fledged development environment with a lot of tools installed to start learning HTML. You only need a text editor (that optionally has syntax highlighting for HTML) and a web browser like Chrome or Firefox or even IE.

You also need some basic knowledge to work with your operating system, Windows, Linux or macOS, particularly how to create and open files.

You can also use online development environments such as CodePen, JSBin or JSFiddle for trying HTML without creating files in your computer. Actually, these online environments are most useful if you are unable to create files in your system or you are using devices like phones and tablets while you are learning HTML, JavaScript or CSS.

In this tutorial, I’ll assume you are working with a Unix-based terminal (present in macOS or Linux) and can be installed on Windows. Don’t worry though, the command we’ll use is for navigating to a working folder and creating a file, you can do this in your preferred way.

HTML is not a programming language but instead a markup language that you can use to apply tags on some text to give it a semantic or meaning, create a structure for a page like header, footer, columns, sections and navigation menus. It can be also used to add images and videos to your pages from local or external sources.

Note: A programming language has advanced constructs and features like loops for iterating over arrays of data and conditional statements for making decisions etc. HTML doesn't have these constructs so It can’t be considered as a programming language since It just displays and formats visual elements on a web page.

Many template languages are built on top of HTML to provide these constructs. For instance, Angular provides a template syntax that includes data binding like interpolation for easily updating the page with data from the parent component, and directives such as *ngFor and *ngIf for iterating over data and displaying HTML elements conditionally.

Creating the very basic HTML document

Go ahead and open a terminal and run the following commands:

$ cd ~
$ mkdir my-first-webpage
$ cd my-first-webpage
$ touch index.html

We simply navigate to the home folder. Next, we create a folder called my-first-webpage. Next, we navigate inside it and create an index.html file.

Now, use a text editor (like Vim or whatever you prefer) and open the index.html file. Next, simply add the following code:

<!DOCTYPE html>
<html>
 <head>
   <title>My first HTML page</title>
  </head>
 <body>
   <p>This is my first web page</p>
 </body>
</html>

We first add a doctype which must be present. Nowadays in modern browsers that understand HTML5 it’s mostly useless, but required. In the old days, it was used to link to some type definition documents that contain syntax rules of the language.

According to Wikipedia, this is the definition of a doctype:

A document type declaration, or DOCTYPE, is an instruction that associates a particular SGML (for example, a webpage) with a document type definition(DTD) (for example, the formal definition of a particular version of HTML 2.0 - 4.0) or XML document. In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.

Next, we add an opening <html> tag with its closing </html> tag which mark the start and end of the HTML code. Between these two tags, you can add the necessary code for creating your web page.

Next, we add the head section of the document using the <head> and </head> tags: The [<head>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) element is sort of a container for all the tags that represent some information about your document such as the title which is added using a <title> element. Inline CSS styles or links to external CSS files or meta tags.

Next, we add the <body></body> section which contains the content of your web page.

Inside the body, we add This is my first web page paragraph wrapped by the <p> and </p> tags.

Now, go ahead and open the index.html file with your web browser (Make sure to save its content in the text editor). You should not see the tags but a rendered blank page with This is my first web page just like in the following screenshot:

Escaping Special HTML Characters

HTML has a set of special characters such as < and > which are used to surround the tag names also characters like " and ' used for the values of tag attributes and &. So, how can you display these characters in your HTML page? i.e tell the browser not to interpret them but simply display them like regular content. You can do this by escaping these characters using their codes:

Each code begins with & and ends with ;.

HTML Comments

When you are writing HTML code, you may need to comment your code but you don’t want these comments to appear in the web page since they are only intended for your or other developers that read the source code of your web page.

To write a comment, HTML provides <-- and --> tags. You should surround you comment with them. For example!

<!-- This is a comment -->

Note: In web browsers, you can read the source code of any web page that is currently displayed without any restrictions using View page source from a contextual menu or pressing CTRL + U in your keyboard. These instructions are valid for Chrome but you should find similar instructions for other browsers.

HTML Links and Navigation

HTML provides hypertext links using the <a> tag which works by surrounding a text that becomes the link. The target page is specified using the href attribute. For example:

<a href="https://www.techiediaries.com">Go to Techiediaries</a>

The href value can reference a local HTML document using its relative path or an external document using its URL (Uniform Resource Locator).

HTML Headers

HTML Paragraphs

HTML Sections

HTML Tables

HTML Forms

Let’s create a simple HTML website which has pages like home, about and contact page.

In the contact page, we’ll add an HTML form and thanks to cloud services users can submit their information without needing to add a backend for our app, we’ll use a cloud service FormSpree which allows us to get what usesr submit using our form via emails.

Can you build something useful with HTML alone?

Yes, you can! Not fully-fledged apps but you can create a static HTML website which you can use to share information with your visitors. You’ll be able to create multiple pages and add navigation between them and you can add content, paragraphs, divisions, sections, headlines and horizontal lines which are enough to present a document or article with a basic appearance.

Thanks for reading ❤

If you liked this post, share it with all of your programming buddies!