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.
What is HTML?
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.
What is HTML?
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.
Want to learn more about Web Developers ? Explore Web Developers products.
How does HTML work?
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.
HTML elements
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.
Common HTML tags
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.
Document type
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.
HTML tag
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.
Title tag
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>
Body tag
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.
Heading tag
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>
Paragraph tag
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>
Lists
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:
- Flour
- Sugar
- Butter
Language tag
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.
Images
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”>
Links
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>
HTML dictionary
- <!DOCTYPE html> Document Type
- <html> HTML tag
- <title> Title tag
- <body> Body tag
- <H1> Heading tag
- <p> Paragraph tag
- <ul> List tag
- <html lang="en"> English language tag
- <img> Image tag
- <a> Anchor link tag
Basic HTML document
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!
HTML pros
There are many benefits to using HTML to create a web page. Some include:
- Widely used language of code with a huge community that uses it
- Runs on every web browser
- Uses a clean and consistent markup
- Completely free and open sourced
HTML cons
Like all things that have a pro, HTML also has a few cons that you’ll need to consider, too.
- Mainly used for static web pages
- All web pages need to be created separately, even if they use the same elements and tags
- If you’re using an older browser, it may not render newly developed tags
Roll up your sleeves and get coding
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!
Mara Calvello
Mara Calvello is a Content and Communications Manager at G2. She received her Bachelor of Arts degree from Elmhurst College (now Elmhurst University). Mara writes customer marketing content, while also focusing on social media and communications for G2. She previously wrote content to support our G2 Tea newsletter, as well as categories on artificial intelligence, natural language understanding (NLU), AI code generation, synthetic data, and more. In her spare time, she's out exploring with her rescue dog Zeke or enjoying a good book.
