HTML page starter
Let us begin with the creation of a basic HTML file! We will dive right in with some sample code. Some parts may seem strange if we've never seen HTML before. However, it helps to have a minimal but real example of HTML first and then analyze its smaller parts.
Prerequisites
To create a simple HTML page, we could use a simple text editor like TextEdit or Notepad, but a code editor, like Sublime Text or Visual Studio Code, helps a lot (the latter have more advanced features that focus on all kinds of code, rather than just plain text!)
An example
If we open the text or code editor, and copy and paste the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>(The title that will show in the browser tab)</title>
</head>
<body>
<p>(The content)</p>
</body>
</html>We should note the following:
- The first line tells the browser to expect an HTML document
- The actual HTML begins inside the
<html>tag- The optional
langattribute indicates what human language the page uses
- The optional
- The HTML continues with the
<head>tag- The
<title>tag displays the page's name on the browser tab
- The
- Then, the
<body>tag contains the actual content that the browser displays- The
<p>tag represents a paragraph - Other tags could replace the
<p>tag, such as<h1>for a top-level heading<img>for an image- (and so on)
- The
- All of the HTML tags listed above are opening tags
- Most HTML tags also have a closing tag
- e.g. <tag> would be an opening tag
- then </tag> would be the closing tag
- Opening and closing tags mark the beginning and the end of a tag's "territory" on the webpage
- Not all tags need to have closing tag; some tags are "self-closing", e.g.:
<img src="filename.jpg">(a tag for an image) can stand on its own without a closing tag<img src="filename.jpg" />, with the trailing slash, can optionally emphasize its self-closing nature
- Most HTML tags also have a closing tag
Another example
Once we have grasped the aforementioned basics, the possibilities become endless:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Page's title</title>
</head>
<body>
<h1>Heading 1</h1>
<p>This forms a pararaph of some sorts! </p>
<h2>Heading 2</h2>
<p>Here we have another paragraph under the second heading!</p>
<h3>Heading with image below</h3>
<img src="image.jpg" alt="An image of a cat!" />
</body>
</html>Looking at the new tags, we have:
<meta>(background information about the page)- (don't worry about the
charsetattribute for now)
- (don't worry about the
<h1>represents a top-level heading<h2>and<h3>(as we can guess) represents lower-level headings<img>represents an image with a- reference to an image file (named image.jpg)
- piece of
alttext that describes the image
Unlimited HTML?
HTML documents (i.e. pages) have no limits as to how many tags we could have inside the <head> and the <body> tag.
However, an HTML page should have only one <h1> tag!