HTML Basic

This chapter we will learn the basics of HTML and how to structure content on a web page using HTML tags and attributes.

HTML Documents

An HTML document is a file that contains HTML code and is used to create web pages. It typically includes the structure, content, and formatting of a web page, and can be viewed in a web browser.

Example
Try yourself 
        
            
<!DOCTYPE html> 
<html lang="en">
   <head>
      <title>My First Web Page</title>
   </head>
   <body>
      <h1>Heading1</h1>
      <p>Paragraph.</p>
   </body>
</html>
  • <!DOCTYPE html> Specifies the document type and version as HTML5.
  • <html lang=“en“> Defines the root element of an HTML document and sets the language of the document to English. End tag </html>
  • <head> Contains metadata about the document, such as the page title. End tag </head>
  • <title> Defines the title of the document, which appears in the browser tab. End tag </title>
  • <body> Contains the visible content of the document. End tag </body>
  • <h1> Defines a top-level heading. End tag </h1>
  • <p> Defines a paragraph of text. End tag </p>

The !DOCTYPE Declaration

  • Specifies the document type and version, including HTML5.
  • Ensures that the web browser renders the HTML code correctly and consistently.
  • Tells the web browser how to interpret the HTML code and handle any errors.
  • Must be the very first line in an HTML document, before the <html> tag.
  • Required for all HTML documents to comply with web standards.

HTML Headings

HTML headings are denoted by the <h1> to <h6> tags, with <h1> being the most important and <h6> being the least important. Headings help to make content more readable and organized by providing a clear structure to the page.

Example
Try yourself 
        
            
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>My Heading-Only Web Page</title>
   </head>
   <body>
      <h1>Main Heading</h1>
      <h2>Subheading 1</h2>
      <h3>Sub-subheading 1.1</h3>
      <h4>Sub-sub-subheading 1.2</h4>
      <h5>Sub-sub-subheading 1.3</h5>
      <h6>Sub-subheading 1.4</h6>
   </body>
</html>

HTML Paragraphs

HTML paragraphs are created with the <p> tag and are used to group together one or more sentences or blocks of text.

Example
Try yourself 
        
            
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>My Paragraph Example</title>
   </head>
   <body>
      <p>This is an example paragraph.</p>
      <p>Here is another paragraph.</p>
   </body>
</html>

HTML Links

HTML links are created with the <a> tag to connect web pages or resources. They allow navigation between pages and access to external content. The </a> closing tag is required!

Example
Try yourself 
        
            
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Lets coding links</title>
   </head>
   <body>
      <a href="https://www.lets-coding.com">Visit Example</a>
   </body>
</html>

HTML Images

HTML images are inserted with the <img /> tag to display visual content. They require the src attribute to specify the image source and can include optional attributes for customization.

  • The alt attribute provides alternative text that is displayed if the image cannot be loaded.
  • The width and height attributes set the desired dimensions of the image in pixels
Example
Try yourself 
        
            
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Lets coding</title>
   </head>
   <body>
      <img src="/images/common/cutecat.png" alt="Description of the image" width="300" height="200">
   </body>
</html>