HTML is an acronym for Hypertext Markup Language. It is a markup language that helps in designing websites or webpages. In the world of web development, HTML is the most basic computer language. Almost every beginner starts his/her career in web development by learning this markup language.
Before HTML, there was Standard Generalized Markup Language (SGML). HTML is just an improved version of SGML. A scientist, Tim Berneses, introduced HTML in 1990. The only purpose of HTML was to make it easier for scientists to share research documents among themselves. The computer language developed gradually and is now the most commonly used language in the world.
More about What is HTML
HTML is used almost everywhere. It is the beginning of Web Development. So there is more to HTML than you think.
An HTML code consists of tags, elements, and attributes. Let’s learn about them individually.
What is a tag?
A tag helps in the formatting of a website. It is a word enclosed between angular brackets. For example, <body>, <a>, <title>, </head> </p>,etc. An HTML document starts with <html> and ends with a </html> tag. There are two types of tags:
● Container Tags: These tags will have both an opening and closing. A tag can be closed using a forward slash (/). For example, you can open a body tag using <body> and close it using </body>.
● Empty Tags: These tags do not have an end tag. For example, a break tag, <br>, provides a break between lines. This tag does not need closing.
These tags command the browser to perform a function.
What is an Element?
Every container tag contains some content between its start and end tags. This content is known as an element.
<p> Basics of HTML </p>
Here, <p> and </p> are container tags, and “Basics of HTML” is an element.
What is an Attribute?
Anything that contributes to the modification of an element is known as an attribute. Attributes have a name and value. An opening tag will contain these names and values. Every attribute will have a name, and each name will have some value.
For example, ‘src’ is an attribute of the image tag, <img>. The presentation of this attribute will be as follows: <img src = ‘‘attribute.jpg’’>. Here, <img> is the tag, src is the name, and “attribute” is the value.
Basic tags of HTML
HTML has around 100 tags that help in the formation of a website. Following are some of the basic ones that everyone should be aware of:
● <Html>: An HTML document must contain an <html> tag. Duh! It should start with <html> and end with </html>.
● <Head>: A <head> tag defines the headers of a document. It contains the metadata of the web page or any other information related to it.
● <Title>: This tag contains the name of your web page. It comes under the <head> tag because it is header information. It is used to give a name to your web page. The webpage will not display it.
● <Body>: This tag contains all of your main content. Everything that a body tag includes will be visible to the visitors of the webpage. The <Body> tag has attributes like background, bgcolor, link, etc.
● <h1> to <h6>: These tags helps you provide headings to your webpage. There are 6 types of heading tags. <h1>, <h2>,<h3>, <h4>, <h5>, and <h6>, where h1 has the highest font size and h6 has the lowest.
● <A>: A stands for the anchor tag. This tag helps in adding a link to your webpage. The link will either take you to another webpage or a website. It has a unique attribute, href. It stands for hypertext reference. So you can present an anchor tag in the following way: <a href = “address”> </a>
● <P>: When a user wants to write a paragraph, he/she can use the <p> tag. It may contain the <br>, which helps to add a line break between lines.
● <Img>: To insert an image on a webpage, <img> tag is used. As mentioned above, src is an attribute of this tag. You can also align your image by using the align attribute.
● <Hr>: <hr> tag can help you divide your page into sections with a horizontal line. It is an empty tag, which means there is no need to close this tag.
Structure of an HTML document
A standard HTML document looks like this:
<title> MY TITLE </title>
<h1> My heading </h1>
<p> My paragraph</p>
<img src = HTML.jpg>
The structure is divided into two sections, the head and the body. Your webpage will not display the head section of the document. It only shows the lower portion because it contains the body tag. The body tag contains all the content which will be visible to the visitors.You can try it yourself. Just open notepad on your computer or laptop and start typing.
Formatting elements in HTML
A webpage that does not feature any graphics or images needs a conspicuous style for its text. In HTML, some tags help you format your text to make it presentable.
- <Font> tag: The <font> tag lets you change the font of your text. Some attributes of this tag are the face, size, color, etc. The face attribute enables you to set the name of the new font. Size helps in increasing and decreasing the text size on the scale -7 to +7. The color attribute will help you select the appropriate shade for your text.
- < Center> tag: This tag aligns your text in the middle of a webpage. The center tag is more convenient than the align attribute. Using the align attribute will become tiring when you are writing long paragraphs. Open a Center tag instead and then close it at the end of your paragraph.
- <P>: Almost every webpage contains paragraphs. These paragraphs may describe your product, website, feature, or any other relevant information. To include them, you can use the <P> tag.
- <B>, <I>, and <U>: <B> is to make your text bold, <I> for italics, and <U> to underline. These tags can help you highlight the important text in your document.
- Heading tags: As mentioned earlier, these tags will display the headings of your webpage. Here, <h1> shows the largest size of the font. The size will decrease with an increase in the number of a heading tag, going up to <h6>.
Features of HTML
Apart from the most commonly used language, HTML has various features. These features will surely help you differentiate HTML from other computer languages. The following are the characteristics of HTML:
- Straightforward: HTML is the most simple computer language a person can learn. You can understand the basics of the HTML in a week or two. The fanciest of web pages are designed with simple HTML coding.
- Supports every browser: Any browser in the world can run an HTML document. This is one of the best features of HTML. An HTML document can support whichever browser you have on your computer or laptop.
- Free of cost: No need to buy any software or buy a better computer. You can use HTML for free. All you need is a web browser and notepad. HTML only needs these two things, which are available on every computer.
- Graphics: You can add images, videos, and even audios on your web page using HTML coding. Just enter the appropriate tags at the right place, and it will display the file on your web page. This helps you create eye-catching webpages.
- Case sensitive: HTML is a case sensitive language. It means you can write your tags in any form. <HEAD>, <Head>, or <head>, all three are correct. It makes your job easy as you don’t have to worry about capital or lowercase letters.
Advanced HTML tags
Now that you know about the basic HTML tags and elements let’s raise the level with some advanced HTML tags. These tags make your website look more professional and less tacky.
- <Table> tag: As the name suggests, this tag lets you create tables on your webpage. It contains other tags required for making a table. <tr> defines a row of the table, <th> makes the table header, and <td> defines a cell. For a table with two columns and two rows, the HTML code will be:
<Td> and <Tr> have their attributes, colspan, and rowspan, respectively. Col span states the number of columns a cell should span, and rowspan, the number of rows.
- <Form> tag: When you want to create a form on your web page, use this tag. This tag is used for survey websites, sign up, or registration on a website. <option>, <select>, <button>, <textarea>, etc are some elements of form tag. These elements help you add drop boxes, checkboxes, radio buttons, and many other features to your form.
- <Frameset> tag: A <frameset> tag divides a window into frame. It includes <frame> tag as an element enclosed within its start and end tags. A-frame tag is an empty tag that contains an src attribute. Frameset contains cols and rows attributes for column and row size, respectively.
- <Meta> tag: <meta> tag helps you present information about a document. This tag is used when you want to add some general information like keywords, author name, etc., about the HTML document. It is an element of the head tag. So it does not affect your webpage.
- List tags: A list tag allows the user in the classification of related items in a list. There are three types of lists namely, ordered list <ol>, unordered list <ul>, and description list <dl>. List tag <li> is used while making these types of lists. If you want a numbered list, use <ol>, <ul> for bulleted list, and <dl> for a list of items with their description.
These were just a handful. There are more than a hundred tags in HTML. But they are enough to get you started with HTML.
Python, Java, C++, etc., are the most popular programming languages. They are used at an advanced level by web developers. But HTML has several advantages that make it better than any other computer language in the world.
- Simple to edit: Your webpage might sometimes have an error or a mistake that needs editing. It is not a difficult task. Just open your HTML document and make changes to the code to rectify the fault. Save the file. Your web page is in perfect health now. You may also want to modify your website. Follow the same steps for that too.
- Free: Programming languages like Java, Python, C++, etc., require different software, which may cost you a couple of bucks. Whereas; HTML is free. You need to have only two tools to perform HTML coding, a text editor, and a web browser available on every platform.
- User friendly: HTML does not require any prior knowledge of the subject. You only need to learn simple English, which is enough to work with this computer language.
- Search Engine Friendly: HTML based websites are more search engine friendly. It means that HTML causes the least complications while creating SEO compliant websites. These websites are easily accessible to search engine crawlers. It will help future visitors as your page will load more quickly. And eventually, your web page will be among the top results when the keyword is triggered.
The above pointers are enough to conclude that HTML is a better programming language than any other. It was all about the basics of HTML. Try them on your PC and ake webpages and websites with tables, forms, and frames.
Learn more :