Learning a new language takes time and discipline.
Whether you’re studying Italian ahead of your European getaway or finishing up some Spanish homework, there is a lot that goes into reading, writing, and speaking a language that you don’t use on a regular basis.
The same can be said for learning HTML to code a website. While you don’t need to necessarily learn how to speak HTML to use it, you will need to identify components of HTML, what they mean, and how they will appear on a web page. Learning HTML is also a vital part of website building.
HTML stands for hypertext markup language. It is the standard markup language for web pages that define the structure of the content. These elements are the building blocks of any website.
HTML allows users to create and structure sections, headings, links, paragraphs, and more, on a website using various tags and elements. Almost everything you want to create on a web page can be done using a specific HTML code.
While you may think HTML is tricky, or say “I forgot one symbol and everything got thrown off!”, HTML is very much like learning a new language. But once you get the hang of it, it will seem second nature, and you’ll be creating web pages using HTML in no time. Ready to learn more? Just keep reading.
I’m 100 percent positive you have viewed a website that uses HTML code. How do I know? This article is made up of HTML tags and elements on the backend.
This browser doesn’t display the actual HTML tags but instead uses them to render specific content on the page so that visitors to the web page can view it. Usually, the average website includes several different pages with HTML code, like the homepage, about us page, and contact us page, each with their own unique HTML documents.
The anatomy of an HTML element consists of an opening tag, a closing tag, and the content in between. Think of these elements as building blocks for HTML pages.
These tags are element names that are surrounded by angled brackets, in this case <p>, standing for paragraph.
The first tag is your opening tag, the second is the closing tag. They need to be written the same way, except that the closing tag will have a forward slash before the tag name. The content between these two tags will be displayed in the paragraph format on the website.
Tip: Want to learn how to extract data with your new HTML knowledge? Check out our guide on Web Scraping now! You can also check out this complete guide on website building.
There are many common HTML tags that are used often in the creation of a webpage. Below are some of the frequently used tags used to build a web page from start to finish.
The document type declaration helps browsers to display your web page correctly. It will only appear once, at the very top of the page.
All HTML documents begin with the code that declares the document. This tag looks like this:
<!DOCTYPE html>
This may seem confusing, but basically, just put that at the top of your document and keep building.
As you may have guessed, this tag is written as: <html>.
This element wraps all the content on the entire page, and you may hear it be referred to as the root element. This tag will be below the document tag and will need to be closed out, using </html>, at the end of the web page.
What is the title of the page you’re creating? Whatever it is, will be wrapped in the <title> element and will be towards the top of your tags.
<title>Page Title</title>
The <body> element contains all the content that you want to show the visitors of your web page. This includes text, images, videos, playable audio tracks, and more. It will also need to be closed out, using </body>, at the end of the web page.
This is written as <h1> and it defines a larger heading on the page. You can have more than one heading tag and each element will have a corresponding number.
<h1>This is a heading.</h1>
<h2>This is also a heading.</h2>
The paragraph tag defines which text will be displayed as a paragraph using the element <p>.
<p>This is a paragraph about dogs.</p>
<p>This another paragraph about dogs.</p>
Using the tag <ul> will define what text will be written as either a numbered list <ol> or a bulleted list <li>.
An example of a bulleted list would be:
<ul>
<li>Flour</li>
<li>Sugar</li>
<li>Butter</li>
</ul>
Using this code would make text appear on the web page as:
The language of the document is defined by the “lang” tag. If your page will be displayed in English, the tag would be:
<html lang=”en”>
In this case, the en represents English. Other popular language tags are es for Spanish, fr for French, it for Italian, he for Hebrew, and zh for Chinese.
Need your webpage to be a different language? Check out this list of HTML language codes.
The start of your image element will begin with the <img> tag, but there are other components that need to be included.
There will also be source file (src), alternative text (alt), and width and height tags. If I am using a photo of the Chicago Cubs that is 600 pixels wide and 450 pixels high, the image tag would look like:
<img src=”Chicago_Cubs.jpg” alt=”Chicago-Cubs” style=”width:600px;height:450px”>
There is a specific way to add a link in your text using HTML. To do so, use the element <a>, which is short for anchor.
In this case, let’s say my anchor text is G2 Learning Hub.
<a>G2 Learning Hub</a>
Next, give the <a> element an href attribute with empty quotations:
<a href= “ “G2 Learning Hub</a>
Tip: Href stands for hypertext reference.
Then, fill in the value of this attribute (in between the quotations) with the URL you will link to.
<a href= “https://learn.g2crowd.com/G2”>Learning Hub</a>
If I was creating a basic HTML document that contained all of the elements and tags listed above, it would look like this:
<!DOCTYPE html>
<html>
<html lang=”en”>
<title>Page Title</title>
<body>
<h1>This is your first header</h1>
<p>This is paragraph text that pertains to your first header.</p>
<h2>This is your second header</h2>
<p>This is paragraph text that pertains to your second header.</p>
<ul>
<li>List</li>
<li>List</li>
<li>List</li>
</ul>
<img src=”Image.jpg” alt=”Image-Alt-Text” style=”width:600px;height:450px”>
Click the link <a href= “https://learn.g2crowd.com/G2”>here</a> to be taken to the G2 Learning Hub.
</body>
</html>
Related: Learn more about JavaScript and how you can practice your skills!
There are many benefits to using HTML to create a web page. Some include:
Like all things that have a pro, HTML also has a few cons that you’ll need to consider, too.
Whether you’re an expert or a beginner at building a website, chances are you’ll be using HTML to create various web pages. Even though you might feel hesitant about writing HTML code at first, with time it will feel like second-nature, and you’ll be reading and writing lines of code in your sleep.
Now that you understand HTML, you may be interested in learning CSS and PHP. Or check out these tips for coding websites!
From research studies to product listings, the internet is a treasure trove of informative...
by Devin Pickell
Taking action, whether it’s the first step in learning a new hobby or moving across the...
by Mara Calvello
Practically everyone knows user experience (UX) is an important consideration when creating a...
by Jazmine Betz