The Fundamentals of Web Development | I: HTML
Web development is a rapidly evolving field, with new technologies and frameworks emerging all the time. However, at the core of every web application are the fundamentals: HTML, CSS, and JavaScript. In this chapter, we’ll cover these three essential building blocks of web development and lay the foundation for the rest of the book.
Section 1-a: HTML
HTML (Hypertext Markup Language) is the backbone of every web page. It’s a markup language that allows you to define the structure and content of a webpage. In this section, we’ll cover the basics of HTML, including tags, attributes, and common elements.
HTML Tags
HTML tags are used to define the structure of a web page. They are enclosed in angle brackets, like this:
<tagname>content</tagname>
For example, the <h1> tag is used to define a main heading on a page:
<h1>Welcome to my website</h1>
HTML Attributes
HTML attributes provide additional information about an element. They are added to the opening tag of an element and are separated by spaces. For example, the src attribute is used to specify the location of an image:
<img src="image.jpg" alt="A beautiful sunset">
Common HTML Elements
HTML includes a variety of elements that are used to define the content and structure of a web page. Some of the most common elements include:
<h1>–<h6>: Headings of different levels<p>: Paragraphs of text<a>: Links to other web pages or resources<img>: Images<ul>and<ol>: Unordered and ordered lists, respectively
By using these basic HTML elements and attributes, you can create a variety of different web page structures and layouts.
Coding Example
Here’s an example of a simple HTML page that includes a header, some text, and an image:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>Here's some information about me:</p>
<ul>
<li>Name: John Doe</li>
<li>Age: 30</li>
<li>Occupation: Web Developer</li>
</ul>
<img src="image.jpg" alt="A beautiful sunset">
</body>
</html>
This HTML code defines a basic web page structure that includes a header, some text, and an image. As you can see, HTML is a powerful tool for creating web pages, and it forms the foundation of every web application.
Additional HTML Tags
In addition to the basic tags we covered earlier, HTML includes a variety of additional tags that can be used to create more complex page layouts and add additional functionality. Here are some of the most commonly used HTML tags:
<div>and<span>: These tags are used to group together other HTML elements and apply styles to them.<form>and form-related tags (<input>,<label>,<select>,<textarea>, etc.): These tags are used to create web forms that allow users to input and submit data.<table>,<thead>,<tbody>,<tfoot>,<tr>,<th>, and<td>: These tags are used to create tables for displaying data.<header>,<nav>,<main>,<section>,<article>, and<footer>: These tags are used for semantic markup, to define the different sections of a web page.<audio>and<video>: These tags are used to embed audio and video content in a web page.<canvas>: This tag is used to create dynamic, interactive graphics and animations using JavaScript.
Semantic HTML
Semantic HTML is the practice of using HTML tags in a way that conveys meaning and enhances accessibility. By using semantic tags like <header>, <nav>, and <footer>, you can give meaning to the different sections of your web page and make it easier for assistive technologies like screen readers to understand the structure of your content.
Here are some examples of how to use semantic HTML tags:
- Use
<header>to define the header of your web page, which typically includes a logo, navigation menu, and other branding elements. - Use
<nav>to define the navigation menu of your web page. - Use
<main>to define the main content of your web page. - Use
<section>to define different sections of your web page, such as an introduction, a list of features, or a pricing table. - Use
<article>to define self-contained pieces of content on your web page, such as blog posts, news articles, or product descriptions. - Use
<footer>to define the footer of your web page, which typically includes copyright information, links to social media profiles, and other miscellaneous information.
By using semantic HTML tags in this way, you can create a more accessible and user-friendly web page that is easier to navigate and understand.
Coding Example
Here’s an updated version of our previous HTML example that includes some of the additional tags we’ve covered:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<img src="logo.png" alt="My Website">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Welcome to my website</h1>
<p>Here's some information about me:</p>
<ul>
<li>Name: John Doe</li>
<li>Age: 30</li>
<li>Occupation: Web Developer</li>
</ul>
</section>
<section>
<h2>My Skills</h2>
<ul>
<li>HTML</li>
