Learning HTML is quite a daunting task for beginners. However, the basics of HTML language are easier to grasp. Besides, learning HTML is a need for a Webmaster to develop a website.
All website landing pages are written in HTML codes and structured codes using the language. More than 70% of known sites on the internet use HTML.
Moreover, the language is not limited to functionality, it also helps design your website. In the guide below, we have provided a quick overview of the basics of HTML and its applications.
1. What is HTML?
HTML is a markup language, which defines the structure of the web pages on a website. It uses different attributes & tags and tells browsers how text is processed before it is displayed on the website.
HTML lets you specify the document type, title, image, and list. In addition, you can hyperlink a word, italicize the font, and embed an image. In short, HTML is the basic language used for developing a website. Most web developers use CSS and JavaScript to create a responsive and structured website with HTML.
Further reading: How to Code a Website Using HTML and CSS
2. HTML Meaning
The full form of HTML is ‘Hypertext Markup Language’.
- Hypertext means a phrase, a word, or a sentence with a link, which will direct you to the internet. It can direct you to the same page on the site or a different website altogether. It makes browsing easier and fast.
- Markup is a part of the text, which gives information on display. The codes are used in the markup language for the same purpose. It tells a browser’s element characteristics and thus plays an important role.
- Language has a similar concept that includes HTML. It works on a standard set of rules so that you can communicate with the website. Besides this, web browsers can interpret the information to display different items as web developers do.
A few terms surround HTML in the making of documents
- Elements: It consists of opening and closing tags
- Tags: Codes used as markups in the form of brackets words or letters
- Attributes: Added information to set up a deeper preference for different site elements
3. Uses of HTML
HTML is a common language that most web developers use to set up website structure. Apart from codes, the language allows visitors to post comments with HTML formatting. Besides this, it helps customise the text in the email body.
It helps you understand offline HTML documents. You can use it as a format for computer-based help documents that are accessible offline. Basic knowledge of HTML lets you understand the basics of hardware and resolve them quickly.
HTML is used to create different web pages and make them functional for users. With HTML, you can create customised elements on existing pages.
4. The Page Structure of HTML
To have an in-depth understanding of how HTML works, you will need to understand the basic structure of HTML pages. Every web page has three main structural elements – Head, Main Body, and Footer.
4.1 Head: Head is the main part, located on the top of the web page. This part contains your site’s identity. The range of HTML header is set using the <head> and </head>.
There are other elements in the head section:
- Favicon and logo
- Title of the web page <title> and </title>
- Meta tags that include description, keyword, and author
- Styles and scripts for CSS and JavaScript languages
4.2 Main body: The main body has the highest share on the web page. It contains all the essential elements on the site like images, video, text, and others. The HTML tag, which defines the < body >, is placed between the head and footer tags.
4.3 Footer: Footer is located at the bottom of the web page and defined by the <footer> tag. The Footer element contains contact information, legal information, copyright, sitemap, and social media buttons. Like the header section, the footer appears on every page of your website and is positioned at the bottom of the web page.
5. HTML Tags
HTML tags define a range for formatting in paragraphs or text. The opening tag of HTML indicates the start of an element, while the closing tag indicates the end.
The code above indicates the result – I love food and cycling. The word in bold is food, and in italics – it is cycling. You need to know that the format affects only the words in the tags.
5.1 Headings Tags: Every piece of content on your website has the heading as a title. You can improve the structure of your post by using subheadings. The headings in the HTML are set using specific tags h1 and h6.
Here, if the number is higher, the headings are smaller. After you write the opening tag, don’t forget to close the tag with a similar heading to mark an effect. The headings you use will be displayed as follows on your HTML page:
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
Once you confirm the heading you want to use on your page, it will translate into the desired format on your website-landing page:
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
In the above heading, you can see various sizes according to heading tags. In every heading, your browser adds a line before and after the heading. However, the closing tag (at the end) has a different aesthetic compared to other tags.
5.2 Paragraph Tags: Paragraph tags are similar to headings tags, depicted by the letter <p>. Paragraph tags allow you to structure your site content and divide it into different paragraphs, which leads to a seamless reading experience. The paragraph tags add a margin below and after the para. But these tags don’t recognize a line break and show two sentences in the same line.
<p>Your Second Paragraph</p>
<p>Your Third Paragraph</p>
Outside your HTML format, it will help to break the text, as below:
- Your First Paragraph
- Your Second Paragraph
- Your Third Paragraph
5.3 Line Break Tags: Line break tags create a division at which the lines of the text are broken and then continue on the following line. In HTML, there is a vast difference between the line and para. The para is a standard block element that contains the text. Whereas, a line break creates a division within an <p> element.
Line breaks represent an empty element and are not defined by closing or opening tags. It is depicted by <br /> tag, which you can insert into the existing <p> element.
It then breaks up the text and highlights important information on the page. Besides, the single space between the forward slash and character
Example:
Best Regards<br />
Mr. Jonty</p>
Once you apply the above code, it will break up as follows:
Many thanks for your query; we will contact you if we require anything else.
Best Regards
Mr. Jonty
In the above example, you can see the opening and closing tags are unchanged, while line break tags define the layout of text, which is included within.
5.4 Image tags: The image tags play a vital role and define all the empty elements in HTML. They do not feature in the closing tags. Image tags contain the attributes that relate to the URL of the image you embed on the website.
They are designed by <img> tag at the beginning of the element. You can place the tags anywhere on your site, but you will need to include them in existing elements like paras and headings. A typical image tag looks like this:
In addition, you can provide an alternative text for the image as it helps users view the image on your website if the loading time is slow. Besides, if the browser can’t display the image, it will display the alternative attribute. By using the image tag, you can view a different set of attributes:
6. HTML Elements
HTML main elements start with an opening tag and end with a closing tag. Many browsers show intended results even if you do not add tags.
6.1 Nested elements: It lets you insert an element inside an element, but you must close the tags to avoid errors. Most web developers use nesting in HTML, the example of which is:
The tags that you see above are not closed properly. In the above example, since the closing tag <i> is close to the content, it will show a different outcome than the one you have in your mind.
Now, if you combine the elements, it will affect certain parts. Therefore, it’s advisable to nest the tags in a particular order, or else you won’t get results.
6.2 Bold, Italic, and Underlined Text: If you want to highlight a word or a phrase in the existing element, you can do it by making it bold using simple tags within the
element. Using the HTML, you can use:
In the above example, the nested element has a starting and closing tag, as it follows a similar format to those associated with the following paras. You can use it seamlessly with the existing elements. For achieving italic typography, add an existing element, which can be coded:
In the above example, the starting and closing tags are used in the
element. It helps to transform the content within the specified element. Similarly, you can use strike-through in the <p> element. Moreover, you can use nested elements to future define your content.
7. HTML Attributes
A web browser looks for attributes along with elements. An attribute is a character tag that acts as added information. Attributes are like modifiers that add a preference for HTML elements.
Example:
There are four different attributes from the code above, which are:
- SRC: insert the image source
- Height
- Width
- Alt
Attributes give you the freedom to customise different site elements.
7.1 Lang Attribute: Lang attributes declare the language you use for web pages, and you can use it to specify certain elements or if you want to write a para with a different language. Lang attributes can set your website to change the font. It helps search engines to extract information. Moreover, the screen reader will read your content in the correct language.
Read: Different HTML & CSS Font Style for Websites
7.2 Align Attribute: You can add aligned attributes to images, paras, and videos. The values to set the position are – top, left, right, middle and bottom.
The above code will show the image on the right side, as it also works on paras, objects, and divisions.
7.3 Href Attribute: The element is useful in linking content to another article or a site. Moreover, internal linking will help your site rank better in SEO. Using the tag can make your text clickable using the <a href> tag.
You can add the above attributes in absolute URL, relative URL, specified ID, JavaScript, and protocols.
7.4 Colour Attribute: Colour attributes let you change your text colour, use it alongside the paragraph text, and the value can be set along with the name of the colour. Choose the insert the ‘hex code’ instead of a specific colour.
Using the name of the colour as a value is advisable for beginners. If you think the colour isn’t green, and the hex code gives you the freedom to choose the specified shade.
Final Thoughts,
Learning the basic HTML will give you a head start to becoming a successful web developer. Those who are looking to create a website can start with a basic course, as there are many available online. Go ahead and learn HTML without hassles, as it is easier than you think.
Looking for the best web hosting to host your website? Check out this list of the best web hosting providers in India and purchase now!
Leave a Reply