Beginners Guide To Learning HTML
In this beginner's tutorial I will show you how to learn HTML. We will start off with the basics and then we will go through the more advanced topics.
What is HTML?
HTML is an acronym that stands for Hypertext Markup Language. Which is simply
put, a standardized system for tagging text files to achieve font, color,
graphic, and hyperlink effects on World Wide Web pages.
What does HTML look like?
To become familiar with HTML, we will start off with a simple example found below. In this example, try to guess what the rendered page will look like? It's okay if you do not understand the example as we will cover this later on in this article.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
If you guessed correctly, you will see the following: Hello World in the
middle of the page. You will also notice in the browser tab that the page has a
title of Hello World as well. This is set in the <head> HTML element, while
the <body> HTML element contains an <h1> HTML element that contains the
Hello World content of the rendered page.
What is a DOCTYPE?
The <!DOCTYPE> HTML element is used to specify the type of document that is
being rendered. This is used to help the browser know how to render the
document.
What is the HTML element?
The <html lang="en"> HTML element is used to specify the language of the
document. This is used to help the browser know which language to render the
document in.
What is the HEAD element?
The <head> HTML element is used to contain all the meta information that is
needed to render the document.
What is the TITLE element?
The <title> HTML element is used to specify the title of the document. From
our example above, this would render Hello World in the title bar of the
browser.
What is the BODY element?
The <body> HTML element is used to contain all the content of the document.
This is where the <h1> HTML element is used to render the Hello World
content. This is where most of the content of the document is rendered and where
you would be writing most of your web page content.
What is the H1 element?
The <h1> HTML element is used to render the Hello World content in the
<body> HTML element. This is a HTML Heading element that is used as Typography
to structure a documents content, specifically it's heading level 1. There are 6
levels of heading, and the more heading levels you use the more important the
content is. For instance, a heading level 1 is the most important, a heading
level 6 is the least important.
Let's take a look at a more complex example
Below you will find a more complex example of HTML that contains an <h1>,
<h2>, <p>, <ul>, and <li> HTML elements. It will also contain an HTML
comment. Which is used to comment out code that is not needed to render the
document. Or for leaving you or others on your team a note about a specific
section of the document that is only meant for you to read while working in the
codebase. Pay close attention to the <!-- --> HTML comments and the syntax of
the HTML elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
</head>
<body>
<!-- THIS IS A COMMENT -->
<h1>Hello World</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<!-- THIS IS SECOND COMMENT -->
<h2>Hello World</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<!-- THIS IS A THIRD COMMENT -->
<ul>
<li>This is a list item.</li>
<li>This is another list item.</li>
</ul>
</body>
</html>
- We covered the
h1andh2HTML elements in the previous examples. - The
<p>HTML element is used to render a paragraph of text. - The
<ul>HTML element is used to render a list of items. - The
<li>HTML element is used to render a list item.
Remember, the comments are used to comment out code that is not needed to render the document.
What are HTML Tags?
HTML tags are used to render HTML elements. They are used to structure the content of the document. We have already learned what the are from the examples above, however there are many HTML tags that can be utilized when writing our HTML documents.
HTML Tags must be opened and closed. A tag is opened by using the < character
and the tag name is followed by a > character. A tag is closed by using the
</ character and the tag name is followed by a > character.
HTML Tags follow a strict rule of punctuation. For example, the <h1> HTML
element is not considered valid in HTML when written as capitalized like <H1>.
This is because HTML tags are case sensitive.
What is a DIV HTML Tag?
The <div> HTML element is used to render a division of content. This is used
to create a container for other HTML elements. This is considered a
block level element because it is a structural element that can be used to
create a block level element.
What is a SPAN HTML Tag?
The <span> HTML element is used to render a span of content. This is used to
create a container for other HTML elements. This is not considered a
block level element because it is not a structural element.
What is a Script Tag?
The <script> HTML element is used to render a script. A script tag refers to
JavaScript code that is used to manipulate the content of the document.
What is JavaScript?
JavaScript is a programming language that is used to manipulate the content of the document. JavaScript is a scripting language that is used to manipulate the content of the document. We will cover the JavaScript language in more detail in the next series.
What is a Style Tag?
The <style> HTML element is used to render a style. A style tag refers to CSS
code that is used to manipulate color and layout of the content of the document.
It is how we can position elements on the page. Or how we can add colors to the
HTML web page. We will cover the CSS language in more detail in the next series.
What is CSS?
CSS is a style sheet language, knowns as Cascading Style Sheets that is used
to manipulate the content of the document. We will cover the CSS language in
more detail in the next series.
What is a Link Tag?
The <link> HTML element is used to render a link. It is how we can link to
other files like CSS or JavaScript files from within our HTML document. This is
not to be confused with the <a> HTML element. The <a> HTML element is used
to render a hyperlink to direct the user from one page to another or a
completely different website all together.
What is a Meta Tag?
The <meta> HTML element is used to render a meta tag. A meta tag is used to
specify the information about the document. This is used to specify the author
of the document, the description of the document, the keywords that are used to
search for the document, and the date the document was created.
An example of the use of a <meta> HTML element is shown below. This tells the
browser to use the charset HTML property to render the document with a value
of utf-8. This is used to specify the character set of the document.
<head>
<meta charset="utf-8" />
<title>Hello World</title>
</head>
We are done!
We have learned the basics of HTML and we are ready to start writing our first web page. We will be covering the rest of the web page in the next series. Stay tuned!
Supporting My Work
Please consider Buying Me A Coffee. I work hard to bring you my best content and any support would be greatly appreciated. Thank you for your support!
