Structure

HTML Structure

We're going to start building our very first website. At first our website is going be pretty ugly but it's still going to be functional! We're going to be using the language HTML, or hypertext markup language. This isn't a programming language since it doesn't actually do anything. It's like how English isn't a programming language either: you can't "run" English. Same idea with HTML: you can't "run" HTML. HTML is simply the language and pictures on the page. It's the static (which is another word for unchanging) content.

Here's an example to HTML code:

<!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>
    <h1>Hello World</h1>
  </body>
</html>

If we notice, there are different levels of indentation between each element! <html> and <!DOCTYPE> are at different levels, indicating the structure of the document.

  • <!DOCTYPE html>: This declaration defines the document type and version of HTML. It helps the browser understand how to properly render the page. Make sure to include this at the very top of your HTML file to ensure proper rendering.

  • <html lang="en">: This element wraps all the content of the web page. The lang attribute specifies the language of the document, which helps with search engine optimization and accessibility.

  • <head>: This section contains meta-information about the HTML document, such as the character set, viewport settings, and title. For example:

  • <meta charset="UTF-8">: Specifies the character encoding for the document, which is essential for displaying text correctly.

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive and displays well on different devices by setting the viewport width to the device's width.

  • <title>: Sets the title of the web page that appears in the browser tab.

  • <body>: This section contains the actual content of the page that users see. In the example, we have:

  • <h1>Hello World</h1>: An <h1> element, which is a heading level 1. It is typically used for the main heading on the page and is the largest text size for headings.

Indentation helps to visually represent the structure of your HTML document, making it easier to read and maintain. Each nested element is indented to show its relationship with other elements. For example, <head> and <body> are children of <html>, so they are indented beneath it.

As we continue to build our website, we will add more elements and attributes to structure and style our content. Remember, HTML is the foundation, but for styling and functionality, we’ll use CSS (Cascading Style Sheets) and JavaScript.