We use hundreds of HTML tags to build a perfect website. With each new project, you’ll learn about new HTML tags. So, if you are just getting started, we have a quick and effective way for you. We’ll show you how to use the important tags. Also, we’ll give you some examples of easy yet powerful HTML layouts. However, keep in mind these are not all the HTML tags there are. Finally, we’ll provide you with guides to the next level and beyond.
How to learn HTML the easiest way?
An effective way to learn HTML is to learn about different groups of tags. So, we have divided HTML tags into Text, Image, Link, Block, Table, and Form. Everything else goes under the Extra group of tags. Before we start learning about these groups, we will need to understand some fundamental tags. These fundamental tags give a webpage its basic structure. Also, the most basic structural tags are html, head, and body tags.
The DOCTYPE tells the browser that it’s an HTML document. Also, all HTML files start and end with the html tag. Firstly, the head tag contains the title tag and all the CSS and JS file locations. It’s also a common practice to place the script tag before the closing body tag. We’ll learn about these CSS and JS files and the tags used to link them in later lessons. Also, anything you write inside the head tag is not visible to viewers in the front-end. Secondly, the body tag contains everything that is visible to viewers. Thirdly, all modern websites use the header and footer tag to make the code more readable to web crawlers. So, the header tag mostly contains the website logo and main navigation. The footer tag also contains mostly navigation and copyright information.
Finally, other tags are important for creating a base website structure, such as the aside tag. You’ll learn more about new tags as you go.
There are different html tags to create headings, paragraphs, and lists. The most important ones are h (for heading), p (for paragraph), and li (for list). So, here are some examples of these tags and ways to format them into different styles using HTML tags.
There are 6 heading tags from h1 to h2. Also, these tags result in headings that have different sizes. This is very important for content with different heading levels.
<h1>Heading 1 Tag Has 32 Pixels Font Size</h1> <h2>Heading 1 Tag Has 24 Pixels Font Size</h2> <h3>Heading 1 Tag Has 18.72 Pixels Font Size</h3> <h4>Heading 1 Tag Has 16 Pixels Font Size</h4> <h5>Heading 1 Tag Has 13.28 Pixels Font Size</h5> <h6>Heading 1 Tag Has 10.72 Pixels Font Size</h6>
The most popular HTML tag is the paragraph or p tag. Also, it has a default value of 16px on top and bottom. Moreover, people use the br tag to add quick line breaks inside a paragraph.
<p>This is<br>a paragraph<br>with line breaks.</p>
HTML Text Format
There are tags like i and b to make text appear italic and bold. However, people mostly use CSS to format texts and other elements. The span tag is a very popular tag that has no default format value. So, you can use span tag with CSS to make your own formats.
<b> Bold text </b> <strong> Important text </strong> <i> Italic text </i> <em> Emphasized text <em> <mark> Marked text <mark> <small> Small text <small> <del> Deleted text <del> <ins> Inserted text <ins> <sub> Subscript text </sub> <sup> Superscript text </sup>
List tags are used to add a list inside paragraphs. Also, the li tag is a common tag when creating navigation or menu. There are two types of list tags.
An ordered list starts with the ol tag. The list items will be marked with ordered numbers by default.
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
An unordered list starts with the ui tag. The list items will be marked with small black circles by default.
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
The image tag is the most common way to add images to a website. The img tag has no closing tag and it has lots of attributes. So, these attributes are sued to resize the image or add more information to it. The width and height tags are perfect examples. You can use these tags to add image sizes in pixels or percentages (of the screen). Also, the alt attribute provides extra information to the viewer. Finally, there are multiple ways to load an image using the src attribute. We’ll discuss more in the File Path section of this lesson.
<img src="image.jpg" alt="Image Name" width="100" height="200"> <img src="folder/image.jpg" alt="Image Name" width="10%"> <img src="http://w3ultra.com/folder/image.jpg" alt="Image Name" width="100%">
Let’s use our knowledge from HTML Text and Image section to create hyperlinks. You can click on a link and jump to another page. When you move the mouse over a link, the mouse arrow will turn into a little hand.
Simply add an anchor tag around any text and it’ll turn into a hyperlink. The a tag has multiple attributes and the most common is the href. The href contains the location of the targeted page or document.
<a href="index.html">Home</a> <a href="https://www.w3ultra.com/">Visit W3Ultra</a>
Simply add an anchor tag around any image and it’ll turn into a hyperlink.
<a href="index.html"> <img src="logo.png" alt="Home"> </a>
The target attribute specifies where to open the linked page.
- _blank Opens the linked document in a new window or tab.
- _self Opens the linked document in the same window/tab.
- _parent Opens the linked document in the parent frame.
- _top Opens the linked document in the full body of the window.
<a href="https://w3ulta.com/" target="_blank">Open W3Ultra in a new tab</a>
HTML bookmarks allow readers to jump to specific parts of a page. Firstly, create a bookmark with the id attribute.
<h2 id="anytext">Learn About ID Attribute</h2>
Secondly, create a link anywhere on the page like this.
<a href="#anytext">Go to ID attribute</a>
Thirdly, you can create a bookmark for a different page like this.
<a href="new.html#anytext">Go to ID attribute</a>
Finally, once the reader clicks on the link ” Go to ID attribute “, the browser will scroll to that section.
A block element always starts a new line and takes up the full width available. We have already learned about a few of these tags before.
Here are examples of popular block-level elements. However, you won’t need to learn about all these tags in this lesson. We’ll only show you the most important one.
<address> <article> <blockquote> <dd> <dl> <dt> <h1>-<h6> <p> <pre> <hr> <ol> <ul> <li> <header> <main> <nav> <aside> <footer> <div> <section> <fieldset> <figcaption> <figure> <canvas> <form> <noscript> <output> <table> <tfoot> <video>
The div tag is the most popular block-level element. Also, it is mostly used to add different sections to a web page. So, we’ll see a simple example of the div tag.
<div> <h2>W3Ultra</h2> <p>Code Collection and Sharing Platform</p> </div>
Without any CSS style, this code will result in a heading and paragraph only. However, if you add CSS style, it’ll look much better to the reader. We’ll discuss more CSS styling in our next lesson.
HTML table starts with the table tag. A table has two sections, the head, and the body. These sections are created using thead and tbody tags. However, you can create a table without these two tags. The most important tags are tr and td. The tr tag represents each row of a table and td tag represents individual cells (columns) inside the row. In addition, the th tag works the same as the td tag but it represents only table header cells (columns). So, here is an example of a simple table with three rows and three columns.
The first row has the titles of this table: Name, Age, Car. The second and third row has information about Bob and Alice about their age and whether if they have a car.
<table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Car</th> </tr> </thead> <tbody> <tr> <td>Bob</td> <td>30</td> <td>Yes</td> </tr> <tr> <td>Bob</td> <td>30</td> <td>Yes</td> </tr> </tbody> </table>
If you wish to join certain rows and columns, there are easy ways. So, as you can see Bob and Alice are both age 30 and have cars. Le’s ask if they have bikes. In this example, Bob has a bike but Alice do not. So, let’s join the rows and columns that have the same values. You can use rowspan to join two rows. In this case, both of them are 30 years old and we have joined the two age rows. Also, you can use colspan to join two columns. In this case, Bob has both a car and a bike. So, we have joined the two columns for Bob’s car and bike.
<table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Car</th> <th>Bike</th> </tr> </thead> <tbody> <tr> <td>Bob</td> <td rowspan="2">30</td> <td colspan="2">Yes</td> </tr> <tr> <td>Alice</td> <td>Yes</td> <td>No</td> </tr> </tbody> </table>
HTML forms are very useful for collecting information. A form always starts with a form tag. The form tag has lots of attributes. However, the most important ones are action and method attributes. The action attribute contains the location where the form data will be handled. The method attribute describes how the information is going to be passed. We’ll learn more about how to handle form data in PHP lessons.
In addition, forms have label tags and input tags inside them. The label tag describes the purpose of the input tag to users. The textarea tag allows users to expand the input field and write efficiently. Moreover, the Input tag has lots of attributes. The most important ones are type, name, value, and placeholder. The value and placeholder attributes are self-explanatory. If form input has value, the placeholder does not show.
<form action="action.php" method="post"> <label>Name:</label> <input type="text" name="name" value"W3Ultra" placeholder="Your Name"> <label>E-mail:</label> <input type="email" name="email" valuse="[email protected]" placeholder="Your Email"> <label>Message:</label> <textarea name="message" valuse="How to learn HTML from scratch?" placeholder="Your Message"></textarea> <input type="submit" name="email" value="Send"> </form>
The input type attribute defines what type of input it is. However, the input type “submit” change the input field into a button. Users can click this button to submit the form. You can also use a button tag to do the same. Also, the name attribute is used to give these inputs unique identifies and collect data.
Learn HTML Extras
Here are some of the important attributes, and tags to make your work more efficient. Finally, you should have some concepts about the complete list of HTML tags.
The Class Attribute
<h2 class="city">London</h2> <div class="city"> <h2>London</h2> </div>
The ID Attribute
<h2 id="uniquecity">London</h2> <div id="uniquecity"> <h2>London</h2> </div>
You can add comments to your HTML source by using the following syntax.
<!-- Write your comments here -->
HTML File Paths
HTML file paths are an important concept to learn. It helps you understand how to use files from different locations. Besides, when you work with files in a folder with multiple levels, it gets complicated. So, you should learn more about the base tag to simplify your file path.
<img src="picture.jpg"> picture.jpg is located in the same directory as the HTML document <img src="images/picture.jpg"> picture.jpg is located inside the "images" folder of current directoy <img src="/images/picture.jpg"> picture.jpg is located in the images folder at the "root" directory <img src="../picture.jpg"> picture.jpg is located in the folder one level up from the current directory
HTML iframes start with the iframe tag. The src attribute specifies the URL of the source. Use the height and width attributes to specify the size of the iframe. The attribute values are specified in pixels by default, but you can also user percentages like 100%.
<iframe src="https://w3ultra.com" height="200" width="300"></iframe>
Learn more about HTML
HTML tags in this lesson are the most important ones. You’ll learn more HTML tags as you keep building. Also, learn about the best web development roadmap to follow for a successful career Finally, we’ll be updating this document in near future.