Skip to main content

HTML Basics

WHAT IS HTML​

HTML, which stands for Hypertext Markup Language, is the standard markup language used for creating web pages and applications. It provides the structure and content of a webpage, defining the elements and their arrangement.

Here are the key points to understand about HTML for beginners:

  1. Structure: HTML uses a set of tags to define the structure of a webpage. Tags are enclosed in angle brackets (< >), and most tags have an opening tag and a closing tag. The content of a webpage is placed between the opening and closing tags of different elements.

  2. Elements: HTML consists of various elements that define different parts of a webpage. example:

    • <html>: The root element that wraps the entire HTML document.
    • <head>: Contains meta-information about the webpage, such as the title, CSS stylesheets, and scripts.
    • <body>: Contains the visible content of the webpage, such as headings, paragraphs, images, links, and other elements.

  3. Attributes: HTML elements can have attributes that provide additional information or modify their behavior. Attributes are specified within the opening tag of an element. For example, the src attribute of an <img> tag specifies the source (URL or file path) of the image to be displayed.

  4. Nesting: HTML elements can be nested inside one another. This means you can place one element inside another to create a hierarchical structure. For example, you can place a <p> element inside a <div> element to group paragraphs together.

  5. Semantic HTML: Semantic HTML refers to using HTML elements that carry meaning and describe the content they enclose. For instance, using <header> to define the header section of a webpage, <nav> for navigation links, <article> for a self-contained article, and so on. Semantic HTML improves accessibility, search engine optimization, and the overall structure of the webpage.

  6. Web Browser Rendering: Web browsers interpret the HTML code and render it as a visual webpage. They read the HTML tags, apply styling, and display the content accordingly. CSS (Cascading Style Sheets) is commonly used to define the visual appearance of HTML elements.

  7. Learning Resources: Numerous online tutorials, documentation, and interactive websites are available to learn HTML. These resources provide step-by-step guidance, examples, and exercises to help beginners understand and practice HTML coding.

Remember that HTML is the foundation of web development, and it works in conjunction with CSS and JavaScript to create fully functional and visually appealing web pages. With HTML, you can create the basic structure and content of a webpage, while CSS helps with styling, and JavaScript adds interactivity.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  • Line 1: This line declares the document type as HTML using the <!DOCTYPE html> declaration. It informs web browsers that the following code is written in HTML5.
  • Line 2: The <html> tag represents the root element of an HTML page. It encapsulates the entire HTML structure.
  • Lines 3-7: These lines define the <head> section of the HTML document. The <head> section contains meta information, such as the character encoding (<meta charset="UTF-8">), which specifies the character encoding for the document. Additionally, it includes the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag, which configures the viewport settings for responsive web design. Lastly, the <title> tag (<title>Document</title>) specifies the title of the document, which is displayed in the browser's title bar or tab.
  • Lines 8-10: These lines represent the <body> section of the HTML document. The <body> tag encapsulates the main content of the web page, such as text, images, links, and other HTML elements. This is where the visible content of the webpage is placed.
  • Line 11: The closing </html> tag marks the end of the HTML document. It ensures that the HTML document is properly closed.

Essential HTML tags​

Let's start with some essential HTML tags:

  1. <!DOCTYPE html>: This tag declares the document type and should be placed at the beginning of an HTML document.

  2. <html>: The <html> tag serves as the root element of an HTML document.

  3. <head>: The <head> tag contains metadata about the HTML document, such as the title, character encoding, and linked stylesheets or scripts.

  4. <title>: The <title> tag defines the title of the HTML document, which is displayed in the browser's title bar or tab.

  5. <body>: The <body> tag encloses the visible content of the HTML document, including text, images, links, and other elements.

  6. <h1> to <h6>: These tags create headings of different levels, with <h1> being the highest (most important) and <h6> being the lowest.

  7. <p>: The <p> tag defines a paragraph of text.

  8. <a>: The <a> tag creates a hyperlink. It is used with the href attribute to specify the target URL.

  9. <img>: The <img> tag embeds an image in the HTML document. It requires the src attribute to specify the image source (URL or file path).

  10. <ul> and <li>: These tags are used to create an unordered list. The <ul> tag defines the list container, and the <li> tags define the individual list items.

  11. <ol> and <li>: These tags are used to create an ordered (numbered) list. The <ol> tag defines the list container, and the <li> tags define the individual list items.

  12. <div>: The <div> tag is a generic container that groups elements together. It is often used for layout purposes and applying CSS styles.

  13. <input>: The <input> tag is used for creating input fields in forms. It can be used for various types of input, such as text, email, password, etc. The type attribute is used to specify the type of input.

  14. <button>: The <button> tag creates a clickable button. It can be used to trigger an action or submit a form.

  15. <form>: The <form> tag defines a form container that holds various input elements. It is used to collect user input and submit it to a server.

  16. <textarea>: The <textarea> tag creates a multiline text input field. It is used for capturing larger amounts of text from the user.

  17. <select> and <option>: These tags are used to create dropdown menus. The <select> tag defines the dropdown container, and the <option> tags define the individual options within the menu.