How to Learn HTML for Beginners: A Comprehensive Guide
HTML (HyperText Markup Language) is the skeleton of all modern web pages and a fundamental part of every web developer’s toolkit. It provides the content that gives web pages structure. By using elements and tags, you can add text, images, videos, forms, and more. Learning HTML basics is an important first step in your web development journey and an essential skill for front- and back-end developers.
What is HTML?
HTML is used to create pages and make them functional. It stands for Hyper Text Markup Language. Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether. A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes. The latest version is known as HTML5.
The History of HTML
HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989.
Understanding Tags and Attributes
Tags and attributes are the basis of HTML. They work together but perform different functions.
What Are HTML Tags?
Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1>. Most tags must be opened <h1> and closed </h1> in order to function. The vast majority of tags must be opened (<tag>) and closed (</tag>) with the element information such as a title or text resting between the tags. When using multiple tags, the tags must be closed in the order in which they were opened. For example: <strong><em>This is really important!</em></strong>
Read also: Learn Forex Trading
What are HTML Attributes?
Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside. An example of an attribute is: <img src="mydog.jpg" alt="A photo of my dog."> In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.
Setting Up Your Environment: HTML Editors
Now that we’ve gotten the basic theory out of the way, most importantly, we need an HTML editor. There are many choices on the market. Here are a handful of the most popular:
- Sublime Text 3: Sublime Text 3 has a mini-preview window on the right.
- Pros: Easily customizable, Beginner-friendly, Pleasant color schemes to choose from.
- Cons: Can’t print documents or code, No toolbar or dashboard available.
- Notepad ++: Another common choice for HTML and other language coders is Notepad ++. It is a tiny program to download and perform the functions you need for writing clean code. This is Notepad ++. Far from glamorous but does the job.
- Pros: Distraction-free interface, Auto-completion feature, Plugin options for extended functionalities.
- Cons: Can be difficult to get used to for beginners, No support for Mac.
- Komodo Edit: Komodo Edit is one of two editors released by the same label. They offer a simple, open-source editor with a variety of extensions and language support. It is free to download. Komodo isn’t one for a flash interface either but is simple to use.
- Pros: Easy-to-grasp coding interface, Available for Mac, Windows, and Linux, Impressive language support.
- Cons: No autocompletion by default, Visual settings are difficult to find and change.
For this tutorial, we will use the Sublime Text 3 as it is free and also offers cross-platform support for Windows, Mac, and Linux users.
What To Avoid
Your code’s front-end view varies from browser to browser - you will learn more about this with advanced CSS. Do not use Microsoft Word or any other word processor when writing HTML code, only an HTML editor or at the very least, your machine’s built-in notepad, is suitable for the task. Secondly, ensure that you’ve installed a number of different browsers such as Chrome and Firefox in order to preview your upcoming creation.
Creating Your First HTML Webpage
First off, you need to open your HTML editor, where you will find a clean white page on which to write your code. From there you need to layout your page with the following tags.
Read also: Understanding the Heart
Basic Construction of an HTML Page
These tags should be placed underneath each other at the top of every HTML page that you create.
<!DOCTYPE html>- This tag specifies the language you will write on the page. In this case, the language is HTML 5.<html>- This tag signals that from here on we are going to write in HTML code.<head>- This is where all the metadata for the page goes - stuff mostly meant for search engines and other computer programs.<body>- This is where the content of the page goes.<meta name="description" content="This field contains information about your page." </header>
Adding Content to Your Webpage
Next, we will make <body> tag. The HTML <body> is where we add the content which is designed for viewing by human eyes. This includes text, images, tables, forms and everything else that we see on the internet each day.
How to Add HTML Headings To Your Web Page
In HTML, headings are written in the following elements: <h1><h2><h3><h4><h5><h6> As you might have guessed <h1> and <h2> should be used for the most important titles, while the remaining tags should be used for sub-headings and less important text. Search engine bots use this order when deciphering which information is most important on a page.
Creating Your Heading
Let’s try it out. On a new line in the HTML editor, type: <h1>Welcome to My Page</h1> And hit save. We will save this file as “index.html” in a new folder called “my webpage.” Click the newly saved file and your first ever web page should open in your default browser. It may not be pretty it’s yours… all yours.
How To Add Text In HTML
Adding text to our HTML page is simple using an element opened with the tag <p> which creates a new paragraph. We place all of our regular text inside the element <p>. When we write text in HTML, we also have a number of other elements we can use to control the text or make it appear in a certain way.
Read also: Guide to Female Sexual Wellness
Other Key Elements
They are as follows:
<b>Bold</b>- Highlight important information<strong>Strong</strong>- Similarly to bold, to highlight key text<i>Italic</i>- To denote text<em>Emphasised Text</em>- Usually used as image captions<mark>Marked Text</mark>- Highlight the background of the text<small>Small Text</small>- To shrink the text<strike>Striked Out Text</strike>- To place a horizontal line across the text<u>Underlined Text</u>- Used for links or text highlights<ins>Inserted Text</ins>- Displayed with an underline to show an inserted text<sub>Subscript Text</sub>- Typographical stylistic choice<sup>Superscript Text</sup>- Another typographical presentation style
These tags must be opened and closed around the text in question.
Adding Links to Your Webpage
Make a duplicate of the code from your current index.html page. Copy / paste it into a new window in your HTML editor. Save this new page as “page2.html” and ensure that it is saved in the same folder as your index.html page. On page2.html add the following code: This will create a link to Google on page 2. Hit save and return to your index.html page. On a new line on index.html add the following code: <a href="*folder(s)*/page2.html">Page2</a> Ensure the folder path to the file (page2.html) is correct. Hit save and preview index.html in your browser. If everything is correct then you will see a link which will take you to your second page.
Adding Images to Your Webpage
The <img> tag has everything you need to display images on your site. Much like the <a> anchor element, <img> also contains an attribute. The attribute features information for your computer regarding the source, height, width and alt text of the image.
Styling and Formats You can check the file type of an image by right-clicking the item and selecting ‘Properties’. You can also define borders and other styles around the image using the class attribute. However, we shall cover this in a later tutorial. The file types generally used for image files online are: .jpg, .png, and (less and less) .gif. Alt text is important to ensure that your site is ranked correctly on search sites and also for visually impaired visitors to your site. The <img> tag normally is written as follows: <img src="yourimage.jpg" alt="Describe the image" height="X" width="X">
Create Your Own Image With An Alt Text
Save an image (.jpg, .png, .gif format) of your choice in the same folder where you’ve saved index.html and page2.html. Call this image “testpic.jpg.” On a new line in your HTML editor enter the following code: <img src="testpic.jpg" alt="This is a test image" height="42" width="42"> Hit save and preview the index.html page in your browser.
How To Make an HTML List
In web design, there are 3 different types of lists which you may wish to add to your site.
- Ordered List: The first is an
<ol>: This is an ordered list of contents.</ol> - Unordered List: The second type of list that you may wish to include is an
<ul>unordered list.</ul> - Definition List: Finally, you may wish to include a definition list
<dl>on your page.</dl>
Creating Tables in HTML
When drawing a table we must open an element with the <table> opening tag. </table> This will produce a 2-row table with 3 cells in each row. Tables can get quite complicated, so be sure to check out our special HTML tables tutorial. Tables were once the primary means by which pages were laid out. With the adoption of CSS, this is no longer necessary. And for good reason, because this created pages that were almost impossible to maintain. But for the purpose of display tables, HTML offers all the tools you will need.
Table Tags
However, watch out for these tags so that you can recognize them and use them as your skills develop. Here are the tables tags presented in a table - pun totally intended.
| Table Tag | Meaning | Location |
|---|---|---|
<thead> | Table Head | Top of the table |
<tbody> | Table Body | Content of the table |
<tfoot> | Table Foot | Bottom of the table |
<colgroup> | Column Group | Within the table |
<th> | Table Header | Data cell for the table header |
Tables, borders, spacing are usually styled using CSS but we will cover this in a later tutorial.
Beyond the Basics: Intermediate and Advanced Concepts
Once you have mastered the fundamental building blocks of HTML, we can explore advanced HTML concepts for dynamic, interactive, and meaningful web pages.
- iframe
- File Paths
- Favicon
- Computer Code Elements
- Add Emojis
- Charsets
- URL Encoding
- Responsive Web Design
- HTML Layout
- Quiz-HTML Advanced
- Add Audio to a Webpage
- Add video to a Webpage
Semantic Markup
This tutorial introduces you to semantic markup that allows you to construct pages so that their structure reveals their content. This is especially useful as search engines become more and more advanced - allowing them to find users the right information they are looking for.
Logical tags
You may have noticed that few people use the i tag for italics and instead use the em tag. This is because the i tag is just a formatting tag and thus should really be accomplished with CSS. The em has meaning: the text is emphasized. Logical tags like em and cite are important in the same way as semantic markup.
HTML References
HTML references are essential resources that provide comprehensive information and guidance on the building blocks of webpages. They're perfect for both experienced developers and those just starting out.
- Attributes Reference
- Global Attributes Reference
- Event Attributes Reference
- DOM Reference
- DOM Audio/Videos Reference
- HTML5 Reference
Interesting Facts in HTML
Here are some Interesting facts and features that highlight the importance of HTML in web development and how it shapes the structure of web pages:
- Interesting Facts about HTML
- Interesting Facts About HTML Links and Navigation
- Interesting Facts About HTML Tables
- Interesting Facts About HTML Lists
- Interesting Facts About HTML Meta Tags and SEO
- Interesting Facts About HTML5 APIs
- HTML Miscellaneous
tags: #how #to #learn #HTML #for #beginners
