Scribd
Upload
15 views8 pages

HTML Elements and Tags-2430

The document discusses HTML elements and tags. It explains that a webpage contains various HTML elements like headings, paragraphs and images. It also notes that HTML elements are represented by tags and consist of opening and closing tags surrounding content. Finally, it provides examples of common HTML element structures.

Uploaded by

carry9224
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views8 pages

HTML Elements and Tags-2430

The document discusses HTML elements and tags. It explains that a webpage contains various HTML elements like headings, paragraphs and images. It also notes that HTML elements are represented by tags and consist of opening and closing tags surrounding content. Finally, it provides examples of common HTML element structures.

Uploaded by

carry9224
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

HTML Elements and Tags

● A webpage can be seen as a collection of HTML elements. For example, a


web page is made up of various headings, paragraphs, images, links, etc. All
of these can be seen as HTML elements.
● HTML elements are represented using HTML tags.
● An HTML element is a collection of an opening tag, a closing tag, the content
within these two tags, and its attributes. (You’ll learn about attributes in further
lectures).

● Although some elements don’t require a closing tag and hence no content in
between. These are called empty elements.

They are made up of one tag which is referred to as a self-closing tag. For
example, <br> tag.

● Generic HTML element structure


<tagName> CONTENT </tagName>

For example,
<h1> Hello World <h1>
Here <h1> is the opening tag, </h1> is the closing tag, ‘Hello World’ is the
content. All of these together represent an HTML element ‘heading’.

Notes:

● Nested HTML elements: The content of an HTML element can be plain text,
image, or can even be other HTML elements. An HTML element can include
several other HTML elements as its content.
For example,

<div>
<p>This is a paragraph element inside a div element</p>
</div>

● But some HTML elements are not directly seen on the webpage but they do
exist as they hold some special meaning.
For example, <link> tag is used to link an HTML file with other files such as
CSS, js files, etc. You’ll learn more examples in further lectures!
CONTENT SECTIONING

Content sectioning elements allow you to organize the document content into logical
pieces. Use the sectioning elements to create a broad outline for your page content,
including header and footer navigation, and heading elements to identify sections of

<base> Specifies the base URL to use for all relative URLs in a document. There can
be only one such element in a document.
<head> Contains machine-readable information (metadata) about the document, like
its title, scripts, and style sheets.
<link> Specifies relationships between the current document and an external resource.
This element is most commonly used to link to CSS but is also used to establish
site icons (both "favicon" style icons and icons for the home screen and apps on
mobile devices) among other things.
<meta> Represents metadata that cannot be represented by other HTML meta-related
elements, like <base>, <link>, <script>, <style> and <title>.
<style> Contains style information for a document or part of a document. It contains CSS,
which is applied to the contents of the document containing this element.
<title> Defines the document's title that is shown in a browser's title bar or a
page's tab. It only contains text; tags within the element are ignored.
TEXT CONTENT

Use HTML text content elements to organize blocks or sections of content placed
between the opening <body> and closing </body> tags. Important
for accessibility and SEO, these elements identify the purpose or structure of that content.

<blockquote> Indicates that the enclosed text is an extended quotation. Usually, this is
rendered visually by indentation. A URL for the source of the quotation
may be given using the cite attribute, while a text representation of the
source can be given using the <cite> element.
<dd> Provides the description, definition, or value for the preceding term
(<dt>) in a description list (<dl>).
<div> The generic container for flow content. It has no effect on the content or
layout until styled in some way using CSS (e.g., styling is directly applied
to it, or some kind of layout model like flexbox is applied to its parent
element).
<dl> Represents a description list. The element encloses a list of groups of
terms (specified using the <dt> element) and descriptions (provided
by <dd> elements). Common uses for this element are to implement a
glossary or to display metadata (a list of key-value pairs).
<dt> Specifies a term in a description or definition list, and as such must be
used inside a <dl> element. It is usually followed by a <dd> element;
however, multiple <dt> elements in a row indicate several terms that are
all defined by the immediate next <dd> element.
<figcaption> Represents a caption or legend describing the rest of the contents of its
parent <figure> element.
<figure> Represents self-contained content, potentially with an optional caption,
which is specified using the <figcaption> element. The figure, its caption,
and its contents are referenced as a single unit.
<hr> Represents a thematic break between paragraph-level elements: for
example, a change of scene in a story, or a shift of topic within a section.
<li> Represents an item in a list. It must be contained in a parent element: an
ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In
menus and unordered lists, list items are usually displayed using bullet
points. In ordered lists, they are usually displayed with an ascending
counter on the left, such as a number or letter.
<menu> A semantic alternative to <ul>, but treated by browsers (and exposed
through the accessibility tree) as no different than <ul>. It represents an
unordered list of items (which are represented by <li> elements).
<ol> Represents an ordered list of items — typically rendered as a numbered
list.
<p> Represents a paragraph. Paragraphs are usually represented in visual
media as blocks of text separated from adjacent blocks by blank lines
and/or first-line indentation, but HTML paragraphs can be any structural
grouping of related content, such as images or form fields.
<pre> Represents preformatted text which is to be presented exactly as written
in the HTML file. The text is typically rendered using a non-proportional,
or monospaced, font. Whitespace inside this element is displayed as
written.
<ul> Represents an unordered list of items, typically rendered as a bulleted
list.
INLINE TEXT SEMANTIC

Use the HTML inline text semantic to define the meaning, structure, or style of a word,
line, or any arbitrary piece of text.

<a> Together with its href attribute, creates a hyperlink to web pages, files, email
addresses, locations within the current page, or anything else a URL can
address.
<abbr> Represents an abbreviation or acronym.
<b> Used to draw the reader's attention to the element's contents, which are not
otherwise granted special importance. This was formerly known as the
Boldface element, and most browsers still draw the text in boldface.
However, you should not use <b> for styling text or granting importance. If
you wish to create boldface text, you should use the CSS font-
weight property. If you wish to indicate an element is of special importance,
you should use the strong element.
<bdi> Tells the browser's bidirectional algorithm to treat the text it contains in
isolation from its surrounding text. It's particularly useful when a website
dynamically inserts some text and doesn't know the directionality of the text
being inserted.
<bdo> Overrides the current directionality of text, so that the text within is rendered
in a different direction.
<br> Produces a line break in text (carriage-return). It is useful for writing a poem
or an address, where the division of lines is significant.
<cite> Used to mark up the title of a cited creative work. The reference may be in
an abbreviated form according to context-appropriate conventions related to
citation metadata.
<code> Displays its contents styled in a fashion intended to indicate that the text is a
short fragment of computer code. By default, the content text is displayed
using the user agent's default monospace font.
<data> Links a given piece of content with a machine-readable translation. If the
content is time- or date-related, the<time> element must be used.
<dfn> Used to indicate the term being defined within the context of a definition
phrase or sentence. The ancestor <p> element, the <dt>/<dd> pairing, or
the nearest section ancestor of the <dfn> element, is considered to be the
definition of the term.
<em> Marks text that has stress emphasis. The <em> element can be nested, with
each nesting level indicating a greater degree of emphasis.
<i> Represents a range of text that is set off from the normal text for some
reason, such as idiomatic text, technical terms, and taxonomical
designations, among others. Historically, these have been presented using
italicized type, which is the original source of the <i> naming of this element.
<kbd> Represents a span of inline text denoting textual user input from a keyboard,
voice input, or any other text entry device. By convention, the user agent
defaults to rendering the contents of a <kbd> element using its default
monospace font, although this is not mandated by the HTML standard.
<mark> Represents text which is marked or highlighted for reference or notation
purposes due to the marked passage's relevance in the enclosing context.
<q> Indicates that the enclosed text is a short inline quotation. Most modern
browsers implement this by surrounding the text in quotation marks. This
element is intended for short quotations that don't require paragraph breaks;
for long quotations use the <blockquote> element.
<rp> Used to provide fall-back parentheses for browsers that do not support the
display of ruby annotations using the <ruby> element. One <rp> element
should enclose each of the opening and closing parentheses that wrap
the <rt> element that contains the annotation's text.
<rt> Specifies the ruby text component of a ruby annotation, which is used to
provide pronunciation, translation, or transliteration information for East
Asian typography. The <rt> element must always be contained within
a <ruby> element.
<ruby> Represents small annotations that are rendered above, below, or next to
base text, usually used for showing the pronunciation of East Asian
characters. It can also be used for annotating other kinds of text, but this
usage is less common.
<s> Renders text with a strikethrough, or a line through it. Use the <s> element
to represent things that are no longer relevant or no longer accurate.
However, <s> is not appropriate when indicating document edits; for that,
use the del and ins elements, as appropriate.
<samp> Used to enclose inline text which represents sample (or quoted) output from
a computer program. Its contents are typically rendered using the browser's
default monospaced font (such as Courier or Lucida Console).
<small> Represents side-comments and small print, like copyright and legal text,
independent of its styled presentation. By default, it renders text within it one
font size smaller, such as from small to x-small.
<span> A generic inline container for phrasing content, which does not inherently
represent anything. It can be used to group elements for styling purposes
(using the class or id attributes), or because they share attribute values,
such as lang. It should be used only when no other semantic element is
appropriate. <span> is very much like a div element, but div is a block-level
element whereas a <span> is an inline-level element.
<strong> Indicates that its contents have strong importance, seriousness, or urgency.
Browsers typically render the contents in bold type.
<sub> Specifies inline text which should be displayed as subscript for solely
typographical reasons. Subscripts are typically rendered with a lowered
baseline using smaller text.
<sup> Specifies inline text which is to be displayed as superscript for solely
typographical reasons. Superscripts are usually rendered with a raised
baseline using smaller text.
<time> Represents a specific period in time. It may include the datetime attribute to
translate dates into machine-readable format, allowing for better search
engine results or custom features such as reminders.
<u> Represents a span of inline text which should be rendered in a way that
indicates that it has a non-textual annotation. This is rendered by default as
a simple solid underline but may be altered using CSS.
<var> Represents the name of a variable in a mathematical expression or a
programming context. It's typically presented using an italicized version of
the current typeface, although that behavior is browser-dependent.
<wbr> Represents a word break opportunity—a position within text where the
browser may optionally break a line, though its line-breaking rules would not
otherwise create a break at that location.

You might also like