Intro to HTML

HTML (Hypertext Markup Language) is a coding language for Front-End Web Development that can be used to create websites, forms, and other types of web pages. There are many components to HTML that are pivotal to create an amazing webpage.

Side Note: For the Intro to Web Design pages, we recommend that you read each in this order:

Intro to HTML
Intro to CSS
Intro to JS

Similar to a series!

Elements

Elements are the core part of HTML that are used to create the content of your webpage. Most elements begin with a opening tag < > and a closing tag </ >. There are some exceptions, which you should be careful of. In most cases, they will have a < > or < /> tag. These tags are important to be able to wrap the text you want to put on your webpage.

There are many important elements that are responsible for creating your webpage. For now, let's look at some of the most common elements for the <body></body> of the page:

The <h1></h1> element is used to create the largest text on your webpage (the heading), such as a title at the top. There are 6 different variations, from <h1></h1> down to <h6></h6>. <h1></h1> and <h2></h2> are the most common.
The <p></p> element is used to create normal text and paragraphs for your webpage. Think of it as the "body text" that you would normally use to write out your content and information.
The <img> element is used to implement images into your webpage by making its src attribute equal to the image address.

💡

Learn about what Attributes are by scrolling after the "A Fresh Start" section.

The <ul></ul> element is an "unordered list" element that you nest your list <li></li> elements in to create a bulleted list.
The <ol></ol> element is an "ordered list" element that you nest your list <li></li> elements in to create a numbered list.
The <li></li> element is a "list" element, creating a list of your content in different ways depending on the element it is nested in.
The <a></a> element is used within other elements around specific text, which links it to another part of your web page or other site.
The <footer></footer> element creates a footer at the bottom of your webpage to add any additional useful information.

Commenting in HTML

Commenting in HTML is useful for programmers to leave notes in their code so they can remind themselves of important information later. Comments begin with a  tag. Here is an example of a comment below:

<p>Coding is fun.</p>
<!-- Next, say which parts of coding are your favorite! -->

A Fresh Start

Before writing the content of your webpage, there is a "skeleton" that you need to create in order for your code to function.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="style.css" rel="stylesheet"/>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

The <DOCTYPE html> declaration defines the document to be in the HTML language.
The <html></html> element is the element that contains all of the code for your page, excluding the declaration stated above ^^.
The <head></head> element contains important information about the webpage such as the title that is displayed on its open tab, encoding information, and scaling to fit different devices' widths and lengths.
The <meta> element is used to store scaling and encoding info, which is important for your webpage.
The <title></title> element is where you put the title of your webpage to be displayed on its tab bar when opened.
The <link/> element is used to link your HTML file to your CSS (Cascading Style Sheets) file, which will be used to add some design and styling to your page. There is more than one way to input CSS into your HTML content, which we will get to later in the Intro to CSS page.
The <body></body> element is where you will write the content code for your webpage.
The <main></main> element is where the code for the main part of your webpage will go (Not the header or footer, but the body in between).
The <script></script> element is used to link your HTML file to a JavaScript (JS) file, which will give your webpage interactivity by controlling specific elements. We will get to more of that later.

💡

Learn more about CSS and JS in the Intro to CSS and Intro to JS pages respectively.

Attributes

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="style.css" rel="stylesheet"/>
  </head>
  <body>
    <h1 class="page-title">My Project</h1>
    <p class="description">This is my project</p>
    <script src="script.js"></script>
  </body>
</html>

As seen in the example above, many of the elements had attributes that provided specific values to add features to your code (each word highlighted in purple). These are essential to create a webpage efficiently and have the best results.

Some attributes, like the class attribute, give a description for the element that they are being used by that can be used for programmers to read through code easier and make appropriate changes, but also to easily target specific parts of their code with CSS for styling purposes.

Other attributes, like the lang or alt attributes, are used to provide the webpage important information that will help with formatting and/or SEO (Search Engine Optimization).

Conclusion

To summarize, below is example code for a webpage using all of the previously mentioned information from this page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#cat-image" class="img-of-cat">Image of Cat</a></li>
          <li><a href="#reasons" class="why-i-like-cats">Why I Like Cats</a></li>
        </ul>
      </nav>
      <h1 class="page-title">My Project</h1>
    </header>
    <p class="description">This is my project</p>
    <img class="cat-image" id="cat-image" src="https://smb.ibsrv.net/imageresizer/image/article_manager/1200x1200/20586/516506/heroimage0.327162001643150501.jpg">
    <p class="description">This is a kitten, I will name him <span class="bold">Cookie</span>.</p>
    <p>Cats are one of my <i>favorite</i> animals!</p>
    <p>This is because they are:</p>
    <ul id="reasons">
      <li class="list">Funny</li>
      <li class="list">Clever</li>
      <li class="list">Energetic</li>
      <li class="list">Fluffy</li>
    </ul>
    <p class="description" id="final">And so much more!</p>
    <script src="script.js"></script>
    <footer>
      <p>- Created by a fellow programmer</p>
    </footer>
  </body>
</html>

Here is what the code above would create:

This webpage doesn't seem to have much styling or design to it. It also contains elements that don't fit the page's maximum size on smaller screens. With CSS and JS, this webpage will become much more visually appealing and easier to navigate.

💡

Look into CSS next with our Intro to CSS page.

Intro to CSS Intro to JS

Introduction to Supervised Machine Learning Intro to CSS