While modern websites are usually built with a user-friendly interface in mind, it’s good to know some basic HTML code. If you know the following 17 HTML tags, you should be able to create a basic website or edit the HTML code generated by applications like WordPress. I’ve provided HTML code examples with results for most of the tags, so it’s easy to understand even if you’re new to HTML coding.
Join the channel Telegram of the AnonyViet 👉 Link 👈 |
17 Simple HTML Codes You Can Learn in 10 Minutes
First, you should install software to write code, I recommend using Sublime Text make it beautiful. Now start typing the first characters to learn HTML code. I usually study at w3schoolbut you should know these 17 examples of HTML code before learning, it will be easier to absorb
1.
You will need this tag at the top of each HTML file. This tag ensures that the browser will use HTML5, the latest version of HTML.
While this isn’t really an HTML tag, it’s still a much-needed tag.
2.
This is a tag that tells the browser that it is reading HTML. This tag is directly below the DOCTYPE tag and you close it with a tag at the end of the file. Everything else in your HTML file falls between this tag.
3.
The
tag begins the header of the HTML file. The content here does not appear on your site. Instead, it contains data for search engines and information for your browser.For basic pages, the
tag will contain the title of the web page. But there are also some other things that you can include using in this tag.4.
The
<head> <title>My Website</title> </head>
This is the title displayed as the tab title in the browser.
5.
Like the title tag, is included in the header area of the file header. is mainly used by search engines and is information about what’s on your page. There are several different meta fields, but here are some of the most commonly used:
- description: A basic description of your page.
- keywords: A selection of keywords that apply to your page.
- author: Author of the page.
- viewport: This tag ensures that your page renders well on all devices.
Here’s an example of the tag:
<meta name="description" content="A basic HTML tutorial"> <meta name="keywords" content="HTML,code,tags"> <meta name="author" content="MUO"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
The “viewport” tag should always have “width = device-width, initial-scale = 1.0” to ensure your page renders well on mobile and desktop devices.
6.
After closing the header tag, you will come to the body tag. You tag
All content in your site will be between this tag:
<body> Everything you want displayed on your page. </body>
7.
To make it easier to imagine the
,
,
… tags are like the table of contents.
… tags are like the table of contents.
The
tag defines the first-level heading on your page. This will usually be the title, and should only have 1
tag per web page.
defines a second-level heading such as a section heading,
is a third-level subheading, etc. For example, the names of the tags in this article are third-level headings.
<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>
<h1>Big and Important Header</h1> <h2>Slightly Less Big Header</h2> <h3>Sub-Header</h3>
Result:
As you can see, they get smaller with each level.
8.
The
tag starts a new paragraph. This tag will create 2 line breaks between the paragraph above and below.
<p>Your first paragraph.</p> <p>Your second paragraph.</p>
Result:
Your first paragraph.
Your second paragraph.
You can also use CSS in the
tag, like below, to resize the text:
<p style="font-size: 150%;">This is 50% larger text.</p>
9.
The
tag inserts a line break. When there is a
tag, the following paragraph will automatically return to the line.
<p>The first line.<br> The second line (close to the first one).</p>
Result:
Similar to the
tag. This tag is often used to separate paragraphs of text.
10.
This tag bolds important text. You can also use CSS to customize the text.
<strong>Very important things you want to say.</strong>
Result:
Very important things you want to say.
If you’re used to the tag for bolding text, you can still use it.
11.
The tag defines the text to be emphasized, and italicizes them.
<em>An emphasized line.</em>
Result:
An emphasis line.
The tag still works like the tag, but it’s possible that the tag will be deprecated in future versions of HTML.
12.
The tag allows you to create links. A simple link looks like this:
<a href="https://www.anonyviet.com/">Go to Anonyviet</a>
Result:
Go to Anonyviet
The “href” attribute specifies the destination of the link. In many cases, this will be another website. It can also be a file, like an image or a PDF.
Other attributes include “target” and “title”. The target attribute is almost exclusively used to open links in a new tab or window:
<a href="https://www.anonyviet.com/" target="_blank">Go to Website in a new tab</a>
Result:
The “title” attribute creates the tooltip. Hover over the link below to see how it works:
<a href="https://www.anonyviet.com/" title="This is a tool tip">Hover over this to see the tool tip</a>
Result:
13. ![]()
If you want to insert an image into your page, you’ll need to use the tag. Normally, you would use it in conjunction with the “src” attribute. The “src” attribute specifies the source of the image:
<img src="https://anonyviet.com/17-vi-du-ve-code-html-don-gian-ma-ban-co-the-hoc-trong-10-phut/wp-content/uploads/2019/04/sunlit-birds.jpg">
Result:
Other properties such as “height,” “width,” and “alt”:
<img src="https://anonyviet.com/17-vi-du-ve-code-html-don-gian-ma-ban-co-the-hoc-trong-10-phut/wp-content/uploads/2019/04/sunlit-birds.jpg" alt="the name of your image">
The “height” and “width” properties set the height and width of the image. In general, you should only use 1 of these 2 properties for the image to display to the correct scale.
The “alt” tag tells the browser what text to display if the image cannot be displayed. If someone has a slow connection or an old browser, they will still see the text in the “alt” attribute when the image fails to load.
14.
The
- tag allows you to create a numbered ordered list. Each list item needs a
- tag:
<ol> <li>First thing</li> <li>Second thing</li> <li>Third thing</li> </ol>
Result:
- First thing
- Second thing
- Third thing
In HTML5, you can use
- to reverse the numbering order. And you can set start value with start attribute.
- First item
- Second item
- Third item
The “type” attribute tells the browser what type of symbol to use for the items in the list. It can be set to “1,” “A,” “a,” “I” or “i”, setting the specified symbol of the list as follows:
<ol type="A">
15.
Lists are unordered and much simpler than the
- tag. It is simply a bulleted list.
<ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>
Result:
The
- tag also has a “type” attribute and you can set it to “disc”, “circle” or “square”.
16.
While using tables for formatting can be challenging, there are times when you’ll need to use rows and columns to segment the information on your page. Eg:
<table> <tbody> <tr> <th>1st column</th> <th>2nd column</th> </tr> <tr> <td>Row 1, column 1</td> <td>Row 1, column 2</td> </tr> <td>Row 2, column 1</td> <td>Row 2, column 2</td> </tbody> </table>
The
and
tags specify the beginning and the end of the table. The
tag contains all the contents of the table.The
tag defines a row in a table. and the tag defines the header (first line) of the table. The tag defines a table cell. Result:
1st column 2nd column Row 1, column 1 Row 1, column 2 Row 2, column 1 Row 2, column 2 17.
When you are quoting a quote from a website or someone else and you want to highlight the quote, use the
tag. All you need to do is write the quote in the
tag.
<blockquote>Đoạn trích dẫn này được viết bởi AnonyViet</blockquote>
Result:
This quote was written by AnonyViet
And here are 17 simple HTML code examples that you can learn in 10 minutes. Any other basic cards, please comment below. In addition, you can also read this article to know how create github site in 15 minutes.
Leave a Reply