Looking forward to making your career in the exciting and highly demanded Web Development Industry? You are in the right place!
Welcome back to our web development series, where we provide everything you need to know to become a successful full-stack web developer this year! Today, we are talking about HTML, one of the most integral parts of the web development realm. But before exploring the streets, let’s witness the whole city through aerial shots, starting with the definition.
What is HTML?
HTML (HyperText Markup Language) is the foundation of web development. It provides the basic structure of a webpage using elements and tags. These elements act as building blocks that help organize text, images, links, and other media to create visually appealing and functional websites.
Basic Structure of an HTML Document
Check out the basic structure of an HTML Document:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document Title</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a basic HTML document structure.</p>
</body>
</html>
Explanation:
<!DOCTYPE html>: Declares the document type and version of HTML (HTML5 here).
<html lang=”en”>: Root element of the document, with the language set to English.
<head>: Contains metadata about the document (like character set, title, and viewport settings).
<meta charset=”UTF-8″>: Specifies the character encoding.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: Ensures proper scaling on mobile devices.
<title>: Defines the document’s title, which appears in the browser tab.
<body>: Contains the visible content of the webpage.
<h1>: Represents the main heading.
<p>: Represents a paragraph of text.
HTML Tags & Elements
What is a Tag?
An HTML tag is a keyword enclosed in angle brackets (<>) that defines how content should appear or behave on a webpage.
Tags usually come in pairs: an opening tag <tagname> and a closing tag </tagname>.
What is an Element?
In web development, an element is considered a building block of an HTML document. It represents content or a structure on a webpage. Each element is defined through tags, which are mostly made of an opening tag, content, and a closing tag.
HTML Tags
Headings
Headings are used to define different levels of headings on a webpage. With heading tags, we can define texts on different levels, like titles or main topics. Headings are written from <h1> to <h6>, where <h1> is the most important and <h6> is the least important.
Paragraphs and Preformatted Text
Paragraphs (<p> tag)
The <p> tag is used to define paragraphs in HTML. It automatically adds space before and after the text, making it easier to read.
Preformatted Text (<pre> tag)
The <pre> tag is used to display text exactly as it is written in the HTML file, including spaces and line breaks. This is useful for displaying code or formatted text.
Horizontal Rule & Line Breaks
The <br> tag adds a line break, and the <hr> tag adds a horizontal divider.
Text Formatting (Bold, Italic)
The <b> tag makes text bold, and the <i> tag makes it italic.
Lists
Marquee (Scrolling Text)
The <marquee> tag is used to create scrolling text, though it is outdated.
Image
The <img> tag is used to embed images.
Audio
The <audio> tag is used to add sound to a webpage.
Video
The <video> tag is used to embed videos.
iframe (Embedding Webpages)
The <iframe> tag is used to embed external web pages.
Forms
The <form> tag is used to collect user input. It contains various input fields, buttons, and other interactive elements.
Links (Anchor Tags)
The <a> tag is used to create hyperlinks, allowing users to navigate between web pages or external resources.
Forms: GET and POST Methods
Forms allow users to input data, which can be submitted using different HTTP methods:
- GET Method: Sends data as part of the URL.
- POST Method: Sends data in the request body, making it more secure.
Semantic vs Non-Semantic Tags
Semantic tags like <header>, <footer>, and <article> give meaning to web content and improve SEO.
Non-Semantic Tags like <div>, <span> do not convey meaning by themselves, and all they provide is structure.
Buttons
Buttons allow user interaction on the webpage, like submitting a form or calling some action like moving to another page.
Tables
Tables organize data into rows and columns, keeping it in a systematic form.
HTML Comments
Comments are written in HTML code, and the browser doesn’t show them as they are more like notes or instructions for the developers.
Conclusion
That’s a wrap for this part! In this write-up, we discussed HTML basics, structures, tags, and elements. We hope you have a good understanding of the HTML role in web development. If you still have any doubts, we would recommend you check out our Full Stack Development class playlist.
About The Author
