, , and What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages HTML Introduction What is HTML? </body> The HTML element is everything from the start tag to the end tag: Web Browsers A browser does not display the HTML tags, but uses them to determine how to <html> <head> <title>Page title</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> HTML History Year Version HTML Basic Examples Don't worry if we use tags you have not learned about yet. HTML Documents Example </body> It must only appear once, at the top of the page (before any HTML tags). <!DOCTYPE html> HTML Headings HTML Paragraphs Example HTML Links Example Example HTML Elements An HTML element is defined by a start tag, some content, and an end tag. Note: Some HTML elements have no content (like the <br> element). These Example </body> Example Explained <body> </body> Example <p>This is a paragraph </body> However, never rely on this! Unexpected results and errors may occur if Tag Description HTML Attributes Example Example 2. Relative URL - Links to an image that is hosted within the website. Here, Tip: It is almost always best to use relative URLs. They will not break if you Example Example Example <!DOCTYPE html> Country codes can also be added to the language code in the lang attribute. So, <!DOCTYPE html> You can see all the language codes in our HTML Language Code Reference. The value of the title attribute will be displayed as a tooltip when you mouse Example The title attribute (and all other attributes) can be written with uppercase or Good: Bad: Sometimes you have to use quotes. This example will not display the title Example In some situations, when the attribute value itself contains double quotes, it is Or vice versa: HTML Headings HTML headings are titles or subtitles that you want to display on a webpage. Example Heading 1 Example Note: Use HTML headings for headings only. Don't use headings to make Bigger Headings HTML Paragraphs HTML Paragraphs A paragraph always starts on a new line, and browsers automatically add some Example HTML Display Large or small screens, and resized windows will create different results. With HTML, you cannot change the display by adding extra spaces or extra lines The browser will automatically remove any extra spaces and lines when the <p> Example Use <br> if you want a line break (a new line) without starting a new paragraph: Example Example HTML Styles Example I am Blue I am Big Background Color Example <body style="background-color:powderblue;"> <h1>This is a heading</h1> </body> Example <body> <h1 style="background-color:powderblue;">This is a heading</h1> </body> Example Fonts Example Text Size Example Example Chapter Summary HTML Text Formatting HTML contains several elements for defining text with a special meaning. Example This is subscript and superscript Example Example Example Tip: A screen reader will pronounce the words in <em> with an emphasis, using Example Example Example Example Example Example Example Example Example Example Tip: Use the global title attribute to show the description for the Example The contact information can be an email address, URL, physical address, phone Example Example Example HTML Comments HTML comments are not displayed in the browser, but they can help Notice that there is an exclamation point (!) in the start tag, but not in the end Note: Comments are not displayed by the browser, but they can help document With comments you can place notifications and reminders in your HTML code: Example <p>This is a paragraph.</p> Comments are also great for debugging HTML, because you can comment out Example HTML Colors Color Names Tomato Orange DodgerBlue MediumSeaGreen Gray SlateBlue Violet Try it Yourself » Background Color Hello World Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy Example Text Color Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit Example Border Color Hello World The following three <div> elements have their background color set with RGB, #ff6347 Example An RGB color value represents RED, GREEN, and BLUE light sources. rgb(red, green, blue) This means that there are 256 x 256 x 256 = 16777216 possible colors! For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest To display black, set all color parameters to 0, like this: rgb(0, 0, 0). To display white, set all color parameters to 255, like this: rgb(255, 255, 255). #rrggbb For example, #ff0000 is displayed as red, because red is set to its highest value To display black, set all color parameters to 00, like this: #000000. To display white, set all color parameters to ff, like this: #ffffff. #ff6347 hsl(hue, saturation, lightness) HUE SATURATION 100% LIGHTNESS 50% Try it Yourself » Saturation 50% is 50% gray, but you can still see the color. Example Lightness Shades of Gray Try it Yourself » hsla(hue, saturation, lightness, alpha) Example HTML Links Links are found in nearly all web pages. Links allow users to click their way When you move the mouse over a link, the mouse arrow will turn into a little <a href="url">link text</a> Clicking on the link text, will send the reader to the specified URL address. Example <a href="https://www.w3schools.com/">Visit W3Schools.com!</a> Example <a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a> A local link (a link to a page within the same website) is specified with Example <h2>Relative URLs</h2> Try it Yourself » Try it Yourself » Example Try it Yourself » Button as a Link JavaScript allows you to specify what happens at certain events, such as a click Example Try it Yourself » Example Try it Yourself » <a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a> Try it Yourself » Example <a href="/html/default.asp">HTML tutorial</a> Try it Yourself » Example <a href="default.asp">HTML tutorial</a> Try it Yourself » You can read more about file paths in the chapter HTML File Paths. HTML Images Images can improve the design and the appearance of a web page. Example Try it Yourself » Example Try it Yourself » Try it Yourself » Images are not technically inserted into a web page; images are linked to web The <img> tag is empty, it contains attributes only, and does not have a closing Syntax Note: When a web page loads; it is the browser, at that moment, that gets the Example Example Try it Yourself » Example Try it Yourself » Tip: A screen reader is a software program that reads the HTML code, and Example Example Try it Yourself » Note: Always specify the width and height of an image. If width and height are Example <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Try it Yourself » Example Try it Yourself » To point to an image on another server, you must specify an absolute (full) URL Example Try it Yourself » Chapter Summary HTML Image Maps With HTML image maps, you can create clickable areas on an image. Image Maps Try to click on the computer, phone, or the cup of coffee in the image below: <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> Try it Yourself » The Image <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> The Areas You must also define some coordinates to be able to place the clickable area Shape="rect" So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels Example Try it Yourself » This is the area that becomes clickable and will send the user to the page HTML Image Maps With HTML image maps, you can create clickable areas on an image. Try to click on the computer, phone, or the cup of coffee in the image below: Example <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> To create an image map you need an image, and some HTML code that The Image <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> Shape You must also define some coordinates to be able to place the clickable area Shape="rect" So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels Example Try it Yourself » This is the area that becomes clickable and will send the user to the page Shape="circle" 337,300 44 pixels Example Try it Yourself » This is the area that becomes clickable and will send the user to the page Shape="poly" How can we make the croissant in the image below become a clickable link? With HTML image maps, you can create clickable areas on an image. Image Maps Try to click on the computer, phone, or the cup of coffee in the image below: Example <map name="workmap"> Try it Yourself » To create an image map you need an image, and some HTML code that The Image <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> The Areas Shape You must also define some coordinates to be able to place the clickable area Shape="rect" So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels Example Try it Yourself » This is the area that becomes clickable and will send the user to the page Shape="circle" 337,300 44 pixels Example Try it Yourself » This is the area that becomes clickable and will send the user to the page Shape="poly" How can we make the croissant in the image below become a clickable link? HTML <picture> Element Example <picture> Try it Yourself » 1. Bandwidth 2. Format Support Example <picture> Try it Yourself » Tag Description HTML Tables Example Alfreds Maria Centro Roland Helen Laughing Magazzini Each table row is defined with a <tr> tag. Each table header is defined with Example <table style="width:100%"> ADVERTISEMENT Remember to define borders for both the table and the table cells. Example If you do not specify a padding, the table cells will be displayed without Example Example Example Example Example Example Chapter Summary HTML Lists HTML lists allow web developers to group a set of related items in lists. Example Item 1. First item The list items will be marked with bullets (small black circles) by default: Example Example Try it Yourself » The <dl> tag defines the description list, the <dt> tag defines the term (name), Example Tag Description HTML Unordered Lists The list items will be marked with bullets (small black circles) by default: Example Value Description Example - Disc Example - Circle Example - Square Example - None Example Note: A list item (<li>) can contain a new list, and other HTML elements, like HTML Unordered Lists The list items will be marked with bullets (small black circles) by default: Value Description Example - Disc Example - Circle Example - Square Example - None Note: A list item (<li>) can contain a new list, and other HTML elements, like Example li { li a:hover { <ul> </body> Chapter Summary Tag Description HTML Ordered Lists Example Try it Yourself » Type Description Numbers: Try it Yourself » Uppercase Letters: Try it Yourself » Lowercase Letters: Try it Yourself » Try it Yourself » Try it Yourself » ADVERTISEMENT Example Try it Yourself » Example Try it Yourself » Note: A list item (<li>) can contain a new list, and other HTML elements, like Chapter Summary Tag Description HTML Other Lists Example Try it Yourself » Chapter Summary Every HTML element has a default display value, depending on what type of A block-level element always takes up the full width available (stretches out to A block level element has a top and a bottom margin, whereas an inline Example Try it Yourself » <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video> Inline Elements Try it Yourself » <a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var> When used together with CSS, the <div> element can be used to style blocks of Example Try it Yourself » When used together with CSS, the <span> element can be used to style parts of Example Try it Yourself » Chapter Summary A file path describes the location of a file in a web site's folder structure. Path Descriptio <img The <img The Web pages Example Try it Yourself » In the following example, the file path points to a file in the images folder Example Try it Yourself » In the following example, the file path points to a file in the images folder Example Try it Yourself » In the following example, the file path points to a file in the images folder Example Best Practice When using relative file paths, your web pages will not be bound to your current Example Cities London Footer Try it Yourself » A responsive web design will automatically adjust for different screen sizes Try it Yourself » Try it Yourself » This will set the viewport of your page, which will give the browser instructions Here is an example of a web page without the viewport meta tag, and the same Tip: If you are browsing this page on a phone or a tablet, you can click on the ADVERTISEMENT Responsive Images Try it Yourself » Notice that in the example above, the image can be scaled up to be larger than Example Try it Yourself » Resize the browser window to see how the image below change depending on Example Try it Yourself » That way the text size will follow the size of the browser window: Hello World Try it Yourself » HTML contains several elements for defining user input and computer code. Example Try it Yourself » Example Try it Yourself » Example Result: Try it Yourself » ADVERTISEMENT <code> Result: Try it Yourself » Notice that the <code> element does not preserve extra whitespace and line- Example Result: Try it Yourself » Result: The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical Try it Yourself » Chapter Summary HTML Semantic Elements In HTML there are some semantic elements that can be used to define different <article> A web page could normally be split into sections for introduction, content, and Example <section> <section> Try it Yourself » In HTML there are some semantic elements that can be used to define different <article> A web page could normally be split into sections for introduction, content, and Example <section> <section> Try it Yourself » Can we use the definitions to decide how to nest those elements? No, we Example Try it Yourself » authorship information Example <footer> Try it Yourself » Browsers, such as screen readers for disabled users, can use this element to Example <nav> Try it Yourself » Example <p>My family and I visited The Epcot center this summer. The weather was <aside> Try it Yourself » Example 2 <html> <p>My family and I visited The Epcot center this summer. The weather was <aside> <p>My family and I visited The Epcot center this summer. The weather was </body> Example Try it Yourself » Tag Description are used to define headings, paragraphs, links, and images.
- A basic HTML document structure includes , , and elements, with visible content placed within the .
- The document also explains concepts like HTML tags, elements, attributes, and nested elements.">
Uploaded by
Asare EnockUploaded by
Asare EnockHTML LESSONS NOTES
HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is
a paragraph", "this is a link", etc.A Simple HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body><h1>My First Heading</h1>
<p>My first paragraph.</p>
</html>
Example Explained
The <!DOCTYPE html> declaration defines that this document is an HTML5
document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown
in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraphWhat is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:<tag name>Content goes here...</tag name>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML
documents and display them correctly.
display the document:
HTML Page Structure
Below is a visualization of an HTML page structure:<p>This is another paragraph.</p>
Note: The content inside the <body> section (the white area above) will be
displayed in a browser. The content inside the <title> element will be shown in
the browser's title bar or in the page's tab.
Since the early days of the World Wide Web, there have been many versions of
HTML: 1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft 2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
This tutorial follows the latest HTML5 standard.
In this chapter we will show some basic HTML examples.
All HTML documents must start with a document type declaration: <!DOCTYPE
html>.
The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>.
<!DOCTYPE html>
<html>
<body><h1>My First Heading</h1>
<p>My first paragraph.</p>
</html> The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly. The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important
heading:
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML links are defined with the <a> tag:
<a href="https://www.w3schools.com">This is a link</a>The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.
HTML Images
HTML images are defined with the <img> tag.The source file (src), alternative text (alt), width, and height are provided as
attributes:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">How to View HTML Source?
Have you ever seen a Web page and wondered "Hey! How did they do that?"View HTML Source Code:
Right-click in an HTML page and select "View Page Source" (in Chrome) or
"View Source" (in Edge), or similar in other browsers. This will open a window
containing the HTML source code of the page.Inspect an HTML Element:
Right-click on an element (or a blank area), and choose "Inspect" or "Inspect
Element" to see what elements are made up of (you will see both the HTML and
the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or
Styles panel that opens.
HTML Elements
The HTML element is everything from the start tag to the end tag:<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p> Start Element End
tag content tag <h1> My First Heading </h1>
<p> My first </p>
paragraph. <br> none none
elements are called empty elements. Empty elements do not have an end tag!Nested HTML Elements
HTML elements can be nested (this means that elements can contain other
elements).
All HTML documents consist of nested HTML elements.The following example contains four HTML elements
(<html>, <body>, <h1> and <p>):
<!DOCTYPE html>
<html>
<body><h1>My First Heading</h1>
<p>My first paragraph.</p>
</html>
The <html> element is the root element and it defines the whole HTML document.It has a start tag <html> and an end tag </html>.
Then, inside the <html> element there is a <body> element:
<h1>My First Heading</h1>
<p>My first paragraph.</p>The <body> element defines the document's body.
It has a start tag <body> and an end tag </body>.
Then, inside the <body> element there are two other elements: <h1> and <p>:
<h1>My First Heading</h1>
<p>My first paragraph.</p>The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>:<h1>My First Heading</h1>
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>:
<p>My first paragraph.</p>
Never Skip the End Tag
Some HTML elements will display correctly, even if you forget the end tag:
<html>
<body>
<p>This is a paragraph
</html>
you forget the end tag!Empty HTML Elements
HTML elements with no content are called empty elements.The <br> tag defines a line break, and is an empty element without a closing
tag:
Example
<p>This is a <br> paragraph with a line break.</p> HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>. The HTML standard does not require lowercase tags, but
W3C recommends lowercase in HTML, and demands lowercase for stricter
document types like XHTML. HTML Tag Reference
W3Schools' tag reference contains additional information about these tags and
their attributes. <html> Defines the root of an
HTML document <body> Defines the document's
body <h1> to Defines HTML headings
<h6>
HTML AttributesHTML attributes provide additional information about HTML elements.
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page
the link goes to:
<a href="https://www.CodeWeb.com">Visit W3Schools</a>You will learn more about links in our HTML Links chapter.
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute
specifies the path to the image to be displayed:
<img src="img_girl.jpg">There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another
website. Example: src="https://www.w3schools.com/images/img_girl.jpg".Notes: External images might be under copyright. If you do not get permission
to use it, you may be in violation of copyright laws. In addition, you cannot
control external images; it can suddenly be removed or changed.
the URL does not include the domain name. If the URL begins without a slash, it
will be relative to the current page. Example: src="img_girl.jpg". If the URL
begins with a slash, it will be relative to the domain. Example:
src="/images/img_girl.jpg".
change domain.The width and height Attributes
The <img> tag should also contain the width and height attributes, which specifies
the width and height of the image (in pixels):
<img src="img_girl.jpg" width="500" height="600">The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an
image, if the image for some reason cannot be displayed. This can be due to
slow connection, or an error in the src attribute, or if the user uses a screen
reader.
<img src="img_girl.jpg" alt="Girl with a jacket">
Example
See what happens if we try to display an image that does not exist:<img src="img_typo.jpg" alt="Girl with a jacket">
You will learn more about images in our HTML Images chapter.
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size,
and more.
<p style="color:red;">This is a red paragraph.</p>You will learn more about styles in our HTML Styles chapter.
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the
language of the Web page. This is meant to assist search engines and browsers.The following example specifies English as the language:
<html lang="en">
<body>
...
</body>
</html>
the first two characters define the language of the HTML page, and the last two
characters define the country.
The following example specifies English as the language and United States as
the country:
<html lang="en-US">
<body>
...
</body>
</html>The title Attribute
The title attribute defines some extra information about an element.
over the element:
<p title="I'm a tooltip">This is a paragraph.</p>We Suggest: Always Use Lowercase Attributes
The HTML standard does not require lowercase attribute names.
lowercase like title or TITLE.However, W3C recommends lowercase attributes in HTML,
and demands lowercase attributes for stricter document types like XHTML.At Codeweb we always use lowercase attribute names.
We Suggest: Always Quote Attribute Values
The HTML standard does not require quotes around attribute values.However, W3C recommends quotes in HTML, and demands quotes for stricter
document types like XHTML.
<a href="https://www.codeweb.com/html/">Visit our HTML tutorial</a>
<a href=https://www.codeweb.com/html/>Visit our HTML tutorial</a>
attribute correctly, because it contains a space:
<p title=About CodeWeb Africa> At CodeWeb Africa we always use quotes around attribute values.
Single or Double Quotes?
Double quotes around attribute values are the most common in HTML, but
single quotes can also be used.
necessary to use single quotes:<p title='John "ShotGun" Nelson'>
<p title="John 'ShotGun' Nelson">
Chapter Summary
All HTML elements can have attributes
The href attribute of <a> specifies the URL of the page the link goes to
The src attribute of <img> specifies the path to the image to be displayed
The width and height attributes of <img> provide size information for
images
The alt attribute of <img> provides an alternate text for an image
The style attribute is used to add styles to an element, such as color,
font, size, and more
The lang attribute of the <html> tag declares the language of the Web
page
The title attribute defines some extra information about an element
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.<h1> defines the most important heading. <h6> defines the least important
heading.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Note: Browsers automatically add some white space (a margin) before and
after a heading.Headings Are Important
Search engines use the headings to index the structure and content of your web
pages.Users often skim a page by its headings. It is important to use headings to
show the document structure.<h1> headings should be used for main headings, followed by <h2> headings, then
the less important <h3>, and so on.
text BIG or bold.
Each HTML heading has a default size. However, you can specify the size for
any heading with the style attribute, using the CSS font-size property:
Example
<h1 style="font-size:60px;">Heading 1</h1>A paragraph always starts on a new line, and is usually a block of text.
The HTML <p> element defines a paragraph.
white space (a margin) before and after a paragraph.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
You cannot be sure how HTML will be displayed.
in your HTML code.
page is displayed:
Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.The <hr> element is used to separate content (or define a change) in an HTML
page:
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>The <hr> tag is an empty tag, which means that it has no end tag.
HTML Line Breaks
The HTML <br> element defines a line break.
<p>This is<br>a paragraph<br>with line breaks.</p>The <br> tag is an empty tag, which means that it has no end tag.
The Poem Problem
This poem will display on a single line:
<p>
My Bonnie lies over the ocean. My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>Solution - The HTML <pre> Element
The HTML <pre> element defines preformatted text.The text inside a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean. My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>The HTML style attribute is used to add styles to an element, such as color,
font, size, and more.
I am RedThe HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.The HTML style attribute has the following syntax:
<tagname style="property:value;">The property is a CSS property. The value is a CSS value.
You will learn more about CSS later in this tutorial.
The CSS background-color property defines the background color for an HTML
element.
Set the background color for a page to powderblue:
<p>This is a paragraph.</p>
Set background color for two different elements:
<p style="background-color:tomato;">This is a paragraph.</p>
Text Color
The CSS color property defines the text color for an HTML element:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
The CSS font-family property defines the font to be used for an HTML element:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
The CSS font-size property defines the text size for an HTML element:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML
element:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment
This text is boldThis text is italic
HTML Formatting Elements
Formatting elements were designed to display special types of text: <b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript textHTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importance.
<b>This text is bold</b>The HTML <strong> element defines text with strong importance. The content
inside is typically displayed in bold.
<strong>This text is important!</strong>
HTML <i> and <em> Elements
The HTML <i> element defines a part of text in an alternate voice or mood. The
content inside is typically displayed in italic.Tip: The <i> tag is often used to indicate a technical term, a phrase from
another language, a thought, a ship name, etc.
<i>This text is italic</i>The HTML <em> element defines emphasized text. The content inside is typically
displayed in italic.
verbal stress.
<em>This text is emphasized</em>HTML <small> Element
The HTML <small> element defines smaller text:
<small>This is some smaller text.</small>
HTML <mark> Element
The HTML <mark> element defines text that should be marked or highlighted:
<p>Do not forget to buy <mark>milk</mark> today.</p>HTML <del> Element
The HTML <del> element defines text that has been deleted from a document.
Browsers will usually strike a line through deleted text:
<p>My favorite color is <del>blue</del> red.</p>HTML <ins> Element
The HTML <ins> element defines a text that has been inserted into a document.
Browsers will usually underline inserted text:
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML <sub> Element
The HTML <sub> element defines subscript text. Subscript text appears half a
character below the normal line, and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H 2O:
<p>This is <sub>subscripted</sub> text.</p>HTML <sup> Element
The HTML <sup> element defines superscript text. Superscript text appears half
a character above the normal line, and is sometimes rendered in a smaller font.
Superscript text can be used for footnotes, like WWW [1]:
<p>This is <sup>superscripted</sup> text.</p>HTML Quotation and Citation Elements
In this chapter we will go through
the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML
elements.
Here is a quote from WWF's website:
For nearly 60 years, WWF has been protecting the future of nature. The
world's leading conservation organization, WWF works in 100 countries
and is supported by more than one million members in the United
States and close to five million globally.HTML <blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from another
source.Browsers usually indent <blockquote> elements.
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>HTML <q> for Short Quotations
The HTML <q> tag defines a short quotation.Browsers normally insert quotation marks around the quotation.
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
HTML <abbr> for Abbreviations
The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS",
"Mr.", "Dr.", "ASAP", "ATM".Marking abbreviations can give useful information to browsers, translation
systems and search-engines.
abbreviation/acronym when you mouse over the element.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>HTML <address> for Contact Information
The HTML <address> tag defines the contact information for the author/owner of
a document or an article.
number, social media handle, etc.The text in the <address> element usually renders in italic, and browsers will
always add a line break before and after the <address> element.
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML <cite> for Work Title
The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a
song, a movie, a painting, a sculpture, etc.).Note: A person's name is not the title of a work.
The text in the <cite> element usually renders in italic.
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>HTML <bdo> for Bi-Directional Override
BDO stands for Bi-Directional Override.The HTML <bdo> tag is used to override the current text direction:
<bdo dir="rtl">This text will be written from right to left</bdo>
document your HTML source code.
HTML Comment Tags
You can add comments to your HTML source by using the following syntax:<!-- Write your comments here -->
tag.
your HTML source code.
<!-- This is a comment --><!-- Remember to add more information here -->
HTML lines of code, one at a time, to search for errors:
<!-- Do not display this image at the moment
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
HTML colors are specified with predefined color names, or with RGB, HEX,
HSL, RGBA, or HSLA values.
In HTML, a color can be specified by using a color name:
LightGrayHTML supports 140 standard color names.
You can set the background color for HTML elements:
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
You can set the color of text:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
lobortis nisl ut aliquip ex ea commodo consequat.
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
You can set the color of borders:
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL
values, RGBA values, and HSLA values.
HEX, and HSL values:rgb(255, 99, 71)
hsl(9, 100%, 64%)
The following two <div> elements have their background color set with RGBA
and HSLA values, which adds an Alpha channel to the color (here we have 50%
transparency):rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1><h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Learn more about Color Values
You will learn more about RGB, HEX and HSL in the next chapters.HTML RGB and RGBA Colors
An RGBA color value is an extension of RGB with an Alpha channel (opacity).
RGB Color Values
In HTML, a color can be specified as an RGB value, using this formula:
Each parameter (red, green, and blue) defines the intensity of the color with a
value between 0 and 255.
value (255), and the other two (green and blue) are set to 0.Another example, rgb(0, 255, 0) is displayed as green, because green is set to
its highest value (255), and the other two (red and blue) are set to 0.
HTML HEX ColorsA hexadecimal color is specified with: #RRGGBB, where the RR (red), GG
(green) and BB (blue) hexadecimal integers specify the components of the
color.HEX Color Values
In HTML, a color can be specified using a hexadecimal value in the form:
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00
and ff (same as decimal 0-255).
(ff), and the other two (green and blue) are set to 00.Another example, #00ff00 is displayed as green, because green is set to its
highest value (ff), and the other two (red and blue) are set to 00.Experiment by mixing the HEX values below:
HTML HSL and HSLA Color
HSL stands for hue, saturation, and lightness.
HSLA color values are an extension of HSL with an Alpha channel (opacity).HSL Color Values
In HTML, a color can be specified using hue, saturation, and lightness (HSL) in
the form:
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and
240 is blue.Saturation is a percentage value, 0% means a shade of gray, and 100% is the
full color.Lightness is also a percentage value, 0% is black, and 100% is white.
Experiment by mixing the HSL values below:
hsl(0, 100%, 50%)
Examplehsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
Saturation can be described as the intensity of a color.100% is pure color, no shades of gray
0% is completely gray, you can no longer see the color.hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
The lightness of a color can be described as how much light you want to give
the color, where 0% means no light (black), 50% means 50% light (neither
dark nor light) 100% means full lightness (white).
Examplehsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
Shades of gray are often defined by setting the hue and saturation to 0, and
adjust the lightness from 0% to 100% to get darker/lighter shades:
Examplehsl(0, 0%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0, 0%, 90%)
HSLA Color Values
HSLA color values are an extension of HSL color values with an Alpha channel -
which specifies the opacity for a color.An HSLA color value is specified with:
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):Experiment by mixing the HSLA values below:
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2), 64%, 0.8)
hsla(9, 100%, 64%, 1)
❮ PreviousNext ❯
from page to page.HTML Links - Hyperlinks
HTML links are hyperlinks.You can click on a link and jump to another document.
handheld.
Note: A link does not have to be text. A link can be an image or any other
HTML element!HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.The link text is the part that will be visible to the reader.
This example shows how to create a link to W3Schools.com:By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and redTip: Links can of course be styled with CSS, to get another look!
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it was
clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
Use target="_blank" to open the linked document in a new browser window or
tab:Absolute URLs vs. Relative URLs
Both examples above are using an absolute URL (a full web address) in
the href attribute.
a relative URL (without the "https://www" part):
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user's email
program (to let them send a new email):
<a href="mailto:someone@example.com">Send email</a>
To use an HTML button as a link, you have to add some JavaScript code.
of a button:
<button onclick="document.location='default.asp'">HTML Tutorial</button>Tip: Learn more about JavaScript in our JavaScript Tutorial.
Link Titles
The title attribute specifies extra information about an element. The
information is most often shown as a tooltip text when the mouse moves over
the element.
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>More on Absolute URLs and Relative URLs
Example
Use a full URL to link to a web page:
Link to a page located in the html folder on the current web site:
Link to a page located in the same folder as the current page:
Chapter Summary
Use the <a> element to define a link
Use the href attribute to define the link address
Use the target attribute to define where to open the linked document
Use the <img> element (inside <a>) to use an image as a link
Use the mailto: scheme inside the href attribute to create a link that
opens the user's email program
❮ PreviousNext ❯
<img src="pic_trulli.jpg" alt="Italian Trulli">
<img src="img_girl.jpg" alt="Girl in a jacket">
Example
<img src="img_chania.jpg" alt="Flowers in Chania">HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.
pages. The <img> tag creates a holding space for the referenced image.
tag.The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
<img src="url" alt="alternatetext">The src Attribute
The required src attribute specifies the path (URL) to the image.
image from a web server and inserts it into the page. Therefore, make sure that
the image actually stays in the same spot in relation to the web page, otherwise
your visitors will get a broken link icon. The broken link icon and the alt text are
shown if the browser cannot find the image.
<img src="img_chania.jpg" alt="Flowers in Chania">
Try it Yourself »The alt Attribute
The required alt attribute provides an alternate text for an image, if the user for
some reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).The value of the alt attribute should describe the image:
<img src="img_chania.jpg" alt="Flowers in Chania">If a browser cannot find an image, it will display the value of the alt attribute:
<img src="wrongname.gif" alt="Flowers in Chania">
allows the user to "listen" to the content. Screen readers are useful for people
who are visually impaired or learning disabled.Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
Try it Yourself »Alternatively, you can use the width and height attributes:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">The width and height attributes always define the width and height of the image
in pixels.
not specified, the web page might flicker while the image loads.Width and Height, or Style?
The width, height, and style attributes are all valid in HTML.However, we suggest using the style attribute. It prevents styles sheets from
changing the size of images:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
</body>
</html>Images in Another Folder
If you have your images in a sub-folder, you must include the folder name in
the src attribute:
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">Images on Another Server/Website
Some web sites point to an image on another server.
in the src attribute:
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Sc
hools.com">Notes on external images: External images might be under copyright. If you
do not get permission to use it, you may be in violation of copyright laws. In
addition, you cannot control external images; it can suddenly be removed or
changed.
Use the HTML <img> element to define an image
Use the HTML src attribute to define the URL of the image
Use the HTML alt attribute to define an alternate text for an image, if it
cannot be displayed
Use the HTML width and height attributes or the
CSS width and height properties to define the size of the image
Use the CSS float property to let the image float to the left or to the right
❮ PreviousNext ❯
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.
Example
Here is the HTML source code for the image map above:
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer
.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm
">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"
>
</map>How Does it Work?
The idea behind an image map is that you should be able to perform different
actions depending on where in the image you click.
To create an image map you need an image, and some HTML code that
describes the clickable areas.
The image is inserted using the <img> tag. The only difference from other images
is that you must add a usemap attribute:The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image
map.Tip: You can use any image as an image map!
Create Image Map
Then, add a <map> element.The <map> element is used to create an image map, and is linked to the image by
using the required name attribute:The name attribute must have the same value as the <img>'s usemap attribute .
Then, add the clickable areas.A clickable area is defined using an <area> element.
Shape
You must define the shape of the clickable area, and you can choose one of
these values: rect - defines a rectangular region
circle - defines a circular region
poly - defines a polygonal region
default - defines the entire region
onto the image.
The coordinates for shape="rect" come in pairs, one for the x-axis and one for the
y-axis.
from the top:
The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels
from the top:Now we have enough data to create a clickable rectangular area:
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
"computer.htm":
❮ PreviousNext ❯
Image Maps
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.
Here is the HTML source code for the image map above:
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer
.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm
">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"
>
</map>
Try it Yourself »How Does it Work?
The idea behind an image map is that you should be able to perform different
actions depending on where in the image you click.
describes the clickable areas.
The image is inserted using the <img> tag. The only difference from other images
is that you must add a usemap attribute:The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image
map.Tip: You can use any image as an image map!
Create Image Map
Then, add a <map> element.The <map> element is used to create an image map, and is linked to the image by
using the required name attribute:The name attribute must have the same value as the <img>'s usemap attribute .
The Areas
Then, add the clickable areas.A clickable area is defined using an <area> element.
You must define the shape of the clickable area, and you can choose one of
these values: rect - defines a rectangular region
circle - defines a circular region
poly - defines a polygonal region
default - defines the entire region
onto the image.
The coordinates for shape="rect" come in pairs, one for the x-axis and one for the
y-axis.
from the top:
The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels
from the top:
Now we have enough data to create a clickable rectangular area:
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
"computer.htm":
To add a circle area, first locate the coordinates of the center of the circle:
Then specify the radius of the circle:
Now you have enough data to create a clickable circular area:
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
"coffee.htm":
The shape="poly" contains several coordinate points, which creates a shape
formed with straight lines (a polygon).This can be used to create any shape.
Like maybe a croissant shape!
HTML Image Maps
❮ PreviousNext ❯
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.
Here is the HTML source code for the image map above:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer
.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm
">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"
>
</map>How Does it Work?
The idea behind an image map is that you should be able to perform different
actions depending on where in the image you click.
describes the clickable areas.
The image is inserted using the <img> tag. The only difference from other images
is that you must add a usemap attribute:The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image
map.Tip: You can use any image as an image map!
Create Image Map
Then, add a <map> element.The <map> element is used to create an image map, and is linked to the image by
using the required name attribute:The name attribute must have the same value as the <img>'s usemap attribute .
Then, add the clickable areas.A clickable area is defined using an <area> element.
You must define the shape of the clickable area, and you can choose one of
these values: rect - defines a rectangular region
circle - defines a circular region
poly - defines a polygonal region
default - defines the entire region
onto the image.
The coordinates for shape="rect" come in pairs, one for the x-axis and one for the
y-axis.
from the top:
The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels
from the top:
Now we have enough data to create a clickable rectangular area:
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
"computer.htm":
To add a circle area, first locate the coordinates of the center of the circle:
Then specify the radius of the circle:
Now you have enough data to create a clickable circular area:
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
"coffee.htm":
The shape="poly" contains several coordinate points, which creates a shape
formed with straight lines (a polygon).This can be used to create any shape.
Like maybe a croissant shape!
Chapter Summary
Use the HTML <map> element to define an image map
Use the HTML <area> element to define the clickable areas in the image
map
Use the HTML usemap attribute of the <img> element to point to an image
map
❮ PreviousNext ❯The HTML <picture> element allows you to display different pictures for
different devices or screen sizes.
The HTML <picture> Element
The HTML <picture> element gives web developers more flexibility in specifying
image resources.The <picture> element contains one or more <source> elements, each referring to
different images through the srcset attribute. This way the browser can choose
the image that best fits the current view and/or device.Each <source> element has a media attribute that defines when the image is the
most suitable.
Show different images for different screen sizes:
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Note: Always specify an <img> element as the last child element of
the <picture> element. The <img> element is used by browsers that do not
support the <picture> element, or if none of the <source> tags match.When to use the Picture Element
There are two main purposes for the <picture> element:
If you have a small screen or device, it is not necessary to load a large image
file. The browser will use the first <source> element with matching attribute
values, and ignore any of the following elements.
Some browsers or devices may not support all image formats. By using
the <picture> element, you can add images of all formats, and the browser will
use the first format it recognizes, and ignore any of the following elements.
The browser will use the first image format it recognizes:
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>Note: The browser will use the first <source> element with matching attribute
values, and ignore any following <source> elements.
HTML Image Tags <img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources
HTML tables allow web developers to arrange data into rows and columns.
Company Contact Country
Germany
Futterkiste Anders
Francisco
comercial Mexico
Chang
Moctezuma
Ernst Handel Austria
Mendel
Island Trading UK
Bennett
Yoshi
Bacchus Canada
Tannamuri
Winecellars
Giovanni
Alimentari Italy
Rovelli
RiunitiDefine an HTML Table
The <table> tag defines an HTML table.
a <th> tag. Each table data/cell is defined with a <td> tag.By default, the text in <th> elements are bold and centered.
By default, the text in <td> elements are regular and left-aligned.
A simple HTML table:
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables,
etc.HTML Table - Add a Border
To add a border to a table, use the CSS border property:
Example
table, th, td {
border: 1px solid black;
}HTML Table - Collapsed Borders
To let the borders collapse into one border, add the CSS border-
collapse property:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}HTML Table - Add Cell Padding
Cell padding specifies the space between the cell content and its borders.
padding.To set the padding, use the CSS padding property:
th, td {
padding: 15px;
}
HTML Table - Left-align Headings
By default, table headings are bold and centered.To left-align the table headings, use the CSS text-align property:
th {
text-align: left;
}HTML Table - Add Border Spacing
Border spacing specifies the space between the cells.To set the border spacing for a table, use the CSS border-spacing property:
table {
border-spacing: 5px;
}Note: If the table has collapsed borders, border-spacing has no effect.
HTML Table - Cell that Spans Many Columns
To make a cell span more than one column, use the colspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>HTML Table - Cell that Spans Many Rows
To make a cell span more than one row, use the rowspan attribute:
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
HTML Table - Add a Caption
To add a caption to a table, use the <caption> tag:
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>Note: The <caption> tag must be inserted immediately after the <table> tag.
A Special Style for One Table
To define a special style for one particular table, add an id attribute to the
table:
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>Now you can define a special style for this table:
#t01 {
width: 100%;
background-color: #f1f1c1;
}And add more styles:
#t01 tr:nth-child(even) {
background-color: #eee;
}
#t01 tr:nth-child(odd) {
background-color: #fff;
}
#t01 th {
color: white;
background-color: black;
}
Use the HTML <table> element to define a table
Use the HTML <tr> element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
Use the HTML <caption> element to define a table caption
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table
An unordered HTML list:
Item
Item
ItemAn ordered HTML list:
2. Second item
3. Third item
4. Fourth itemUnordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items will be marked with numbers by default:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>HTML Description Lists
HTML also supports description lists.A description list is a list of terms, with a description of each term.
and the <dd> tag describes each term:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML List Tags <ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description
list <dd> Describes the term in a
description listThe HTML <ul> tag defines an unordered (bulleted) list.
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the list item
marker. It can have one of the following values: disc Sets the list item marker to a
bullet (default) circle Sets the list item marker to a
circle squar Sets the list item marker to a
e square
none The list items will not be
marked
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Nested HTML Lists
Lists can be nested (list inside list):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
images and links, etc.The HTML <ul> tag defines an unordered (bulleted) list.
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the list item
marker. It can have one of the following values: disc Sets the list item marker to a
bullet (default) circle Sets the list item marker to a
circle squar Sets the list item marker to a
e square none The list items will not be
marked
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>Nested HTML Lists
Lists can be nested (list inside list):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
images and links, etc.Horizontal List with CSS
HTML lists can be styled in many different ways with CSS.One popular way is to style a list horizontally, to create a navigation menu:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
background-color: #111111;
}
</style>
</head>
<body>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</html>Tip: You can learn much more about CSS in our CSS Tutorial.
Use the HTML <ul> element to define an unordered list
Use the CSS list-style-type property to define the list item marker
Use the HTML <li> element to define a list item
Lists can be nested
List items can contain other HTML elements
Use the CSS property float:left to display a list horizontally
HTML List Tags <ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
The HTML <ol> tag defines an ordered list. An ordered list can be numerical
or alphabetical.
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items will be marked with numbers by default:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker: type="1" The list items will be
numbered with numbers
(default) type="A The list items will be
" numbered with uppercase
letters type="a" The list items will be
numbered with lowercase
letters type="I" The list items will be
numbered with uppercase
roman numbers type="i" The list items will be
numbered with lowercase
roman numbers
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Roman Numbers:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>Lowercase Roman Numbers:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>Control List Counting
By default, an ordered list will start counting from 1. If you want to start
counting from a specified number, you can use the start attribute:
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Nested HTML Lists
Lists can be nested (list inside list):
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
images and links, etc.
Use the HTML <ol> element to define an ordered list
Use the HTML type attribute to define the numbering type
Use the HTML <li> element to define a list item
Lists can be nested
List items can contain other HTML elementsHTML List Tags
<ul> Defines an unordered list
<ol> Defines an ordered list <li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description
list <dd> Describes the term in a
description list
❮ PreviousNext ❯HTML also supports description lists.
HTML Description Lists
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Use the HTML <dl> element to define a description list
Use the HTML <dt> element to define the description term
Use the HTML <dd> element to describe the term in a description listHTML Block and Inline Elements
❮ PreviousNext ❯
element it is.There are two display values: block and inline.
Block-level Elements
A block-level element always starts on a new line.
the left and right as far as it can).
element does not.The <div> element is a block-level element.
<div>Hello World</div>Here are the block-level elements in HTML:
<footer>
An inline element does not start on a new line.An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
Example
<span>Hello World</span>Here are the inline elements in HTML:
<q>Note: An inline element cannot contain a block-level element!
The <div> Element
The <div> element is often used as a container for other HTML elements.The <div> element has no required attributes, but style, class and id are
common.
content:
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city
in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
</div>The <span> Element
The <span> element is an inline container used to mark up a part of a text, or a
part of a document.The <span> element has no required attributes, but style, class and id are
common.
the text:
<p>My mother has <span style="color:blue;font-
weight:bold">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>
There are two display values: block and inline
A block-level element always starts on a new line and takes up the full
width available
An inline element does not start on a new line and it only takes up as
much width as necessary
The <div> element is a block-level and is often used as a container for
other HTML elements
The <span> element is an inline container used to mark up a part of a
text, or a part of a document
HTML File Paths
❮ PreviousNext ❯File Path Examples
n <img src="picture.jpg"> The
"picture.jpg
" file is
located in
the same
folder as
the current
page
src="images/picture.jpg" "picture.jpg
> " file is
located in
the images
folder in
the current
folder
<img The
src="/images/picture.jpg "picture.jpg
"> " file is
located in
the images
folder at
the root of
the current
web
src="../picture.jpg"> "picture.jpg
" file is
located in
the folder
one level
up from
the current
folderHTML File Paths
A file path describes the location of a file in a web site's folder structure.File paths are used when linking to external files, like:
Images
Style sheets
JavaScripts
Absolute File Paths
An absolute file path is the full URL to a file:
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">The <img> tag is explained in the chapter: HTML Images.
Relative File Paths
A relative file path points to a file relative to the current page.
located at the root of the current web:
<img src="/images/picture.jpg" alt="Mountain">
located in the current folder:
<img src="images/picture.jpg" alt="Mountain">
located in the folder one level up from the current folder:
<img src="../images/picture.jpg" alt="Mountain">
Try it Yourself »
It is best practice to use relative file paths (if possible).
base URL. All links will work on your own computer (localhost) as well as on
your current public domain and your future public domains.HTML Layout Elements and Techniques
❮ PreviousNext ❯Websites often display content in multiple columns (like a magazine or a
newspaper).
London
Paris
Tokyo
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its
history going back to its founding by the Romans, who named it Londinium.HTML Layout Elements
HTML has several semantic elements that define the different parts of a web
page:<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on
demand
<summary> - Defines a heading for the <details> elementHTML Responsive Web Design
❮ PreviousNext ❯
Responsive web design is about creating web pages that look good on all
devices!
and viewports.What is Responsive Web Design?
Responsive Web Design is about using HTML and CSS to automatically resize,
hide, shrink, or enlarge, a website, to make it look good on all devices
(desktops, tablets, and phones):Setting The Viewport
To create a responsive website, add the following <meta> tag to all your web
pages:
Example
<meta name="viewport" content="width=device-width, initial-scale=1.0">
on how to control the page's dimensions and scaling.
web page with the viewport meta tag: Without the viewport meta tag:
With the viewport meta tag:
two links above to see the difference.
Responsive images are images that scale nicely to fit any browser size.Using the width Property
If the CSS width property is set to 100%, the image will be responsive and scale
up and down:
Example
<img src="img_girl.jpg" style="width:100%;">
its original size. A better solution, in many cases, will be to use the max-
width property instead.
Using the max-width Property
If the max-width property is set to 100%, the image will scale down if it has to,
but never scale up to be larger than its original size:
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
Show Different Images Depending on Browser Width
The HTML <picture> element allows you to define different images for different
browser window sizes.
the width:
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>Responsive Text Size
The text size can be set with a "vw" unit, which means the "viewport width".
Resize the browser window to see how the text size scales.
Example
<h1 style="font-size:10vw">Hello World</h1>Viewport is the browser window size. 1vw = 1% of viewport width. If the
viewport is 50cm wide, 1vw is 0.5cm.HTML Computer Code Elements
❮ PreviousNext ❯
<code>
x = 5;
y = 6;
z = x + y;
</code>HTML <kbd> For Keyboard Input
The HTML <kbd> element is used to define keyboard input. The content inside is
displayed in the browser's default monospace font.
Define some text as keyboard input in a document:<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
Result:Save the document by pressing Ctrl + S
HTML <samp> For Program Output
The HTML <samp> element is used to define sample output from a computer
program. The content inside is displayed in the browser's default monospace
font.
Define some text as sample output from a computer program in a document:<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>Message from my computer:
File not found.
Press F1 to continueHTML <code> For Computer Code
The HTML <code> element is used to define a piece of computer code. The
content inside is displayed in the browser's default monospace font.
Example
Define some text as computer code in a document:
x = 5;
y = 6;
z = x + y;
</code>
x = 5; y = 6; z = x + y;
breaks.To fix this, you can put the <code> element inside a <pre> element:
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
x = 5;
y = 6;
z = x + y;HTML <var> For Variables
The HTML <var> element is used to define a variable in programming or in a
mathematical expression. The content inside is typically displayed in italic.
Example
Define some text as variables in a document:<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>,
where <var>b</var> is the base, and <var>h</var> is the vertical
height.</p>
height.
The <kbd> element defines keyboard input
The <samp> element defines sample output from a computer program
The <code> element defines a piece of computer code
The <var> element defines a variable in programming or in a
mathematical expression
The <pre> element defines preformatted text
❮ PreviousNext ❯Semantic elements = elements with a meaning.
What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the
developer.Examples of non-semantic elements: <div> and <span> - Tells nothing about
its content.Examples of semantic elements: <form>, <table>, and <article> - Clearly
defines its content.Semantic Elements in HTML
Many web sites contain HTML code like: <div id="nav"> <div class="header">
<div id="footer"> to indicate navigation, header, and footer.
parts of a web page:
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
HTML <section> Element
The <section> element defines a section in a document.According to W3C's HTML documentation: "A section is a thematic grouping of
content, typically with a heading."
contact information.
Two sections in a document:
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization
working on issues regarding the conservation, research and restoration of
the environment, formerly named the World Wildlife Fund. WWF was founded
in 1961.</p>
</section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of
WWF originated from a panda named Chi Chi that was transferred from the
Beijing Zoo to the London Zoo in the same year of the establishment of
WWF.</p>
</section>What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the
developer.Examples of non-semantic elements: <div> and <span> - Tells nothing about its
content.Examples of semantic elements: <form>, <table>, and <article> - Clearly defines
its content.Semantic Elements in HTML
Many web sites contain HTML code like: <div id="nav"> <div class="header">
<div id="footer"> to indicate navigation, header, and footer.
parts of a web page:
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
HTML <section> Element
The <section> element defines a section in a document.According to W3C's HTML documentation: "A section is a thematic grouping of
content, typically with a heading."
contact information.
Two sections in a document:
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization
working on issues regarding the conservation, research and restoration of
the environment, formerly named the World Wildlife Fund. WWF was founded
in 1961.</p>
</section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of
WWF originated from a panda named Chi Chi that was transferred from the
Beijing Zoo to the London Zoo in the same year of the establishment of
WWF.</p>
</section>Nesting <article> in <section> or Vice Versa?
The <article> element specifies independent, self-contained content.The <section> element defines section in a document.
cannot!So, you will find HTML pages with <section> elements
containing <article> elements, and <article> elements
containing <section> elements.HTML <header> Element
The <header> element represents a container for introductory content or a set of
navigational links.A <header> element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship informationNote: You can have several <header> elements in one HTML document.
However, <header> cannot be placed within a <footer>, <address> or
another <header> element.
A header for an <article>:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural
environment,
and build a future in which humans live in harmony with nature.</p>
</article>HTML <footer> Element
The <footer> element defines a footer for a document or section.A <footer> element typically contains:
copyright information
contact information
sitemap
back to top links
related documentsYou can have several <footer> elements in one document.
A footer section in a document:
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
HTML <nav> Element
The <nav> element defines a set of navigation links.Notice that NOT all links of a document should be inside a <nav> element.
The <nav> element is intended only for major block of navigation links.
determine whether to omit the initial rendering of this content.
A set of navigation links:
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>HTML <aside> Element
The <aside> element defines some content aside from the content it is placed in
(like a sidebar).The <aside> content should be indirectly related to the surrounding content.
Display some content aside from the content it is placed in:
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting
attractions, international pavilions, award-winning fireworks and
seasonal special events.</p>
</aside>
Use CSS to style the <aside> element:
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring
exciting attractions, international pavilions, award-winning fireworks
and seasonal special events.</p>
</aside>
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
</html>
Try it Yourself »HTML <figure> and <figcaption> Elements
The <figure> tag specifies self-contained content, like illustrations, diagrams,
photos, code listings, etc.The <figcaption> tag defines a caption for a <figure> element.
The <figcaption> element can be placed as the first or as the last child of
a <figure> element.The <img> element defines the actual image/illustration.
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>Why Semantic Elements?
According to the W3C: "A semantic Web allows data to be shared and reused
across applications, enterprises, and communities."Semantic Elements in HTML
Below is a list of some of the semantic elements in HTML.
<article> Defines independent,
self-contained content<aside> Defines content aside
from the page content<details> Defines additional
details that the user
can view or hide<figcaption Defines a caption for a
> <figure> element<figure> Specifies self-contained
content, like
illustrations, diagrams,
photos, code listings,
etc.<footer> Defines a footer for a
document or section<header> Specifies a header for a
document or section<main> Specifies the main
content of a document
<mark> Defines
marked/highlighted text<nav> Defines navigation links
<section> Defines a section in a
document<summary> Defines a visible
heading for a <details>
element<time> Defines a date/time
You might also like
