What is HTML?
I am sure by now, you have visited countless websites on your laptop or your pc, for sending messages, checking your email, talking to your loved ones, or to watch videos on youtube, to name the few. But have you ever wondered how everything is so organized , how there is always that navigation menu up there, so you can go to your desired page to do something. Well, worry not, because today we are going to see how a website is structured using HTML, what are the common tags used, how that image is displayed and so many things.
1. HTML?
HTML stands for Hypertext Markup language. It is the standard markup language for designing the websites layout to display in the browser. It is the building block for the websites. HTML uses many tags for displaying titles, images, paragraphs, and so on.
2. What is HTML used for?
HTML is used to structure the website layout. Think of a structure as a layout for building house. You have foundation for your building, pillars, roof, etc. Similarly, HTML uses tags to structure the website, in such a way that it knows where to display heading for the paragraph, where should that image render, what should that button do, and so on.
3. How do I write HTML?
Writing HTML is not hard. All you have to do is to remember few commonly used HTML tags, such as
- Heading
- Paragraph
- Image
- Button
- Forms
With the help of these tags, you will be able to display a webpage for your viewers.
4. HTML Tags, uses and syntax
1. Heading Tags
Heading tags are used to display bold, larger text than the paragraph tag, and they don’t require any special functions.
Syntax :
To write heading tags, all you have to do is to write H and any number, from 1-6. 1 being the largest text of the all and 6 is the smallest sized heading tag, e.g. <h1> My First Heading </h1>, or <h5>My name is XYZ </h5>.
For example :
<h1> Heading no. 1</h1>
<h2> Heading no. 2</h2>
.
.
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>2. Paragraph
Paragraph tag is used to write long sentences, as you do in microsoft office’s word or any other word processing software.
Syntax:
The syntax for paragraph tag is very simple. All you have to do is to write p with opening and closing brackets, such as :
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consequat rhoncus dui eget volutpat. </p>3. Image
In order to show images to your website, <img> tag is used. Image tag, requires a ‘src’ tag that corresponds to the source of the image. You just need to supply with the appropriate location of your image, and it will render your image with no problem.
Syntax:
<img src="first_image.jpg" alt="some alternate text, if image is not displayed">As you can see, it’s very easy to display images using <img> tag. It only uses one required parameters, and some other optional parameters, such as an alt tag which will only be rendered if the image is not shown to the user, or if they have some screen reader software turned on. That screen reading software will read the text written in alt tag,
4. Button
Button tag is used to display a button on your webpage. Buttons on webpage, are used in many things, such as to submit the form, or to go to the next page.
5. Form
When you write https://www.facebook.com in your browser and you write your email, and password in the email and password section on the log-in page, you are basically interacting with the form and input tags. Input tags allows you to write your information on the webpage, so that data can be sent over to facebook’s server to do the authorization and log you in, once everything matches up.
4. Basic HTML template
<!doctype html>
<html lang="en">
<head>
<title>A Comprehensive guide to HTML</title>
</head>
<body>
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>
<img src="my-image.png">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing estas sed. ed tincidunt diam nec dui tincidunt. </p>
<button type="button">Click Me!</button>
<form>
<label>First name:<br>
<input type="text"><br>
<label><br>
<input type="text"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Above code uses HTML tags, such as Heading Tags (h1 to h6), Paragraph Tag ( p ) and image tag ( img ).
Tags Explanation :
- <!doctype html>
All the HTML web pages, start with a <!DOCTYPE html> declaration. It is not an HTML tag. It just conveys the document type to the browsers.
- <html>
After the <!DOCTYPE> declaration, you need to specify <html> to mark the start of the html page. Like many other HTML tags, you will need to have the corresponding ending HTML tags, such as <html></html>.
- Head
Head tag is used to store information such as, title, links to external libraries used.
- Title
Title tag is used to display text that is displayed on the webpage’s tab on the browser.
- Body
Unlike head tag, body tag contains information that displays information on the webpage, such as heading tag, image tags, paragraph tags and so on.
- Button
Button tag renders a clickable button on your website.
- Form
Form tag wraps up your input fields, to write your information, such as, your name, email, message, etc. It can also have button to submit forms or to clear the form.
- <br>
<br> tag inserts a single line break in the HTML document.
5. Where can I write HTML code?
You can write HTML code in notepad or you can use a dedicated code editor, such as Visual Studio Code, which is free, and opensource.
6. How do I run an HTML file?
It’s very easy to write an HTML file. All you need to do is to copy the code from the above code section of the html, put it in a new notepad file, and save it as your-file-name.html. Close the file, and open the html file you just created. It will open up in a web browser.
7. Conclusion
This was a very basic HTML starter guide for beginners. Yes, there are many others tags that you can use to design a webpage, but you don’t need to worry about that now. Using these HTML tags, you can create a basic webpage, and show to your friends and family.
2 thoughts on “What is HTML?”