HTML basics to always remember
When I started learning HTML, I always had trouble remembering some of the basics tags and it’s difficult to memorize each tag but with practice and time, you will become better at using HTML and recalling the basic tags needed.
What exactly is HTML?
HTML is a markup language. It is not a programming language. It describes the structure of the web page and consist of series of elements.
A simple HTML Document structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Every HTML file starts with a <html> tag. Inside the <head> tag, you can put title of the page and links to the CSS, JavaScript and other files dependencies. The <body> tag contains the content of the website.Every HTML file starts with a <html> tag. Inside the <head> tag, you can put title of the page and links to the CSS, JavaScript and other files dependencies. The <body> tag contains the content of the website.
Basic Tags
1. Headings
There are six different types.<h1> to <h6>. <h1> is the largest size and <h6> is the smallest headings size. Make sure to have both the opening and closing tag.
Example:
<h1> Heading</h1>
2. Paragraphs
Simple wrap your text in <p> tags like below:
<p> I am paragraph </p>
3. Images
Image tags don’t have a closing tag and need url of the image.
<img src= “url of the image here” alt= “image title/description”>
4.Links
Inside the opening tag you need to place href and write the link address and between the opening and closing tag, you can write the link text.
<a href=”url">link text!</a>
5.Line break
If you want to add a space between lines, you can use the <br> tag. There is no closing tag for this. Simply just write <br> between the lines you wish to add space between.
Example:
<p>Place a line break underneath this sentence.
<br>
Place a line break above this sentence.</p>
6. Italic and emphasized
To make a text italics, <i> will work, but <em> is more commonly used.
7. Bold and strong
You can use either <strong></strong> tag or <b>, however, strong tag is more commonly used.
8. Underlined
Just wrap the text you want underlined in <u> tags.
<u>this will underline!</u>
9. Ordered lists
The ordered list contains numbers, while the unordered list contains bullet points. The <ol> is the entire “ordered list,” while the <li> is a “list item.”
example:
<ol>
<li>First item</li>
</ol>
10. Unordered lists
This list will contain bullet points.
<ul>
<li>First item</li>
</ul>
11. Horizontal line
If you want to break up sections of a page, you can use a horizontal line. Just use the empty element (no need to close it), <hr>.
12. Highlighted text
If you want to highlight a text, you can wrap the text to be highlighted in <mark> tags </mark> and it will appear highlighted.
13. Deleted (cross-through) text
If you want to display the cross-through effect on your text, just use <del> tags. </del>
These are just the very few tags that I covered and there are many more one should learn. You can start learning more about HTML through other resources like Codeacademy or Udemy. Once you are confident in your HTML skills, you can move on to the next step of styling the page with CSS.
