HTML(Hyper Text Markup Language) Serves as the
building blocks or the skeleton of all web pages. It provides
structure to the content on a website, including text, images,
buttons, videos, forms and more.
When working with HTML, it is common to see the following structure
or pattern when creating the webpages structure.
HTML Element: Is a unit of content in an HTML
document formed by HTML tags and the text or media it contains.
The Opening Tag: The element name used to start
an HTML element. The tag type is surrounded by opening and closing
angle brackets
The Content: The information (text or other
elements) contained between the opening and closing tags of an
HTML element.
The Closing Tag: The second HTML tag used to end
an HTML element. Closing tags have a forward slash (/) inside of
them, directly after the left angle bracket.
See the below example:
The Basics
<!DOCTYPE html>: HTML files require certain
elements to set up the document properly. We can let web browsers
know that we are using HTML by starting our document with a document
type declaration.This declaration is an instruction, and it must be
the first line of code in your HTML document. It tells the browser
what type of document to expect, along with what version of HTML is
being used in the document. When saving documents as HTML files the
files will need to have an extension like so: filename.html
The <html> Tag: To create HTML structure and
content, we must add opening and closing <html> tags after
declaring <!DOCTYPE html>.Anything between the opening
<html> and closing </html> tags will be interpreted as
HTML code. Without these tags, it’s possible that browsers could
incorrectly interpret your HTML code.
The <head> Element: The <head> element
contains the metadata for a web page. Metadata is information about
the page that isn’t displayed directly on the web page. Unlike the
information inside of the <body> tag, the metadata in the head
is information about the page itself.The <head> element is
nested directly after your opening <html> tag.
The <meta> Element: The <meta> element
is used within the <head> element to store relevant data
information about your page. It is typically used to specify
character set, page description, keywords, author of the document,
and viewport settings.
The <title> Element: Is the name of your
webpage. A common place to see this in action is on the tab of your
browser's webpage. These tags must always be nested within the
<head> tag.
The <link> Element: The link element allows
us to link to files outside of our .html file. For example you can
use the <link> tag to link to a CSS stylesheet.
The <body> Element: Only content inside the
opening and closing body tags can be displayed to the screen.Once
the file has a body, many different types of content including text,
images, and buttons can be added to the body.
The HTML Structure: HTML is organized as a family
tree, or if you prefer, containers. When an element is contained
inside another element, it is considered the child of that element.
The child element is said to be nested inside of the parent element.
Since there can be multiple levels of nesting, this analogy can be
extended to grandchildren, great-grandchildren, and beyond. The
relationship between elements and their ancestor and descendent
elements is known as a hierarchy.
See the below example: In this example the
<body> element is the parent of the <div> element. Both
the <h1> and <p> elements are children of the
<div> element. Because the <h1> and <p> elements
are at the same level, they are considered siblings and are both
grandchildren of the <body> element.
Common HTML ElementsSemantic HTML ElementsReference
