intro-frontend-course

Introduction to HTML

HTML, which stands for HyperText Markup Language, is the standard markup language used to create and structure web pages. It provides the basic building blocks for creating a website, including headings, paragraphs, links, images, and more. Understanding HTML is essential for anyone looking to get started in frontend development.

In this lesson, we will cover the fundamentals of HTML, including the syntax and structure of HTML elements, how to create a basic HTML document, and the importance of semantic HTML. You will also learn about common HTML tags and how to use them to create well-structured and accessible web content.

By the end of this lesson, you will have a solid understanding of HTML and be ready to dive deeper into frontend development. HTML is the foundation of web development, and mastering it will pave the way for you to create beautiful and functional websites.

Key Lesson Concepts

HTML is the standard markup language for creating web pages.
Understanding HTML syntax, structure, and elements is essential for frontend development.
Mastering HTML will lay a strong foundation for building websites and web applications.

HTML Documents

HTML documents are composed using a series of elements known as “tags” which serve to define various content types. Each HTML file must end with the .html extension, such as index.html.

When a browser loads an HTML file, it reads and interprets the file to construct something called the Document Object Model (DOM). The DOM represents the hierarchical structure of the document in a tree-like format, consisting of various nodes, including elements and text nodes. This model allows browsers to render the visual layout of the web page efficiently.

Through the use of tags and their attributes, HTML provides a robust framework to embed images, text, videos, and other multimedia files, creating rich, interactive experiences on the internet.

See the Pen Untitled by Mik M (@Mik-M) on CodePen.

Basic HTML Page Structure

<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: Root element of an HTML page.
<head>: Contains metadata and title of the web page.
<body>: Holds all the content that is displayed on the web page.

When the browser sees the above code, it converts it into a tree-like DOM structure as follows:

Document
└── html
    ├── head
    │   └── title
    │       └── "Sample Web Page"
    └── body
        ├── h1
        │   └── "Welcome to My Web Page"
        └── p
            ├── "This is a paragraph with a link to "
            ├── a
            │   └── "Example.com"
            └── "."

All the elements on the tree, including the text, are also referred to as “nodes”.

HTML Elements Overview

1. Text Formatting Elements

Headings (<h1> through <h6>): Defines headers. <h1> represents the highest level of section headings, with <h6> as the lowest.
Paragraphs (<p>): Defines text blocks. <p> is a paragraph tag used to define blocks of text.
Line breaks (
): Inserts a line break within text.
Horizontal rules (<hr>): Defines a thematic break or horizontal line in the content.

2. List Elements

Unordered lists (<ul>): Used for items that do not require a particular order, displayed with bullet points.
Ordered lists (<ol>): Used for items that need to be in a specific sequence, displayed with numbers.
List items (<li>): Used within both unordered and ordered lists to represent individual items.

See the Pen Untitled by Mik M (@Mik-M) on CodePen.

3. Linking and Images:

Anchor tag (<a>) used to create hyperlinks, enabling navigation to other web pages or locations within the same page.
Image tag (<img>)used to embed pictures into a webpage, utilizing the src attribute to specify the URL of the image and alt for alternative text if the image cannot be displayed.

See the Pen Untitled by Mik M (@Mik-M) on CodePen.

4. Tables for Organizing Data:

Table tag (<table>): Defines a table structure.
Table row tag (<tr>): Specifies a row of cells in a table.
Table header cell tag (<th>): Used to define a header for a column.
Table data cell tag (<td>): Used to define standard cells that contain data.

See the Pen table example by Mik M (@Mik-M) on CodePen.

5. Forms for Input:

Form tag (<form>): Defines an HTML form for user input.
Input tag (<input>): Used for creating interactive controls for web-based forms to collect user data.
Label tag (<label>): Specifies a label for an <input> element, improving accessibility by linking the text label to the input control.
Textarea tag (<textarea>): Used for multi-line text input.
Select tag (<select>): Used to create a drop-down list.
Option tag (<option>): Used within the
Submit button (<input type="submit">): Button that submits the form to a server.

See the Pen form-exmaple by Mik M (@Mik-M) on CodePen.

More on forms…

Form Tag (<form>): Defines an HTML form for user input:

<form action="/submit-form" method="post">
  <!-- Form contents go here -->
</form>

Input Tag (<input>): Used for creating interactive controls for web-based forms to collect user data:

<form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
</form>

Label Tag (<label>): Specifies a label for an <input> element, improving accessibility by linking the text label to the input control:

<form action="/submit-form" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>
</form>

Textarea Tag (<textarea>): Used for multi-line text input:

<form action="/submit-form" method="post">
  <label for="message">Message:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
</form>

Select Tag (<select>): Used to create a drop-down list:

<form action="/submit-form" method="post">
  <label for="options">Choose an option:</label>
  <select id="options" name="options">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select><br><br>
</form>

Option Tag (<option>): Used within the

<form action="/submit-form" method="post">
  <label for="fruit">Choose a fruit:</label>
  <select id="fruit" name="fruit">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
  </select><br><br>
</form>

Submit Button (<input type="submit">): Button that submits the form to a server:

<form action="/submit-form" method="post">
  <label for="fname">First Name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  
  <label for="lname">Last Name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  
  <input type="submit" value="Submit">
</form>

Complete form example:

See the Pen Untitled by Mik M (@Mik-M) on CodePen.

Semantic HTML for Accessibility

Semantic elements such as

<article>
<section>
<header>
<footer>
<nav>

provide clear information about the role of the content hold, helping both search engines and assistive technologies to interpret page content correctly.

Example of a Structured HTML Page

Combining these elements, a structured HTML page might look like this:

See the Pen code-example block by Mik M (@Mik-M) on CodePen.

Best Practices for Writing HTML

Use Semantic Elements: Improve accessibility and SEO by using semantic elements where appropriate. Comment Your Code: Use comments () to make your code more readable and maintainable.
Keep Code Clean and Organized: Use consistent indentation and spacing to keep your HTML code clean and readable.
Use External CSS and JavaScript: Keep your HTML file clean by linking to external CSS and JavaScript files instead of embedding them directly in the HTML file.
Validate Your HTML: Use HTML validators to check for errors and ensure your code follows web standards.

Finally, by understanding these fundamentals, you are prepared to dive deeper into more complex HTML structures and dynamic content management. This comprehensive approach ensures you are equipped with the knowledge to start building accessible and well-structured web pages.

For more in-depth introdution to HTML and guides, check out this video: