Scribd
Upload
17 views

4 HTML

The document discusses various HTML tags and links. It provides information on: 1) HTML comments, CSS comments, and JavaScript comments and how they are defined. 2) File paths, including absolute and relative file paths, and best practices for using relative paths. 3) Common HTML formatting tags like <b>, <i>, <em>, etc and how they are used to change text formatting. 4) The <img> tag and its attributes like src, alt, width, and height for inserting and formatting images. 5) HTML links using the <a> tag and attributes like href, target, name to link to other pages or sections within the same page.

Uploaded by

Ali Hassan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
17 views

4 HTML

The document discusses various HTML tags and links. It provides information on: 1) HTML comments, CSS comments, and JavaScript comments and how they are defined. 2) File paths, including absolute and relative file paths, and best practices for using relative paths. 3) Common HTML formatting tags like <b>, <i>, <em>, etc and how they are used to change text formatting. 4) The <img> tag and its attributes like src, alt, width, and height for inserting and formatting images. 5) HTML links using the <a> tag and attributes like href, target, name to link to other pages or sections within the same page.

Uploaded by

Ali Hassan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 96

HTML Tags

HTML CSS Javascript Comments


• HTML Comments
• An HTML comment begins with <!-- and ends with -->.
• CSS Comments
• A CSS comment start with "/*" and ends with "*/" in css file.
• JavaScript Comments
• Single line comment start with //.
• Multi line comment start with /* and end with */.
HTML 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:
• Web pages
• Images
• Style sheets
• JavaScripts
• Types of paths
• Absolute File Paths
• Relative File Paths
Absolute File Paths
• An absolute file path is the full URL to a file:
<img src="https://www.webName.com/images/picture.jpg" alt="Mountain">
Relative File Paths
• A relative file path points to a file relative to the current page.

• The file path points to a file in the images folder located at the root of
the current web.
<img src="/images/picture.jpg" alt="Mountain">

• The file path points to a file in the images folder located in the current
folder.
<img src="images/picture.jpg" alt="Mountain">
Relative File Paths
• The file path points to a file in the images folder located in the folder
one level up from the current folder.
<img src="../images/picture.jpg" alt="Mountain">

• Best Practice
• It is best practice to use relative file paths (if possible).
• When using relative file paths, your web pages will not be bound to your
current base URL. All links will work on your own computer (localhost) as well
as on your current public domain and your future public domains.
Relative Path Activity
• Html2.html
• Web
• Home
• M1
• Html1.html

• Img1.jpg
• Images
• Img2.jpg
• MyImage
• Img3.jpg
Paragraph Tag
• Defines a paragraph into web document. HTML paragraph define using <p></p> tag.

<!DOCTYPE html>
<html>
<head>
<title>HTML p tag</title>
</head>
<body>
<p></p>
<p>Here is define paragraph.</p>
<p>Here is define another paragraph.</p>
</body>
</html>
Header Tag h1 to h6
• HTML header tag h1 is used for specifying heading level 1. There are 6
levels of headings (h1 - h6) with h1 the most important and h6 the
least important.
• Browsers are supported various headings in different sizes - with h1
being the largest and h6 being the smallest.
Header Tag h1 to h6
<html>
<head>
<title>HTML Heading Tag</title>
</head>
<body>
<h1>Heading h1<h1>
<h2>Heading h2<h2>
<h3>Heading h3<h3>
<h4>Heading h4<h4>
<h5>Heading h5<h5>
<h6>Heading h6<h6>
</body>
</html>
HTML Formatting Tags
• <b> Bold Text • <sup> Superscript Text
• <big> Big Text • <del> Delete Text
• <center> Center Text • <s> Strike Text
• <em> Emphasized Text • <strike> Strike Text
• <i> Italic Text • <u> Underline Text
• <small> Small Text • <tt> Teletype Text
• <strong> Strong Text • <blockquote> Long Quotation
• <sub> Subscript Text • <q> Short Quotation Text
HTML Formatting Tags
<html>
<head>
<title>HTML Heading Tag</title>
</head>
<body>
<b>Bold Text: An example of Bold Text</b>
<br/><br/>
<big>Big Text:An example of Big Text</big>
<br/><br/>
<center>Center Text: An example of
Center Text</center>
<br/><br/>
<em>Emphasized Text: An example of Emphasized Text</em>
<br/><br/>
HTML Formatting Tags
<i>Italic Text: An example of Italic Text</i>
<br/><br/>
<small>Small Text: An example of Small Text</small>
<br/><br/>
<strong>Strong Text: An example of Strong Text</strong>
<br/><br/>
<sub>Subscript Text: An example of Subscript Text</sub>
<br/><br/>
<sup>Superscript Text: An example of Superscript Text</sup>
<br/><br/>
<del>Delete Text</del> An example of Delete Text
<br/><br/>
HTML Formatting Tags
<s>Strike Text</s> An example of Strike Text
<br/><br/>
<strike>Strike Text</strike> An example of Strike Text
<br/><br/>
<u>Underline Text</u> An example of Underline Text
<br/><br/>
<tt>Teletype Text</tt> An example of Teletype Text
<br/><br/>
<blockquote>Long Quotation</blockquote>
<br/><br/>
<q>Short Quotation Text</q>
</body>
</html>
HTML Formatting Tags
HTML Formatting Tags
HTML Image Tag
• HTML <img /> tag is insert image into a web document.
• HTML image path define/declare inside <img /> tag.
• The <img /> tag is empty tag, that mean's no closing tag.
• <img /> tag have some attributes are use for display image on web
page.
• The src attribute, src stands for "source", that is path of image URL.
• Alt Attribute used to define an "alternate text" for an image. This
specifies text to be identified in the image name.
• Width and Height specifies the size of image to display on webpage.
Image Tag Attribute
• Src
• Required, Image path should be absolute path.
• Width
• Specifies the Width to display the image.
• Height
• Specifies the Height to display the image.
• Align
• Specifies the image align side.
• Border
• Specifies the image border size.
• Alt
• Required Attribute. Specifies text to be identify the image.
Image Wrap around
<html>
<head>
</head>
<body>
<img src="../../images/img_nat.png" width="120" height="80" alt="Natural" align="left"/>
<p>Natural resources (economically referred to as land or raw materials) occur naturally within
environments that exist relatively undisturbed by mankind, in a natural form. A natural resource is
often characterized by amounts of biodiversity existent in various ecosystems. Natural
<br/>
resources are derived from the environment. Many of them are essential for our survival while others
are used for satisfying our wants. Natural resources may be further classified in different ways.</p>
</body>
</html>
Image Wrap around
Image Wrap around
• <html>
• <head>
• </head>
• <body>
• <img src="../../images/img_nat.png" width="120" height="80" alt="Natural" align="left"/>
• <p>Natural resources (economically referred to as land or raw materials) occur naturally within
environments that exist relatively undisturbed by mankind, in a natural form. A natural resource is
often characterized by amounts of biodiversity existent in various ecosystems. Natural
• <br clear="all" />
• resources are derived from the environment. Many of them are essential for our survival while
others are used for satisfying our wants. Natural resources may be further classified in different
ways.</p>
• </body>
• </html>
Image Wrap around
HTML Links
• HTML links are hyperlinks.
• You can click on a link and jump to another document.
• When you move the mouse over a link, the mouse arrow will turn into a
little hand.
• The HTML <a> tag defines a hyperlink.

<a href="url">link text</a>

• The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.
HTML Links
• The link text is the part that will be visible to the reader.
• Clicking on the link text, will send the reader to the specified URL
address.
• 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 red
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.
• _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
HTML Links
• HTML Internal Link (bookmark)
• HTML External Links
• HTML Mailto Link
• HTML Subdirectory Link
HTML Internal Link
• HTML internal link is linked within the same web page. This link can
be an absolute path or relative path.
• HTML internal link name is followed by the hash sign(#). You have to
assign an id to refer section of your page, which is referred to as an
internal link to the same page.
• When you click on an internal anchor link, you will scroll automatically
to the referred section and display it on your browser.
• Notes: You can not use name attribute instead of id attribute.
Because name attribute not supported in HTML5. Use the id attribute
instead of.
HTML Internal Link
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#lession1">Lession.1</a><br />
<a href="#lession2">Lession.2</a><br />
<a href="#lession3">Lession.3</a><br />
<a href="#lession4">Lession.4</a><br />
<br />
<a id="lession1">Introduction of Lession.1</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
HTML Internal Link
<br />
<br />
<div id="lession2">Introduction of Lession.2</div>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<p id="lession3">Introduction of Lession.3</p>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
HTML Internal Link
<br />
<br />
<article id="lession4">Introduction of Lession.4</article>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
</body>
</html>
HTML Internal Link
Linking to parts of other documents
• You can set target to specific sections of the other pages by adding
the #id at the end of the href. After adding hash mark is known as a
"fragment identifier".

<a href="https:CompleteURL#section-id“/>
HTML External Links
• HTML Link - External HTML Links is linked to external web page. This
link is may be absolute path or relative link path.
• <a> tag is used for anchor name which is referred link to another web
page.
• External link is great future to drive a webpage one to another and
useful for surf many webpage in website.
HTML Mailto Link
• 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:[email protected]">Send email</a>


HTML Subdirectory Link
• HTML directories are managed in logical hierarchical structure.

• Main Level
http://www.domain.com/

• First Level of Sub-Directories


http://www.domain.com/subdir1/

• Second Level of Sub-Directories


http://www.domain.com/subdir1/subdir2/
HTML Subdirectory Link
• Linking to a document in one level above directory (subdirectory) on
your current web page:
• <a href="../firstpage.aspx">

• Linking to a document in a two level above directory (subdirectory) on


your current web page:
• <a href="../../firstpage.aspx">
HTML Links - Use an Image as a Link
• To use an image as a link, just put the <img> tag inside the <a> tag

<a href="default.asp">
<img src="smiley.png" alt="HTML Links" style="width:42px;height:42px;">
</a>
Button as a Link
• To use an HTML button as a link, you have to add some JavaScript
code.
• JavaScript allows you to specify what happens at certain events, such
as a click of a button.

<button onclick="document.location='default.asp’”>Button as link</button>


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://URL/" title="Go to URL to visit our website">Visit Website</a>


HTML Lists
• HTML lists allow web developers to group a set of related items in
lists.
• HTML Ordered List
• HTML Unordered List
• HTML Definition List
HTML Ordered List
• HTML <ol> tag define ordered list(list of Ordered items).
• HTML <li> tag specified list items and its attribute help to change the type of order list.
• <ol> Tag Attributes
• Type
• 1 Arabic number
• a Lowercase alphabet
• A Uppercase alphabet
• i Lowercase roman numeral
• I Uppercase roman numeral
• Default start value is "1".
• Start
• “1” define start sequence number of the list.
HTML Ordered List
<ol type="A" start ="1">
<html>
<li>Upper Alphabet</li>
<head> <li>Upper Alphabet</li>
</head> </ol>
<body>
<ol type="i" start ="1">
<ol type="1" start="1">
<li>Lower Roman numeral</li>
<li>Arabic Number</li> <li>Lower Roman numeral</li>
<li>Arabic Number</li> </ol>
</ol>
<ol type="I" start ="1">
<li>Upper Roman numeral</li>
<ol type="a" start ="1"> <li>Upper Roman numeral</li>
<li>Lower Alphabet</li> </ol>
<li>Lower Alphabet</li> </body>
</html>
</ol>
HTML Ordered List
HTML Unordered List
• HTML <ul> tag define Unordered List(list of Unordered items).
• It is use to display list of item with bulleted style.
• <ul> Tag Attributes
• Type
• disk
• circle
• square
• Default value is "disk".
Order and Unorder List
Books
1. Web
A. ChapterNo-1
i. TopicNo-1
• ArticleNo-1
 ArticleNo-2
ii. TopicNo-2
iii. TopicNo-3
B. ChapterNo-2
C. ChapterNo-3
iv. TopicNo-4
v. TopicNo-5
vi. TopicNo-6
2. PF
3. OOP
a. ChapterNo-1
b. ChapterNo-2
c. ChapterNo-3
HTML Unordered List
<html> <ul type="square">
<head> <li>Square Bullet</li>
<li>Square Bullet</li>
</head> </ul>
<body> </body>
<ul type="disk"> </html>

<li>Disk Bullet</li>
<li>Disk Bullet</li>
</ul>
<ul type="circle">
<li>Circle Bullet</li>
<li>Circle Bullet</li>
</ul>
HTML Definition List
• Definition list is use for create glossary list. Definition list are stars
with <dl> tag and close with </dl> tag.
• <dl> tag have two tag <dt> and <dd> defined inside tag.
• <dl> tag is a empty tag. Its use to define definition list. It does not
have any attributes.
• <dt> tag is a empty tag. Its use to define definition team. It does not
have any attributes.
• <dd> tag is a empty tag. Its use to define definition define. It does not
have any attributes.
HTML Definition List
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<dl>
<dt>URL</dt>
<dd>Universal Resource Locator</dd>
<dt>W3C</dt>
<dd>World Wide Web Consortium</dd>
<dt>PNG</dt>
<dd>Portable Network Graphics</dd>
</dl>
</body>
</html>
HTML Tables
• HTML tables allow web developers to arrange data into rows and
columns.
• The <table> tag defines an HTML table.
• Each table row is defined with a <tr> tag. Each table header is defined
with 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.
HTML Tables
<!DOCTYPE html>
<tr>
<html>
<td>Eve</td>
<body>
<td>Jackson</td>
<h2>Basic HTML Table</h2> <td>94</td>
<table style="width:100%"> </tr>
<tr> <tr>
<th>Firstname</th> <td>John</td>
<th>Lastname</th> <td>Doe</td>
<th>Age</th> <td>80</td>
</tr> </tr>
<tr> </table>
<td>Jill</td>
<td>Smith</td> </body>
</html>
<td>50</td>
</tr>
HTML Tables
HTML Table - Cell that Spans Many
Columns
<body>
<!DOCTYPE html> <h2>Cell that spans two columns</h2>
<html> <p>To make a cell span more than one column, use the colspan attribute.</p>
<head>
<style> <table style="width:100%">
table, th, td { <tr>
<th>Name</th>
border: 1px solid black;
<th colspan="2">Telephone</th>
border-collapse: collapse; </tr>
} <tr>
th, td { <td>Bill Gates</td>
padding: 5px; <td>55577854</td>
text-align: left; <td>55577855</td>
</tr>
}
</table>
</style> </body>
</head> </html>
HTML Table - Cell that Spans Many
Columns
HTML Table - Cell that Spans Many Rows
<body>
<!DOCTYPE html> <h2>Cell that spans two rows</h2>
<html> <p>To make a cell span more than one row, use the rowspan attribute.</p>
<head>
<table style="width:100%">
<style> <tr>
table, th, td { <th>Name:</th>
border: 1px solid black; <td>Bill Gates</td>
border-collapse: collapse; </tr>
} <tr>
<th rowspan="2">Telephone:</th>
th, td {
<td>55577854</td>
padding: 5px; </tr>
text-align: left; <tr>
} <td>55577855</td>
</style> </tr>
</head> </table>
</body>
</html>
HTML Table - Cell that Spans Many Rows
HTML Table Style
• Add a Border
• table, th, td {
border: 1px solid black;
}
• Collapsed Borders
• table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
• Add Cell Padding
• th, td {
padding: 15px;
}
HTML Table Style
• Left-align Headings
• th {
text-align: left;
}
• Add Border Spacing
• table {
border-spacing: 5px;
}
• Add a Caption
• The <caption> tag must be inserted immediately after the <table> tag.
HTML Block and Inline Elements
• Every HTML element has a default display value, depending on what
type of element it is.
• There are two display values:
• Block
• Inline.
Block-level Elements
• A block-level element always starts on a new line.
• A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
• A block level element has a top and a bottom margin, whereas an
inline element does not.
• The <div> element is a block-level element.
• The <div> element is often used as a container for other HTML
elements.
Block-level elements in HTML
• <address> • <fieldset> • <nav>
• <article> • <figcaption> • <noscript>
• <aside> • <figure> • <ol>
• <blockquote> • <footer> • <p>
• <form> • <pre>
• <canvas>
• <h1>-<h6> • <section>
• <dd> • <header> • <table>
• <div> • <hr> • <tfoot>
• <dl> • <li> • <ul>
• <dt> • <main> • <video>
Inline Elements
• 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.
• The <span> element is an inline container used to mark up a part of a
text, or a part of a document.
• Note: An inline element cannot contain a block-level element!
Inline elements in HTML
• <a> • <em> • <select>
• <abbr> • <i> • <small>
• <acronym> • <img> • <span>
• <b> • <input> • <strong>
• <bdo> • <kbd> • <sub>
• <label> • <sup>
• <big>
• <map> • <textarea>
• <br>
• <object> • <time>
• <button> • <output> • <tt>
• <cite> • <q> • <var>
• <code> • <samp>
• <dfn> • <script>
HTML Iframes
• The HTML <iframe> tag specifies an inline frame.
• An inline frame is used to embed another document within the
current HTML document.
• Syntax
<iframe src="url" title="description">
• It is a good practice to always include a title attribute for
the <iframe>. This is used by screen readers to read out what the
content of the iframe is.
• Use the height and width attributes to specify the size of the iframe.
HTML Iframes
• By default, an iframe has a border around it.
• To remove the border, add the style attribute and use the
CSS border property
• An iframe can be used as the target frame for a link.
• The target attribute of the link must refer to the name attribute of the
iframe.

<iframe src=”source" name="iframe_a" title="Iframe Example"></iframe>

<p><a href=”URL" target="iframe_a">Domain.com</a></p>


HTML Frames
• HTML Frame used to split the browser window in several individual
frames that can contain a separate HTML web document.
• Frame is use to improve appearance and usability of a site.
• HTML document within frame include a other web pages link can be
opened in the desired frame.
Advantages of Frames
• Frame Provides technical sophisticated appearance to the web site.
• It facility to reduce downloading time and improves the usability of
the website.
• Frames generally include navigation link, header or footers, which
help user to find and navigate to required information.
• It separates content of website from navigation elements, which is
useful for website maintenance and content modification.
Disadvantages of Frames

• The web developer must be track of more HTML documents linked


with main frame.
• It is difficult to print the entire page, which is developed using frame.
Frameset and Frames
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "https://www.webName.com/html/top_frame.htm" />
<frame name = "center" src = "https://www.webName.com/html/main_frame.htm" />
<frame name = "right" src = "https://www.webName.com/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
• Not Supported in HTML5.
• The <frameset> tag was used in HTML 4 to define a frameset.
HTML Computer Code Elements
• HTML contains several elements for defining user input and computer
code.
• <kbd> For Keyboard Input
• <samp> For Program Output
• <code> For Computer Code
• <var> For Variables
<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.

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

Output: Save the document by pressing Ctrl + S


<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.

<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 continue
<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.
<code> For Computer Code
<!DOCTYPE html>
<html>
<body>
<h2>The code Element</h2>
<p>Programming code example:</p>
<code>
x = 5; Notice that the <code> element
does not preserve extra
y = 6; whitespace and line-breaks.
z = x + y;
</code>
</body>
</html>
<code> For Computer Code
<!DOCTYPE html>
<html>
<body>
<p>The code element does not preserve whitespace and line-breaks.</p>
<p>To fix this, you can put the code element inside a pre element:</p>
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
</body>
</html>
<code> For Computer Code
<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.

<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>

OutPut: The area of a triangle is: 1/2 x b x h, where b is the base, and h is the
vertical height.
HTML Entities
• Reserved characters in HTML must be replaced with character
entities.
• Some characters are reserved in HTML.
• If you use the less than (<) or greater than (>) signs in your text, the
browser might mix them with tags.
• Character entities are used to display reserved characters in HTML.
HTML Entities
HTML Symbols
• Symbols that are not present on your keyboard can also be added by
using entities.
• Many mathematical, technical, and currency symbols, are not present
on a normal keyboard.
• To add such symbols to an HTML page, you can use the entity name
or the entity number (a decimal or a hexadecimal reference) for the
symbol.
HTML Symbols
HTML Semantic Elements
• A semantic element clearly describes its meaning to both the browser
and the developer.
• non-semantic elements:
• <div> and <span> - Tells nothing about its content.
• semantic elements:
• <form>, <table>, and <article> - Clearly defines its content.
Semantic Elements in HTML
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."
• A web page could normally be split into sections for introduction,
content, and contact information.
HTML <section> Element
<!DOCTYPE html>
<html>
<body>
<section>
<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>
<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>
</body>
</html>
HTML <section> Element
HTML <article> Element
• The <article> element specifies independent, self-contained content.
• An article should make sense on its own, and it should be possible to
distribute it independently from the rest of the web site.
HTML <article> Element
<!DOCTYPE html>
<html>
<body>
<h1>The article element</h1>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January,
2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</body>
</html>
HTML <article> Element
Nesting <article> in <section> or Vice Versa
• The <article> element specifies independent, self-contained content.
• The <section> element defines section in a document.
• Can we use the definitions to decide how to nest those elements? No,
we cannot!
• So, you will find HTML pages with <section> element
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 information
• Note: You can have several <header> elements in one HTML
document. However, <header> cannot be placed within
a <footer>, <address> or another <header> element.
HTML <footer> Element
• The <footer> element defines a footer for a document or section.
• A <footer> element typically contains:
• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents
HTML <nav> Element
• The <nav> element defines a set of navigation links.
• NOT all links of a document should be inside a <nav> element.
The <nav> element is intended only for major block of navigation
links.
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.
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.
HTML <figure> and <figcaption> Elements
<!DOCTYPE html>
<html>
<body>
<h2>Places to Visit</h2>
<p>Puglia's most famous sight is the unique conical houses (Trulli) found in the area around
Alberobello, a declared UNESCO World Heritage Site.</p>
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
</body>
</html>
HTML <figure> and <figcaption> Elements

You might also like