Introduction

This article is for anyone wanting to learn the basics of Web Development without any prerequisites. If you have never written a line of code, this article is for you. This video is a part of the series. In the next videos we will focus on CSS and JavaScript.

This video is for beginners. There will be little to no CSS in this videos. HTML without CSS is very ugly, but we're not focusing on the style here, we're focusing on the HTML syntax.

Just a note

Along with writing this article, I have also created a YouTube video! I encourage you to first watch the video and follow along / code  while watching. The video goes into even more depth and has more comprehensive explanations than this article does. You can then use the concise code blocks in this article as a reference.

Here's a link to the full video: https://youtu.be/wsbZiNOdoZQ.

Table of Contents:

  1. What is HTML
  2. Prerequisites
  3. Creating an HTML file
  4. Common HTML Terms
  5. HTML Syntax and Page Structure
  6. HTML Elements
  7. Building Structure

What is HTML?

Let's first answer a question that everyone has in the beginning; what is HTML?

HTML stands for Hyper Text Markup Language. It is NOT a programming language, rather it is a markup language for creating web pages. Programming languages have logic, loops, conditional statements. HTML doesn't have any of that. It just displays and formats elements on the page. It is strictly presentational, no logic included.

With that said, that doesn't make any programming language more important than HTML. In fact, if you're getting into web development. HTML is the most important building block of the web. Every single website uses HTML. It is a prerequisite for any other technology stack in web development.

Prerequisites

We need just a few things to get started:

  • a web browser (Chrome, Edge, Firefox)
  • a text editor (Visual Studio Code, Sublime Text, Atom)

The highlighted options are preferred and are the ones that I will be using in the video and in this article. Here is the link for downloading Visual Studio Code: Download Visual Studio Code - Mac, Linux, Windows.

Creating an HTML file

To create an HTML file we can simply create a new file with .html extension. Create a new folder on your desktop, call it My Website. Open Visual Studio Code and open that folder inside of it. Then create a new file called index.html. Now you can write code inside of it and you can also open it in your browser.

In the the video I have already mention, I go through more details on how to do this step by step. If you've missed it, here's the link - https://youtu.be/wsbZiNOdoZQ.

Understanding common HTML terms

While getting started with HTML, you will most likely encounter new - and often strange - terms. Over time you will become more and more familiar with all of them, but the three most common HTML terms you should begin with are elements, tags, and attributes.

Elements define structure and content within a page. Elements are identified by the use of less-than and greater-than angle brackets, surrounding the element name.

<h1> is an example of a heading element.

Two of the same elements in a pair (opening and closing one) make up a Tag.
Anything in between of the opening and closing tags is the content of that element. We will go in more detail on how do we close tags in the section HTML Syntax.

<h1>Heading Content</h1> is an example of a full heading tag.

Attributes are properties used to provide additional information about an element. The most common attributes include the id attribute, which identifies an element, class attribute, which classifies an element; the src attribute, which specifies a source of the content; and the href attribute, which provides a hyperlink reference to a linked resource.

Attributes are defined within the opening tag, after an element's name.
Generally, attributes include a name and a value.

<h1 id="main-heading">Heading Content</h1> is an example of a heading tag with an id attribute.

HTML Syntax

The most important topic of this article is the syntax, the way we write HTML.

As we learned before, there is an opening tag, a content and then the closing tag.

There is one exception to this rule - self-closing elements. Some of the elements are self-closing, meaning, they do not need a separate closing tag.

Some examples of self closing tags are: <br>, <img>, <meta>, <hr>.

HTML Page Structure

After we learn the basics of syntax, we can now learn how to structure it to a single valid HTML document.

<!DOCTYPE html>

<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		<h1>This is a heading.</h1>
		<p>This is a paragraph.</p>
	</body>
</html>

The first line is a doctype declaration. It is an instruction to the web browser about what version of HTML the page is written in. The only viable option nowadays is HTML5, which is the newest version.

The doctype for HTML5 is <!DOCTYPE html>.

After that, we have an <html> tag. It wraps around the whole document.

Inside of <html> tag we can found <head> and <body> tags.

The <head> element is a container for metadata and is placed between the <html> tag and the <body> tag. HTML metadata is data about the HTML document. Metadata is not displayed but it defines the document title, character set, styles, scripts, and other meta information.

For example, the <title> tag will change the name of your website in a chrome tab.

After the closing <head> tag, there is a <body> tag. EVERYTHING else that we're going to mention in the rest of this article will go inside of the <body>. It represents everything that you can see on a website.

HTML Elements

Headings

<h1> <h2> <h3> <h4> <h5> <h6>

Headings are block-level elements, and they come in six different rankings.

Headings help to quickly break up content and establish hierarchy, and they are key identifiers for users reading a page. They also help search engines to index and determine the content on a page.

Headings should be used in an order that is relevant to the content of a page. The primary heading of a page or section should be an <h1> heading, and subsequent headings should use the numbers from 2 to 6.

Each heading level should be used where it is semantically valued, and should not be used to make text bold or big—there are other, better ways to do that.

Here is an example of HTML for all the different heading levels and the resulting display on a web page.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>

Paragraphs

<p>

Headings are often followed by supporting paragraphs.
Paragraphs are defined using the <p> tag.

Paragraphs can appear one after the other, adding information to a page as desired. Here is an example of how to set up paragraphs.

Steve Jobs was a co-founder and longtime chief executive officer at Apple.

On June 12, 2005, Steve gave the commencement address at Stanford University.

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple.</p>
<p>On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

Inside of the paragraphs we can you tags like: <strong> or <em> to wrap the words we want to make bolder or the ones we may want to emphasize. Here's an example:

Steve Jobs was a co-founder and longtime chief executive officer at Apple.

On June 12, 2005, Steve gave the commencement address at Stanford University.

<p><strong>Steve Jobs</strong> was a co-founder and longtime chief executive officer at Apple.</p>
<p><em>On June 12, 2005</em>, Steve gave the commencement address at Stanford University.</p>

Anchor tag

<a>

The HTML <a> element (or anchor element), along with it's href attribute, creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.

Google
<a href="http://google.com">Google</a>

Lists

<ul> <ol> <li>

HTML offers two ways for specifying lists of information.
All lists must contain one or more list elements. There are two list types:

  • <ul> − An unordered list. This will list items using plain bullets.
  • <ol> − An ordered list. This will add numbers to your list items.

Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
<ul>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3</li>
	<li>List Item 4</li>
</ul>

Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4
<ol>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3</li>
	<li>List Item 4</li>
</ol>


Tables

<table> <tr> <th> <td>

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Name Email Description
Adrian Hajdin [email protected] Author
@JavaScriptMastery [email protected] Instagram Page
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Description</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Adrian Hajdin</td>
			<td>[email protected]</td>
			<td>Author</td>
		</tr>
		<tr>
			<td>@JavaScriptMastery</td>
			<td>[email protected]</td>
			<td>Instagram Page</td>
		</tr>
	</tbody>
</table>

Forms

The HTML <form> element defines a form that is used to collect user input.

HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.

A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.








<form method="POST">
	<div>
		<label>First Name</label>
		<input type="text" name="firstName" placeholder="First Name">
	</div>
	<br>
	<div>
		<label>Last Name</label>
		<input type="text" name="lastName">
	</div>
	<br>
	<div>
		<label>Email</label>
		<input type="email" name="email">
	</div>
	<br>
	<div>
		<label>Message</label>
		<textarea name="message"></textarea>
	</div>
	<br>
	<div>
		<label>Gender</label>
		<select name="gender">
			<option value="male">Male</option>
			<option value="female">Female</option>
			<option value="other">Other</option>
		</select>
	</div>
	<br>
		<div>
			<label>Age:</label>
			<input type="number" name="age" value="30">
		</div>
		<br>
		<div>
			<label>Birthday:</label>
			<input type="date" name="birthday">
		</div>
		<br>
		<input type="submit" name="submit" value="Submit">
</form>


Buttons

The HTML <button> element represents a clickable button, which can be used in forms or anywhere in a document that needs simple, standard button functionality.

<button>Click Me</button>

Images

In the beginning, the Web was just text, and it was really quite boring. Fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added. There are other types of multimedia to consider, but it is logical to start with the humble <img> element, used to embed a simple image in a webpage. In this article we'll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to CSS background images.

In order to put a simple image on a webpage, we use the <img> element. This is an empty element (meaning that it has no text content or closing tag) that requires a minimum of one attribute to be useful — src (sometimes spoken as its full title, source). The src attribute contains a path pointing to the image you want to embed in the page, which can be a relative or absolute URL, in the same way as <a> element href attribute values.

So for example, if your image is called dinosaur.jpg, and it sits in the same directory as your HTML page, you could embed the image like so:

<img src="dinosaur.jpg">

If the image was in an images subdirectory, which was inside the same directory as the HTML page, then you'd embed it like this:

<img src="images/dinosaur.jpg">

And so on.

You could embed the image using its absolute URL, for example:

<img src="https://www.example.com/images/dinosaur.jpg">

The <img> tag has two required attributes: src and alt.

Tip: To link an image to another document, simply nest the <img> tag inside <a> tags.

Building Structure

For the longest time the structure of a web page was built using divisions. The problem was that divisions provide no semantic value, and it was fairly difficult to determine the intention of these divisions. Fortunately HTML5 introduced new structurally based elements:

  • <header>: Used to contain the header of a site.
  • <footer>: Contains the footer of a site.
  • <nav>: Contains the navigation functionality for the page.
  • <article>: Contains a standalone piece of content that would make sense if syndicated as an RSS item, for example a news item.
  • <section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.
  • <aside>: Defines a block of content that is related to the main content around it, but not central to the flow of it.


All of these new elements are intended to give meaning to the organization of our pages and improve our structural semantics. They are all block-level elements and do not have any implied position or style. Additionally, all of these elements may be used multiple times per page, so long as each use reflects the proper semantic meaning.

With structural elements and text-based elements under our belts, our HTML knowledge is really starting to come together. Now is a good time to revisit our Styles Conference website and see if we can provide it with a little better structure.

That’s it!

You made it all the way until the end! That's all that there is to HTML. If you'd want a next article/video in the same fashion as this one, about CSS or JavaScript. Let me know by commenting on the YouTube video :).

Feel free to ask any questions and leave feedback or critique.

Most helpful would be the support on YouTube since I recently created a channel! Click here, there is a lot of interesting stuff coming soon! :)

You can also check out the article I did on: Git Commands.