Introduction to HTML

What is HTML?

• HTML (HyperText Markup Language) is a markup language that tells

web browsers how to structure the web pages you visit. It can be as
complicated or as simple as the web developer wants it to be.
• HTML consists of a series of elements, which you use to enclose,
wrap, or mark up different parts of content to make it appear or act in a
certain way.
• The enclosing tags can make content into a hyperlink to connect to
another page, italicize words, and so on.
What is HTML?

• Tags in HTML are not case sensitive. This means they can be written
in uppercase or lowercase. For example, a <title> tag could be written
as <title>, <TITLE>, <Title>, <tITle>, etc., and it will work. However,
it is best practice to write all tags in lowercase for consistency and
readability.
Anatomy of an HTML element
Anatomy of an HTML element

• The opening tag: This consists of the name of the element (in this example, p for
paragraph), wrapped in opening and closing angle brackets. This opening tag
marks where the element begins or starts to take effect. In this example, it
precedes the start of the paragraph text.
• The content: This is the content of the element. In this example, it is the
paragraph text.
• The closing tag: This is the same as the opening tag, except that it includes a
forward slash before the element name. This marks where the element ends.
Failing to include a closing tag is a common beginner error that can produce
peculiar results.
Nesting Elements
• Elements can be placed within other elements. This is called nesting. If we
wanted to state that our cat is very grumpy, we could wrap the word very in a
<strong> element, which means that the word is to have strong(er) text
formatting:

<p>My cat is <strong>very</strong> grumpy.</p>

Void Elements
• Not all elements follow the pattern of an opening tag, content, and a closing
tag. Some elements consist of a single tag, which is typically used to
insert/embed something in the document.
• In HTML, there is no requirement to add a / at the end of a void element's tag, for
example: <img src="images/cat.jpg" alt="cat" />. However, it is also a valid syntax,
and you may do this when you want your HTML to be valid XML

<img src="https://raw.githubusercontent.com/mdn/beginner-
html-site/gh-pages/images/firefox-icon.png"
alt="Firefox icon" />
Attributes contain extra information about the element that won't appear in the content. In this example, the class attribute is an identifying name used to target the element with style information.

Attributes
• Attributes contain extra information about the element that won't appear in
the content. In this example, the class attribute is an identifying name used to
target the element with style information.
Attributes contain extra information about the element that won't appear in the content. In this example, the class attribute is an identifying name used to target the element with style information.

Attributes
• Attributes contain extra information about the element that won't appear in
the content. In this example, the class attribute is an identifying name used to
target the element with style information.
Attributes contain extra information about the element that won't appear in the content. In this example, the class attribute is an identifying name used to target the element with style information.

Attributes
• An attribute should have:
 A space between it and the element name. (For an element with more than one attribute,
the attributes should be separated by spaces too.)
 The attribute name, followed by an equal sign.
 An attribute value, wrapped with opening and closing quote marks.
Attributes contain extra information about the element that won't appear in the content. In this example, the class attribute is an identifying name used to target the element with style information.

Adding attributes to an element

• The <img> element can take a number of attributes, including:
• Src - The src attribute is a required attribute that specifies the location of the image. For example:
src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png".

• Alt - The alt attribute specifies a text description of the image. For example:
alt="The Firefox icon".

• Width - The width attribute specifies the width of the image with the unit being
pixels. For example: width="300".

• Height - The height attribute specifies the height of the image with the unit being
pixels. For example: height="300".
Attributes contain extra information about the element that won't appear in the content. In this example, the class attribute is an identifying name used to target the element with style information.

Boolean attributes
• Boolean attributes can only have one value, which is generally the same as the
attribute name. For example, consider the disabled attribute, which you can
assign to form input elements.

<input type="text" disabled="disabled" />

//Shorthand
<input type="text" disabled />
Attributes contain extra information about the element that won't appear in the content. In this example, the class attribute is an identifying name used to target the element with style information.

Single or double quotes?

• Both styles are acceptable just make sure that you don’t mix single quotes
and double quotes

<a href='https://www.example.com'>A link to my example.</a>

<a href="https://www.example.com">A link to my example.</a>

Attributes contain extra information about the element that won't appear in the content. In this example, the class attribute is an identifying name used to target the element with style information.

Anatomy of an HTML document

• Individual HTML elements aren't very useful on their own. Next, let's
examine how individual elements combine to form an entire HTML page:

<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
Attributes contain extra information about the element that won't appear in the content. In this example, the class attribute is an identifying name used to target the element with style information.

Anatomy of an HTML document

• <!DOCTYPE html>: The doctype. When HTML was young (1991-1992),
doctypes were meant to act as links to a set of rules that the HTML page had to
follow to be considered good HTML. More recently, the doctype is a historical
artifact that needs to be included for everything else to work right. <!
DOCTYPE html> is the shortest string of characters that counts as a valid
doctype.
• <html></html>: The <html> element. This element wraps all the content on the
page. It is sometimes known as the root element.
• <head></head>: The <head> element. This element acts as a container for
everything you want to include on the HTML page, that isn't the content the
page will show to viewers. This includes keywords and a page description that
would appear in search results, CSS to style content, character set declarations,
and more. You will learn more about this in the next article of the series.
Attributes contain extra information about the element that won't appear in the content. In this example, the class attribute is an identifying name used to target the element with style information.

Anatomy of an HTML document

• <meta charset="utf-8">: The <meta> element. This element represents
metadata that cannot be represented by other HTML meta-related elements,
like <base>, <link>, <script>, <style> or <title>. The charset attribute
specifies the character encoding for your document as UTF-8, which includes
most characters from the vast majority of human written languages. With
this setting, the page can now handle any textual content it might contain.
• <title></title>: The <title> element. This sets the title of the page, which is the
title that appears in the browser tab the page is loaded in. The page title is
also used to describe the page when it is bookmarked.
• <body></body>: The <body> element. This contains all the content that
displays on the page, including text, images, videos, games, playable audio
tracks, or whatever else.
Attributes contain extra information about the element that won't appear in the content. In this example, the class attribute is an identifying name used to target the element with style information.

Whitespace in HTML
• No matter how much whitespace you use inside HTML element content (which can include one or
more space characters, but also line breaks), the HTML parser reduces each sequence of
whitespace to a single space when rendering the code.

<p id="noWhitespace">Dogs are silly.</p>

<p id="whitespace">Dogs
are
silly.</p>
HTML comments
• HTML has a mechanism to write comments in the code. Browsers ignore
comments, effectively making comments invisible to the user. The purpose of
comments is to allow you to include notes in the code to explain your logic or
coding.

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

What's in the head? Metadata in HTML
• The head of an HTML document is the part that is not displayed in the
web browser when the page is loaded. It contains information such
as:
• page <title>,
• links to CSS (if you choose to style your HTML content with CSS)
• links to custom favicons
• other metadata (data about the HTML, such as the author, and important
keywords that describe the document).
What's in the head? Metadata in HTML
• <head>
• <meta charset="utf-8" />
• <title>My test page</title>
• </head>
Adding a title
• The <title> element is metadata that
represents the title of the overall HTML
document (not the document's content.)
• The <title> element contents are also used in
other ways. For example, if you try
bookmarking the page (Bookmarks >
Bookmark This Page or the star icon in the URL
bar in Firefox), you will see the <title> contents
filled in as the suggested bookmark name.
Metadata: the <meta> element
• Metadata is data that describes data, and HTML has an "official" way
of adding metadata to a document — the <meta> element.
• <meta charset="utf-8" />
Metadata: the <meta> element
• <meta charset="ISO-8859-1"/>
Adding an author and description
• Many <meta> elements include name and content attributes:
• name specifies the type of meta element it is; what type of information it
contains.
• content specifies the actual meta content.

<meta name="author" content="Chris Mills" />

<meta
name="description"
content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing websites and applications." />
Active learning: The description's use in
search engines

<meta
name="description"
content="The MDN Web Docs site
provides information about Open Web technologies
including HTML, CSS, and APIs for both websites and
progressive web apps." />

Many <meta> features just aren't used anymore. For example, the keyword <meta> element (<meta
name="keywords" content="fill, in, your, keywords, here">) — which is supposed to provide keywords
for search engines to determine relevance of that page for different search terms — is ignored by
search engines, because spammers were just filling the keyword list with hundreds of keywords,
biasing results.
Other types of metadata
Open Graph Data is a metadata protocol that Facebook invented to provide richer metadata for websites.

<meta
property="og:image"
content="https://developer.mozilla.org/mdn-social-share.png" />
<meta
property="og:description"
content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for
both websites and HTML Apps." />
<meta property="og:title" content="Mozilla Developer Network" />
Adding custom icons to your site
The most commonly used of these is the favicon (short for "favorites icon", referring to its use in the
"favorites" or "bookmarks" lists in browsers).
A favicon can be added to your page by:
Saving it in the same directory as the site's index page, saved in .ico format (most also support
favicons in more common formats like .gif or .png)
Adding the following line into your HTML's <head> block to reference it:

<link rel="icon" href="favicon.ico" type="image/x-icon" />