Photo by Jackson Sophat on Unsplash
HTML 101: Start Learning HTML as an Absolute Beginner
Html stripped to the bare bones and dumbed down for in-depth understanding.
What is HTML?
HTML, or HyperText Markup Language, is used to instruct the browser on how to display content. In the popular house analogy, HTML defines the structure of a webpage, much like the foundation and structural elements of a building. However, let's take this explanation a step further.
I regularly take the bus with my 3-year-old son to pick up his brothers from school. On Mondays and Fridays, we visit the library before collecting the others. His favourite books include the Peppa Pig series, a tactile book with textures to feel, and another with flaps hiding characters. These books are engaging and enjoyable, even for me.
Let's dissect HTML: HyperText: 'Hyper' means beyond, so 'HyperText' refers to content that goes beyond just text. Markup: This implies adding a degree of interactivity and engagement.
HTML is a scripting language that uses HyperText to add interactivity to a webpage, exceeding the capabilities of simple text. In the storybook example, the basic text page is enhanced with interactive elements like textures, stickers, images, and hidden content.
HTML, like the storybook, uses elements and tags to structure a page and make it engaging. There are elements to enlarge or reduce headings, create paragraphs, link to other pages, add images and videos, and so forth.
Basic HTML Page
HTML uses tags with some content nested between them, to display content.
HTML Tags and ElementsBASIC HTML PAGE
HTML displays content using nested tags, with the format: opening tag→content→closing tag.
They are written as:
<tag name>*content*</tag name>. For example, a heading tag:
<h1>Heading One</h1>
In this example, h1 is the tag name for displaying headings on a webpage. The text "Heading One" is the content that will display as the heading.
The opening heading tag is enclosed by angle brackets (
<>), while the closing heading tag is enclosed by angle brackets and a forward slash (</>).The content enclosed within an opening and closing tag is called an HTML element.
There are self-closing tags, which do not have content nested between. Examples include an image tag, a line break tag, and a horizontal rule.
<!-- image tag for inserting images -->
<img>
<!-- line break for creating horizontal spaces between elements -->
<br>
<!-- horizontal rule for creating horizontal lines between elements -->
<hr>
Such self-closing tags may have attributes just before the closing angle bracket. For instance, an image tag could have a source attribute pointing to the image location:
<img src="./assets/images/passport.jpg">
Types of Tags
htags are Heading tags, used to display document Headings.ptags are Paragraph tags, used to display text in paragraph formats.atags are anchor tags, used for creating reference links.
There are many more tags that we will explore soon.
Basic Structure of the HTML Document
To create a web page, you start by writing HTML code in a coding environment like VsCode. You can preview your work using the built-in Live-server plugin.
The HTML document is laid out as follows:
<!DOCTYPE html>
<html>
</html>
There are two basic elements at the highest point of the document tree:
The DocType Element, which tells the browser that this is an HTML 5 document.
The HTML document, which contains all the elements that make up the web page. These are nested within the opening and closing HTML tags. This represents the root element of the html page.
You can also set the language of the webpage as an attribute in the opening html tag:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
The HTML document has two child elements:
The 'head' element: This contains information about your web page, including other metadata elements.
The 'body' element: This contains everything visible on the webpage. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Title<title/>
</head>
<body>
<h1>My Passport</h1>
<img src="./assets/images/passport.jpg">
</body>
</html>
The head element has two nested children:
meta charset="UTF-8": This declares that the document character format is UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">: This provides information for device responsiveness.The title element: This contains the web page title for SEO ranking.
The body element contains our previous image element, as well as a heading showing 'my passport'.
Activity h01:
Structure the HTML document in your "index.html" file in VsCode, following the provided instructions:
Paste your passport photograph into the previously created images folder and ensure it's named 'passport.jpg'.
Change the document's title to 'My Profile'.
Right-click in any space on the HTML document and select 'open with live server' to preview your first web page.
Notice the title of the page 'My Profile' as well as the page heading.
Congratulations! You have created your first web page!
Activity H02:
There are other types of headings 'h-tags'. We will learn about them using the following exercise:
In your index.html file, change the document's title to 'Heading Types'.
Delete the
h1andimgelements.Create
h1toh6elements, each with their respective content.Preview your live-server.
What did you notice? Write it in the comment section. It should be pretty obvious.
Your code should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heading Types</title>
</head>
<body>
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>
</body>
</html>
And your live server preview should look like this:
You can see that the font sizes have gradually reduced from h1 to h6. It's best practice to have only one h1 on your web page, then use all the others in order of importance.
Another important tag is the paragraph (p) tag, used to add bodies of text in paragraph form to your page.
Activity H03:
We will recreate our initial profile page by combining everything we just learned. Here are the steps:
On your "index.html" page, delete everything including the doctype tag and head section.
Type an exclamation tag "!" and hit enter to generate the page structure, called a "boilerplate".
Change the page title to 'My Profile'.
Create a new
h1heading and type your name in uppercase characters as the content.Create an image element and set the relative path to your passport. Make sure to add an alt attribute to the image tag with the description "my passport".
Add a horizontal rule.
Add an
h2heading with the content "About Me".Add a paragraph tag and insert text between the tags. Between the opening and closing tags, type "lorem" and hit tab to generate some placeholder text.
Create a line break.
Add more placeholder text.
Add a horizontal rule.
Create another
h2tag that says "My Skills".Add some sample text.
Add a horizontal rule.
Create a
h3tag that says "Hobbies".Add some hobbies.
The live server preview should look like this:
If you go to the HTML resources page on the W3Schools website, you will see all the tags and how they work. Bookmark this page for future reference, so you don't have to memorize everything; you can always go back there.
Click here to go to the next article as we dive deeper into HTML tags and elements such as the "pre" tag, comments and hyperlinks