Menu

Log in

Sign up

From beginner to master of web design, coding, infrastructure operation, business development and marketing

  • COURSES
  • HTML & CSS Introduction
  • HTML & CSS Coding with AI
  • Linux Introduction
  • Docker Basics
  • Git & GitHub Introduction
  • JavaScript Coding with AI
  • Django Introduction
  • AWS Basics
  • Figma Introduction
  • SEO Tutorial for Beginners
  • SEO with AI
  • OTHERS
  • About
  • Terms of Service
  • Privacy Policy

© 2024 D-Libro. All Rights Reserved

HTML & CSS IntroductionChapter 3. HTML Basics

HTML Element

HTML Element

Understanding HTML Elements and Tags

HTML is a markup language, which controls how a document is displayed. In HTML, content is written between the start tag and the end tag.

Tag and Element

Tag

A tag provides information to a web browser on how to display the content inside the tag. As a tag just provides instructions to a web browser, it is not displayed in browsers.

Element

A set of information including the start tag, content, and the end tag is called an element. Building a website is structuring elements like blocks (by HTML) and decorating blocks (with the use of CSS).

This is an example of HTML code.

HTML Example
<h1>Today's Menu</h1>
<h2>Salad</h2>
<ul>
  <li>Greek Salad</li>
  <li>Avocado Salad</li>
  <li>Tomato Salad</li>
</ul>
<h2>Soup</h2>
<ul>
  <li>Minestrone</li>
  <li>Clam Chowder</li>
  <li>Corn Soup</li>
</ul>

The HTML above will be displayed in a browser as shown below.

Web Browser
How h1, h2 and list elements are displayed in a web browser

Tags

HTML provides several tags. The following lists are types of HTML tags. For now, you don't need to memorize all of them. We'll explain these tags in more detail later.

Document Type and Metadata:

<html>, <head>, <title>, <link>, <meta>, <style>

These tags are written in the front section of an HTML document to give general instructions to browsers, such as CSS file path, to add style to the page. Content under these tags is mostly not displayed in the browser.

Sections (Layout Semantics):

<body>, <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>

These tags are used to group contents for layout. Actual design instructions are largely done by CSS; however, these tags provide a web browser with types of content information, e.g., organizing the page content based on its importance and type of information.

Text-level Semantics:

<a>, <em>, <strong>, <small>, <abbr>, <code>

These tags can add meanings to a specific part of text content. For example, <a> is used to create a link to another website page. <strong> is used to highlight a specific part of text content. To apply a tag to a part of text content, you can insert these elements even within a paragraph.

Grouping Content:

<p>, <hr>, <br>, <ol>, <ul>, <li>, <pre>

These tags are used to group content. For example, <p> is used for a paragraph. <hr> is used to separate content by drawing a horizontal line. <br> is used to add line breaks. <ol>, <ul> and <li> are used to create lists.

Embedded Content:

<img>, <video>, <iframe>

You can embed media content by using these tags, such as images and videos. You can also embed other website content by using iframe.

Tables:

<table>, <tr>, <td>, <th>

These tags allow you to create tables on a web page. There are particular rules used to structure a table, which will be explained later.

Forms:

<form>, <input>, <textarea>, <select>, <label>, <button>

For some website pages, you may want to create user input forms. These tags are used to create various user input forms.

div and span

<div> and <span> are often used to customize website design. As <div> and <span> don't have semantics (meanings of elements), they can be used in various situations.

IdeaVoid Elements

There are elements that don't have an end tag. Those elements are called void elements. For example, <img>, <link>, <meta>, <br> and <hr> are void elements.Void elements cannot have content but they can have attributes. We'll explain attributes in the next topic.

Practice

Objective:
Understand how a web browser renders an HTML file

1. Create a new HTML file for this chapter

Open the html-css-introduction directory, which was created in the previous chapter, with Visual Studio Code (VS Code). There are several ways to open a directory or file with VS Code.

  • Drag & drop the directory onto VS Code icon on your desktop
  • Short-cut in the VS Code application. ⌘ + O for Mac or Ctrl + O for windows

Create a new HTML file chapter3.html in the html-css-introduction directory.

2. Type new HTML code

In the chapter3.html file, type or copy and paste the HTML code in the main section as shown below.

chapter3.html
<h1>Today's Menu</h1>
<h2>Salad</h2>
<ul>
  <li>Greek Salad</li>
  <li>Avocado Salad</li>
  <li>Tomato Salad</li>
</ul>
<h2>Soup</h2>
<ul>
  <li>Minestrone</li>
  <li>Clam Chowder</li>
  <li>Corn Soup</li>
</ul>

This is what it looks like in VS Code.

HTML code in VS Code

After editing the file, make sure that you save it (⌘ + S for Mac, Ctrl + S for Windows).

3. Check the result with a browser

Open the file with a web browser from Finder (usually, upon the user double clicking the file, a registered web browser opens the file). You can see that the web browser renders the content properly as shown below.

How HTML code is displayed in a web browser

You can also learn this topic offline. Click AmazonKindle.

More Topics to Explore

Exploring Supplemental Topics in HTML & CSS

Chapter 20. Supplemental Topics

Basic CSS Code for Standard Styling

Basic CSS Code for Standard Styling

Exploring Supplemental Topics in HTML & CSS

Chapter 20. Supplemental Topics

Basic CSS Code for Standard Styling

Basic CSS Code for Standard Styling

Tags:

HTML Element

Start Tag

End Tag

HTML & CSS Introduction
Course Content

Chapter 1. Overview of Website Development

How Websites Work?

Designing, Building and Publishing Websites

Designing Websites

Building Websites – Frontend and Backend Coding

Web App vs. Website

Frontend Coding

Web Framework and CMS

Publishing Websites (Hosting Services)

Chapter 2. Preparing for Website Coding

Two Key Tools to Start Coding Websites

How Browsers Display Web Pages

File Name Rules

Website Directory Structure

Absolute Path vs. Relative Path

Chapter 3. HTML Basics

What Is HTML?

HTML Element

Attribute

HTML Document Structure

Layout Semantics

Heading and Paragraph Tag

Text-Level Semantics

Space, Line-break and Tag in Content

Comments in HTML Document

Chapter 4. HTML: Add Links and Images

Overview of Adding Links and Images

Embed Images – <img>

Image File Format

Add Hyperlinks – <a>

Add Hyperlinks to Images

Add Hyperlinks to Specific Location on Web Page

Link Tag – <link>

Script Tag – <script>

Chapter 5. HTML: Create Lists and Tables

Create Lists

Create Tables

Combine Table Cells

Chapter 6. HTML: Create Forms

Create Forms

Create Text Input Forms and Submit Button

Radio Button and Checkbox

Select Box

Labels

Auto Complete and Disabled

Chapter 7. Bridging HTML and CSS

Block Element vs. Inline Element

Nesting Elements – Parent Elements and Child Elements

Div vs. Span

Global Attribute – Class, ID and Style

Accordion – <Details> and <Summary>

Chapter 8. CSS Basics

What Is CSS?

CSS Syntax

Where To Type CSS?

CSS Basic Selectors

Descendant Selector

Inheritance

Specificity

Reset CSS

Browser Developer Tools for CSS

Comments in CSS Document

Chapter 9. Web Design Basics

Design Element Representation in HTML and CSS

Key Design Points by CSS

Length

Color Code – HEX and RGB

Color Theme

Chapter 10. CSS: Sizing and Spacing

CSS Box Model

width and height

padding

margin

Margin and Padding for Specific Side

margin: auto

box-sizing

Chapter 11. CSS: Styling Text and Images

Text Styling Properties

font-size

color

font-family

Web Font and Google Font

font-weight and font-style

text-decoration

line-height and letter-spacing

text-align

vertical-align

Styling Images

float: left and right

Chapter 12. CSS: Styling Backgrounds

background-color

background-image

background-size

background-repeat

background-position

background-attachment

background (Multiple Properties)

Chapter 13. CSS: Styling Borders and Drawing Lines

border-style

border-color

border-width

border-radius

Border (Multiple Properties)

Borders on Specific Side

Border Radius on Specific Side

Chapter 14. CSS: Layout – Key Concepts and Display Property

Layout Before and After

Layout Key Design Points

Display Property

inline, block and inline-block

display: none

Chapter 15. CSS: Layout – Flex Box

Flex Box – display: flex

flex-direction

Main Axis and Cross Axis

flex-wrap

justify-content

align-items

align-content

align-self

flex-grow

flex-shrink

flex-basis

margin: auto with Flex Box

Inline Flex Box

Nested Flex Box

Chapter 16. CSS: Styling Lists

List Styling Properties

list-style-type

list-style-image

list-style-position

Chapter 17. Creating and Styling Components

Components and Layout

Buttons

Cards

Top Bar

Footer and Bottom Bar

Chapter 18. Completing Website Development

Website Structure Design

Live Server

Home (Landing) Page Development

Main (List) Page Development

Content (Detail) Page Development

Chapter 19. Publishing Websites

Key Steps to Publish Websites

Domain and DNS Server

Favicon

GitHub Pages

Chapter 20. Supplemental Topics

Horizontal Rule – <hr>

Line Break – <br>

Reserved Characters and HTML Entities

Non-breaking Space – &nbsp;

Chapter 1. Overview of Website Development

How Websites Work?

Designing, Building and Publishing Websites

Designing Websites

Building Websites – Frontend and Backend Coding

Web App vs. Website

Frontend Coding

Web Framework and CMS

Publishing Websites (Hosting Services)

Chapter 2. Preparing for Website Coding

Two Key Tools to Start Coding Websites

How Browsers Display Web Pages

File Name Rules

Website Directory Structure

Absolute Path vs. Relative Path

Chapter 3. HTML Basics

What Is HTML?

HTML Element

Attribute

HTML Document Structure

Layout Semantics

Heading and Paragraph Tag

Text-Level Semantics

Space, Line-break and Tag in Content

Comments in HTML Document

Chapter 4. HTML: Add Links and Images

Overview of Adding Links and Images

Embed Images – <img>

Image File Format

Add Hyperlinks – <a>

Add Hyperlinks to Images

Add Hyperlinks to Specific Location on Web Page

Link Tag – <link>

Script Tag – <script>

Chapter 5. HTML: Create Lists and Tables

Create Lists

Create Tables

Combine Table Cells

Chapter 6. HTML: Create Forms

Create Forms

Create Text Input Forms and Submit Button

Radio Button and Checkbox

Select Box

Labels

Auto Complete and Disabled

Chapter 7. Bridging HTML and CSS

Block Element vs. Inline Element

Nesting Elements – Parent Elements and Child Elements

Div vs. Span

Global Attribute – Class, ID and Style

Accordion – <Details> and <Summary>

Chapter 8. CSS Basics

What Is CSS?

CSS Syntax

Where To Type CSS?

CSS Basic Selectors

Descendant Selector

Inheritance

Specificity

Reset CSS

Browser Developer Tools for CSS

Comments in CSS Document

Chapter 9. Web Design Basics

Design Element Representation in HTML and CSS

Key Design Points by CSS

Length

Color Code – HEX and RGB

Color Theme

Chapter 10. CSS: Sizing and Spacing

CSS Box Model

width and height

padding

margin

Margin and Padding for Specific Side

margin: auto

box-sizing

Chapter 11. CSS: Styling Text and Images

Text Styling Properties

font-size

color

font-family

Web Font and Google Font

font-weight and font-style

text-decoration

line-height and letter-spacing

text-align

vertical-align

Styling Images

float: left and right

Chapter 12. CSS: Styling Backgrounds

background-color

background-image

background-size

background-repeat

background-position

background-attachment

background (Multiple Properties)

Chapter 13. CSS: Styling Borders and Drawing Lines

border-style

border-color

border-width

border-radius

Border (Multiple Properties)

Borders on Specific Side

Border Radius on Specific Side

Chapter 14. CSS: Layout – Key Concepts and Display Property

Layout Before and After

Layout Key Design Points

Display Property

inline, block and inline-block

display: none

Chapter 15. CSS: Layout – Flex Box

Flex Box – display: flex

flex-direction

Main Axis and Cross Axis

flex-wrap

justify-content

align-items

align-content

align-self

flex-grow

flex-shrink

flex-basis

margin: auto with Flex Box

Inline Flex Box

Nested Flex Box

Chapter 16. CSS: Styling Lists

List Styling Properties

list-style-type

list-style-image

list-style-position

Chapter 17. Creating and Styling Components

Components and Layout

Buttons

Cards

Top Bar

Footer and Bottom Bar

Chapter 18. Completing Website Development

Website Structure Design

Live Server

Home (Landing) Page Development

Main (List) Page Development

Content (Detail) Page Development

Chapter 19. Publishing Websites

Key Steps to Publish Websites

Domain and DNS Server

Favicon

GitHub Pages

Chapter 20. Supplemental Topics

Horizontal Rule – <hr>

Line Break – <br>

Reserved Characters and HTML Entities

Non-breaking Space – &nbsp;