W3702 Introduction To HTML
What Is HTML?
HTML, or HyperText Markup Language, is one of the essential building blocks for web pages. It defines the general structure of a web page, as well as its content. Every single website on the internet uses HTML in one form or another.
You can review the prerequisites to get started with building websites on the Coder Merlin™ server. You can use HTML directly in a PHP file, or you can create an index.html file instead.
Everything in HTML is accomplished using tags, which determine when a certain piece of a website will start and end. For example, there are tags for headings, paragraphs, images, videos, audio, and more.
Opening And Closing Tags
Most tags start with an opening tag of the form <[tag name]> (e.g.
<video>) and end with a closing tag of the form </[tag name]> (e.g.
</video>). In other words, tags indicate the start and end of each section, while the content in between the tags is the body of the section. The concept of tags is similar to brackets in many programming language in that they indicate where a block starts and ends.
Some tags, such as
hr, don't have closing tags because they don't have a "body" like most other tags. You can use them with only the opening tag, although many people prefer to use the syntax <[tag name] /> (e.g.
Most HTML elements support having content in between the opening and closing tag, which lets the browser know where an element starts and ends. For example, the paragraph tag (
<p>) indicates, well, a paragraph and can be used like so:
This is not in the paragraph. <p>This is in the paragraph</p>
In the case of the paragraph tag, it doesn't technically need to be closed, but it's still recommended for uniformity and ensuring that it behaves how you intend.
Most HTML tags can also have attributes, which attach additional information to a tag. Attributes are defined in the opening tag in the form [attribute name]="[attribute value]" (e.g. the "href" attribute in
<a href="https://example.com">link text</a>).
Two of the more common attributes are id and class. id is usually used to identify a single element, while a class is a more general selector that can be applied to multiple elements. In the case of both, you can define more than one id or class by separating them with a space. Here's an example of how you might use both:
<h2 id="chapter-1" class="chapter-heading">Chapter 1</h2> <p class="chapter-text intro-text">This is a paragraph.</p> <p class="chapter-text">This is another paragraph</p>
In this example, the id "chapter-1" is applied to the h2 tag along with the "chapter-heading" class, the "chapter-text" class is applied to both paragraphs, and "intro-text" is only applied to the first paragraph. "chapter-1" uniquely identifies the particular heading for the chapter, so it makes sense to use an id instead of a class. However, "chapter-heading", "chapter-text", and "intro-text" are likely to be reused multiple times on the same page so it makes sense to set them as a class.
HTML tags can also be nested. This is useful if you'd like to have an image within a paragraph, for example. Nesting is also common with div tags because it makes organizing and styling the page easier. Here's an example of an image tag nested in a paragraph tag nested in a div:
<div> <p> <img src="https://images.unsplash.com/photo-1609177393985-804cd5f98670?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max" /> </p> </div>
Continuing with the programming analogy, nesting works similar to nesting loops or conditionals in a programming language. You need to remember to close the correct number of blocks in the correct order (the "newest" blocks have to be closed before the "oldest" ones).
Anatomy of an HTML Page
Here's a simple HTML page that sets the title to "Hello, World!" and prints the same text in a header:
<!DOCTYPE html> <html lang="en"> <head> <title>Hello, World!</title> </head> <body> <h1>Hello, World!</h1> </body> </html>
The first line of an HTML5 document is
<!DOCTYPE html>, which lets the browser know it's viewing an HTML document. Although an HTML page will render properly without it, that sort of behavior is not guaranteed and could break compatibility with some browsers.
The HTML tag indicates the start and end of the HTML document.
Not to be confused with the
header tag or a heading tag (more on that later on), the head tag is where you put information like the stylesheets to load, the web page's title, and other meta information for search engines and browsers (such as the web page's description and favicon).
In order to set the title of your web page in the browser, you can put the title in the
title tag in the heading.
The body tag indicates the start and end of the web page's body, or the content that will actually be displayed. Most of the HTML you write will go here.
Here are a some of the more common tags, and what they do.
A common tag in HTML is the heading tag. These take the form of
h6 and can be used for the web page's name, chapter headings, or anything else where a header is necessary. h1 is the largest, followed by h2, and so on until h6:
<h1>Largest</h1> <h2>Smaller</h2> <h3>Even Smaller</h3> <h4>Small</h4> <h5>Really Small</h5> <h6>Smallest</h6>
Another common tag in HTML is the paragraph tag, which indicates a paragraph. Paragraphs are displayed on their own line even when the tag isn't:
Here is some text before the paragraph. <p>This text is on a new line</p>
It's also worth noting that for the most part, HTML ignores two or more spaces. So, the following HTML:
<p>This is text that is really spaced out</p>
Will result in:
This is text that is really spaced out.
In order to manually add more spaces, you can use the HTML entity code
in place of the space.
HTML also disregards newlines in the document. In order to manually add one, you can use the
<br /> tag. The br tag will insert a new line wherever you place it, such as in a paragraph.
The internet would be very different without the use of links, which come up very often in web pages. From navigation menus to linking to outside resources, links are used pretty much everywhere. Links are created with the anchor tag, which in HTML is shortened to a. In order to indicate the URL you would like the link to point to, you can set the href attribute. The text you put in between the opening and closing tag is the text the link will appear with:
Images are one of the few tags that don't have a closing tag. Similar to links, you set the image URL through an attribute, which in this case is src. You can also set the width and height attribute to change the size of the image in the browser, although this will result in distortions if the aspect ratio is not preserved. The alt tag is also often set on images, which assists with accessibility and search engine optimization.
<img src="https://images.unsplash.com/photo-1609177393985-804cd5f98670?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max" alt="iPhone on a desk with a computer in the background" />
Div tags (
<div> This text will not be treated as a paragraph. </div>