How to Learn HTML Language

HTML stands for Hyper Text Markup Language , and is the type of code or language used to create web pages. It can be a bit daunting if you’ve never coded before, but all you need to try it out is a simple text editor and an internet browser. You may even recognize some of the HTML used to change typography on online forums, in customized online profiles, or in wikiHow articles. HTML is a useful tool for anyone using the internet, learning the basics of HTML can take less time than you think.

Table of Contents

Learn HTML Basics

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/2/28/Learn-HTML-Step-1-Version-2.jpg/v4-728px-Learn-HTML-Step-1- Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/2/28/Learn-HTML-Step-1-Version-2.jpg/v4-728px-Learn- HTML-Step-1-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser -output”></div>”}

Open an HTML document. Most text editing programs, including Notepad or Microsoft Word (for Windows) and TextEdit (for Mac), can be used to write HTML documents. Open a new document and use File → Save As in the top menu to save it as “Web Page”, or to change the file extension to “.html” or “.htm” instead of “.doc”, “.rtf”, or any other extension.

You may see a warning that your document will be changed to “plain text” instead of “rich text”, or a formatting and Special images will not be saved appropriately. This is normal, HTML documents do not need to use those options.
There is no difference between .html and .htm files. Both work. ^{[1] X Research Source}

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/3c/Learn-HTML-Step-2-Version-3.jpg/v4-728px-Learn-HTML-Step-2- Version-3.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/3/3c/Learn-HTML-Step-2-Version-3.jpg/v4-728px-Learn- HTML-Step-2-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser -output”></div>”}

View your documents with an internet browser. Save your blank document, then find the document icon on your computer and double-click it to open it. It will open as a blank page in the browser. If not, drag the file’s icon to the URL bar on your browser. As you edit your HTML document in this tutorial, you can constantly check back and see how your site changes.

Note that this does not actually create a web page online. Other people won’t be able to access it, and you don’t need an internet connection to check. Just use a browser to “read” your HTML document as if it were a web page.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/8/83/Learn-HTML-Step-3-Version-3.jpg/v4-728px-Learn-HTML-Step-3- Version-3.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/8/83/Learn-HTML-Step-3-Version-3.jpg/v4-728px-Learn- HTML-Step-3-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser -output”></div>”}

Learn the bookmarks. Markup tags do not appear on a web page like normal text. Instead, they tell the web browser how to display the page and its contents. The “Start tag” contains instructions. For example, it can tell the browser to display text in bpd (bold). You also need an “end tag” to tell the browser where the instructions apply: in this example, all text between the start and end tags will be bold. The end tag is also written inside curly braces, but begins with a slash after the first bracket.

Write the hashtags between the braces: < hashtags put here >
Write the end tags in between the curly braces, but put a slash right after the first bracket: </ end tag put here > )
Continue reading to learn how to write functional markup. At this step, what you need to remember is the basic format in which they are written: < > and </ >
If you use other HTML guidelines, you may see tags also known as “elements” and the text between the start and end tags as “element content.” (component content)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/1/18/Learn-HTML-Step-4-Version-3.jpg/v4-728px-Learn-HTML-Step-4- Version-3.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/1/18/Learn-HTML-Step-4-Version-3.jpg/v4-728px-Learn- HTML-Step-4-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser -output”></div>”}

Write your first <html> tag. Every html document starts with an <html> tag and ends with a </html> tag. It tells the browser that everything between these tags is HTML text. Add these tags to your document:

Write <html> at the top of your document.
Press enter or return several times to create some space, then write </html>
Remember to write everything else in this tutorial in between these two tags.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/53/Learn-HTML-Step-5-Version-3.jpg/v4-728px-Learn-HTML-Step-5- Version-3.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/5/53/Learn-HTML-Step-5-Version-3.jpg/v4-728px-Learn- HTML-Step-5-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser -output”></div>”}

Add a <head> section to your document. In between the <html> and </html> tags, write a start tag <head> and an end tag </head> . Note to create space to write between them. Anything between these head tags by themselves won’t actually show up on the web page. Try the following and see where it shows up:

Between the <head> and </head> tags, write <title> and </title>
Between the <title> and </title> tags, write How to Learn HTML – wikiHow .
Save the document and then open it in a browser (or save the document, and then refresh the browser page that was already open). Do you see what you wrote at the top of your browser, above the address bar?

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/d3/Learn-HTML-Step-6-Version-2.jpg/v4-728px-Learn-HTML-Step-6- Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/d/d3/Learn-HTML-Step-6-Version-2.jpg/v4-728px-Learn- HTML-Step-6-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser -output”></div>”}

Create a <body> section. Everything else in this starter document is in the body, which is what shows up on the web page. After the </head> end tag, but before the </html> tag, write <body> and </body> . For the rest of this tutorial, everything you write will be between these body tags. By now you should have a document that looks like this (ignore the bullets):

<html>
<head>
<title>How to Learn HTML – wikiHow</title>
</head>
<body>
</body>
</html>

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/63/Learn-HTML-Step-7.jpg/v4-728px-Learn-HTML-Step-7.jpg”,” bigUrl”:”https://www.wikihow.com/images/thumb/6/63/Learn-HTML-Step-7.jpg/v4-728px-Learn-HTML-Step-7.jpg”,”smallWidth” :460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Add text in different styles. Now it’s time to write something that you can actually see in your browser! Everything you write inside the body tags will show up in your browser after you save the HTML document and refresh the browser page. However Don’t write anything with < or > symbols, as your browser will try to translate it into an HTML directive instead of normal text. Try writing Hello World! (or whatever you like), and then add these new tags around it to see what happens each time:

<em>Xin chào thế giới!</em> will display as “text in italics:” Hello world!
<strong>Xin chào thế giới!</strong> will display as “bold text:” Hello world!
<s>Xin chào thế giới!</s> will display with a dash: ~~Hello world!~~
<sup>Xin chào thế giới!</sup> will display as text above: ^{Hello world!}
<sub>Xin chào thế giới!</sub> will display as text below: _{Hello world!}
Try the following combinations: What does <em><strong>Xin chào thế giới!</strong></em> look like?

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/9/93/Learn-HTML-Step-8.jpg/v4-728px-Learn-HTML-Step-8.jpg”,” bigUrl”:”https://www.wikihow.com/images/thumb/9/93/Learn-HTML-Step-8.jpg/v4-728px-Learn-HTML-Step-8.jpg”,”smallWidth” :460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Divide your text into paragraphs. If you try to write a few lines of text in your HTML document, you may notice that line breaks don’t show up in the browser. You have to write more code for this operation:

<p>Đây là đoạn văn bản tách biệt.</p>
Câu này được theo sau bởi một ngắt dòng.<br>trước khi câu này bắt đầu.
This is the first card you see without an end tag! These are called “empty tags”.
Create a heading to display the names of the items:
<h1>văn bản đề mục</h1> : largest heading
<h2>văn bản đề mục</h2> (second level headings)
<h3>văn bản đề mục</h3> (heading level 3)
<h4>văn bản đề mục</h4> (heading level #4)
<h5>văn bản đề mục</h5> (smallest heading)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/8/81/Learn-HTML-Step-9.jpg/v4-728px-Learn-HTML-Step-9.jpg”,” bigUrl”:”https://www.wikihow.com/images/thumb/8/81/Learn-HTML-Step-9.jpg/v4-728px-Learn-HTML-Step-9.jpg”,”smallWidth” :460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Learn how to create lists. There are many different ways to write lists on the web. Try the following code styles and see which you like. Note that a pair of tags encloses a list (e.g. the <ul> and </ul> tags for “unordered lists”), while single items in the list are enclosed by a single tag. another pair of tags, such as <li>and</li>.

Use this code to create bulleted lists:
<ul><li>Một mục</li><li>Một mục khác</li><li>Một mục khác</li></ul>
Or use this code to create numbered lists:
<p><li>Mục 1</li><li>Mục 2</li><li>Mục 3</li></p>
Or use this code to create a definition list of terms:
<dl><dt>Cà phê</dt><dd>- Thức uống nóng</dd><dt>Leite</dt><dd>- Thức uống lạnh</dd></dl>

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/2/2e/Learn-HTML-Step-10.jpg/v4-728px-Learn-HTML-Step-10.jpg”,” bigUrl”:”https://www.wikihow.com/images/thumb/2/2e/Learn-HTML-Step-10.jpg/v4-728px-Learn-HTML-Step-10.jpg”,”smallWidth” :460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Beautify your page with line breaks, horizontal lines, and photos. Now it’s time to try adding things other than text to your page. Try the following cards, or click the links for more information. You will need an online photo booking service to get a URL to link to the photo tag:

Add a line in HTML: <br> or <hr>
Add a photo: <img src="URL_ảnh_của_bạn">

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/37/Learn-HTML-Step-11.jpg/v4-728px-Learn-HTML-Step-11.jpg”,” bigUrl”:”https://www.wikihow.com/images/thumb/3/37/Learn-HTML-Step-11.jpg/v4-728px-Learn-HTML-Step-11.jpg”,”smallWidth” :460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Links to other locations on the site. You can also use this code to link to other pages and web pages. But for now, since you don’t have a website yet, we’ll focus on “anchors,” or specific places on the page that you can link to:

Create an anchor with the <a> tag at the location on the page you want to link to. Give it a distinctive and memorable name:
<a name="Lời khuyên">Đây là văn bản bao quanh bằng anchor.</a>
Use <href> to link to those anchors or to another site:
<a href="URL của trang web, hoặc tên của anchor bên trong trang này">Viết đoạn văn bản hoặc hình ảnh được hiển thị như liên kết ở đây.</a>
To link to an anchor on another website, add a # after the URL, followed by the name of the anchor. For example, http://www.wikihow.com/Learn-HTML#Tips will link to the Tips section of this page.

Learn more about Advanced HTML

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/ef/Learn-HTML-Step-12.jpg/v4-728px-Learn-HTML-Step-12.jpg”,” bigUrl”:”https://www.wikihow.com/images/thumb/e/ef/Learn-HTML-Step-12.jpg/v4-728px-Learn-HTML-Step-12.jpg”,”smallWidth” :460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Learn about attributes. Attributes placed inside the tags themselves add variation to the “element content” between the start and end tags. They never stand alone. They are written as name=”value” , where name is the name of the attribute (eg “cpor” – color), and value (value) specifically describes the value of “cpor” (eg ” red” – red).

Actually, you’ve seen the parameters before, if you’ve followed the instructions in the Basic HTML section above. <img> tags use the src attribute, anchors use the name attribute, and links use the href attribute. Have you seen them follow the ___=”___” format?

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/f/f1/Learn-HTML-Step-13.jpg/v4-728px-Learn-HTML-Step-13.jpg”,” bigUrl”:”https://www.wikihow.com/images/thumb/f/f1/Learn-HTML-Step-13.jpg/v4-728px-Learn-HTML-Step-13.jpg”,”smallWidth” :460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Experiment with tables in HTML. Creating tables, requires the use of many different tags. Try fiddling with these tags, or learn more about HTML’s tables.

Start with table tags around the entire table: <table></table>
Row tags surround the content of each row: <tr>
Column headings in the first row: <th>
Cells in the next rows: <td>
Here’s an example of how they work together:
<table><tr><th>Cột 1: Tháng</th><th>Cột 2: Tiền tiết kiệm được</th></tr><tr><td>Tháng Một</td><td>$100</td></tr></table>

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/f/f0/Learn-HTML-Step-14.jpg/v4-728px-Learn-HTML-Step-14.jpg”,” bigUrl”:”https://www.wikihow.com/images/thumb/f/f0/Learn-HTML-Step-14.jpg/v4-728px-Learn-HTML-Step-14.jpg”,”smallWidth” :460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Learn mixed head cards. You learned about the <head> tag, which appears at the beginning of every document. Besides the <title> tag, it can also include the following tag styles:

Meta tags, used to provide metadata (metadata) about a web page. This data can be used by search engines as robots (automatic programs) scour the internet to locate and list web pages. To make your site more visible to search engines, use one or more <meta> start tags (no end tag necessary), each with exactly one attribute name and a content attribute, e.g. <meta name=”description” content=”write a description here”>; or <meta name=”keywords” content=”write a list of keywords, separated by a comma”>
The <link> tags are used to associate other files with the web page. It is often used to link to layers of CSS formatting created with a different type of coding to transform your HTML page by adding color, text alignment, and more.
The <script> tags are used to link web pages to JavaScript files, which are file types that create user interaction and can cause the web page to change as the user interacts with it.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/d6/Learn-HTML-Step-15.jpg/v4-728px-Learn-HTML-Step-15.jpg”,” bigUrl”:”https://www.wikihow.com/images/thumb/d/d6/Learn-HTML-Step-15.jpg/v4-728px-Learn-HTML-Step-15.jpg”,”smallWidth” :460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Try fiddling with HTML found on web pages. A good way to expand your knowledge is to look at the HTML source code of web pages. You can do this by right-clicking on any web page and selecting “View Source”, “View Page Source”, or a similar option, or going to View in the menu at the top of the browser. Try to find out more about what each HTML tag you are unfamiliar with does, or search it online for the answer.

While you can’t edit other people’s web pages, you can copy the HTML you find as your own, and then play around with them to see what the different options do. Note that without the CSS format file the site links to, you may not be able to see all the colors or formatting on the page.

Advice

You might like to find a simple web page on the internet, and play with its code. Try shifting some text, changing the font style, replacing the photo, or whatever you like!
You can get a notebook and write down all the codes, so that if you ever need to remember them, you can just open the notebook and have a look. You can also print this page out as a handy reference.
XML and RSS are becoming more and more common on websites these days. Their code can be difficult to read and understand for an observer, especially when viewed on an HTML source file, but they produce effects specific to those web pages.
When writing code, make sure you write it neatly, so that you and others can understand it. Use <!– Add comment here –> to acknowledge HTML comments, which are not displayed on the web page but only in the code.
Notepad++ is a great, free program that works like a normal notepad program, but you can save and test your code directly in a browser. (It also allows almost any language to code HTML, CSS, python, Javascript, etc.)
The markup tags in HTML themselves are not case sensitive, but using all lowercase (as shown on this page) is recommended for standardization purposes and for compatibility with (written language) XHTML. ^{[2] X Research Source}

Warning

Some cards have been deprecated in recent years and replaced with other options to create the same effects, and even add different effects, if you like.
If you are interested in making your pages valid, go to the W3 site and learn valid HTML! HTML standards change over time, and some tags are replaced by others that may work better on modern browsers.

Things You Need

A text editor, such as Notepad (for Windows), or TextEdit (for Mac)
A notebook (optional)
An HTML editor such as Notepad++ (for Windows) or TextWrangler (for Mac) (optional)

Steps

Learn HTML Basics

Learn more about Advanced HTML

Advice

Warning

Things You Need

Related Posts