HTML stands for hypertext markup language, and documents using this language create web pages. Every website uses this, so it's important to understand how it works.
In this tutorial article, you’ll learn all you need to know about HTML.
What Is the <!DOCTYPE > Declaration?
The <!DOCTYPE> declaration is the first line of code in every HTML file. It tells web browsers which version of HTML is within a specific file.
Each version of HTML is unique and has its own set of rules. HTML 5 is the latest version of the language. It’s the recommended version for developers, as well as the simplest version to declare. To declare an HTML 5 document, simply add the HTML element to the <!DOCTYPE> declaration.
You can see an example below:
<!DOCTYPE html>
What Is the <head> Tag?
In every HTML document, the <!DOCTYPE> declaration is followed by the <html> tag. This tag identifies the root of the document, and it encloses the <head> and <body> tags.
The <head> tag is the first section, and it contains the <title> and <meta> tags. However, in some instances when the developer chooses to use internal CSS, the <style> tag is also placed within the <head> tag.
Only one <title> tag is in an HTML document. The <title> tag contains the title of a web page, and this information appears in the tab area of a web browser.
You can see a title tag example below:
<title>An Introduction to HTML</title>
An HTML file that has the <title> tag above will show up as “An Introduction to HTML” in the tab area of browsers.
The <meta> tag describes the content on a web page and generally has a name and a content attribute. Three of the more popular types of <meta> tags are description, keyword, and viewport.
Below is a description <meta> tag example:
<mete name="description" content="This is a simple page, which demonstrates the basics of HTML">
The description <meta> tag content attribute contains a description of your web page. This is the data that’s displayed in a search engine result, which tells a prospective visitor what to expect on a website.
Below is a keywords <meta> tag example:
<meta name="keywords" content="HTML, web development, etc">
The keywords <meta> tag contains words or phrases that are relevant to your website. Each new word or phrase assign to a keyword content attribute is separated by a comma, as you can see in the example above.
Below is a viewport <meta> tag example:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The viewport <meta> tag helps to create responsive designs, by making your web page responsive to different device types.
What Is the <body> Tag?
The <body> tag is the second main section within the <html> root tag. The <body> tag contains every element that’s displayed on a web page.
Elements with a <body> tag are classified as either inline or block elements. If you want to see a full HTML essentials cheat sheet, we've put one together so you can understand everything easier.
What Are Block Elements?
Block elements always start on a new line, and they occupy the entire width of the line that they're on.
Some block elements you’ll use include:
- The heading tags
- The <p> tag
- The <div> tag
- The <ol> tag
- The <ul> tag
- The <li> tag
Block elements are used to divide the text onto the website in a coherent, digestible format.
What Are Heading Tags?
There’re six different types of heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The <h1> tag produces the largest heading, the <h6> produces the smallest heading, and all the other headings falls at a position between the two (depending on its number value).
The heading tags are used on the headings on a web page. The use of a specific heading tag depends on the position of the heading on the webpage. For instance, the <h1> tag is used on the first heading on a web page, and a web page only uses one h1 element (though it might have several h2, h3, and h4 elements).
You can see an example of the <h1> tag in action below:
<h1> Learning the Basics of HTML </h1>
What Is the <p> Tag?
The <p> is another block element that’s used within the body of the web page, and it creates paragraphs. Below is an example of this tag being used:
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum mollitia dignissimos officia,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>
What Is the <div> Tag?
The <div> tag represents a division. It’s used to create containers for groups of other HTML elements for styling or functional purposes.
For example, if you’re working with a grid, you’ll have to put all the grid elements within a container. A <div> tag is what you’ll need to use to create the container.
What Are the <ol> and <ul> Tags?
The <ol> and <ul> tags are used to create lists in HTML. The <ol> tag creates ordered lists, while the the <ul> tag creates unordered lists. However, both tags use the <li> tag, which creates list items.
Using the <ol> Tag
An ordered list uses numbers by default. However, the <ol> tag has a type attribute you can use to explicitly state the element you want to use to order your list. You can order a list with upper or lower case roman numerals, upper or lower case letters, or numbers.
You can see an example below:
<ol type="a">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
The code above creates an ordered list using lower case letters.
Using the <ul> Tag
The <ul> Tag also has a type attribute, which takes one of several values: namely disc, circle, or square. However, the disc is the default indicator of a new list item in an unordered list.
Below is an example of what an unordered list would like in code form:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
What Are Inline Elements?
An inline element doesn’t start on a new line. It starts at the next available position, which may or may not be on a new line, and it only uses as much width as is necessary. Some inline elements you’re most likely to use includes:
- The <span> Tag
- The <a> Tag
- The <img> Tag
- The <label> Tag
- The <button> Tag
We'll discuss each of these in greater depth below.
What Is the <span> Tag?
The <span> tag is used for inline styling purposes. For instance, if you want to change the style of a specific word or phrase within a paragraph, then you can use the <span> tag.
Below is an example of this tag:
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum <span id="important">dignissimos officia</span> ,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>
Using the <span> tag in the example above ensures that the two words within the <span> tag can now have a unique style.
What Is the <a> Tag?
The <a> tag is used to create links on a webpage. The <a> tag allows a developer to link to a different website (external link) or a different web page on the same website (internal link). The <a> tag has two important attributes—href and target.
The href attribute is essential, as it stores the value of the link location. And the target attribute is necessary because it allows a user to open the link in a new tab. Without the target attribute, a link will open in the current tab, and if it’s an external link, it’ll drive traffic away from your website.
See below for an example of the <a> tag in action:
<a href="http://google.com" target="_blank">Click this link to Google</a>
Learning HTML Is Essential for Programmers
Learning HTML is crucial for all programmers and should form the basics of your studies. Fortunately, though, it's also not too complicated.
Having read this guide, you should have everything you need to start formatting websites better.