HTML can be broken down into these four components.
Elements are the basic structure of an HTML document.
Like other markup languages, HTML uses brackets like this: < > to divide content and tags. Tags tell the browser what to do with the content. Some elements have an open tag and closing tag.
The content always goes in between the tag. This can include text, other forms of media and other HTML elements.
Inside of the tags we can also add attributes which add information or functionality to elements with a name and value pair.
HTML elements are nested inside each other to create simple and complex structures. If an HTML tag is opened inside of another HTML tag, it must be closed before it's parent tag is closed.
The basic structural tags of HTML include
doctype, html, head and
doctype tells the browser what type of document it is reading.
html is a wrapper for the all of the content in the document.
head contains information that is invisible to the user, such as meta information about the page, links to style sheets and scripting, and other functionality.
body contains all of the content and structure that goes on the page.
div is a basic element that stand for division. It is used as a neutral building block for position and creating hierarchy with a page.
Tags for text include:
h1, h2, h3, h4, h5, h6are headings, such as the title of these slides, the higher the number the smaller the font and weight
pis the paragraph tag, which is used to organize most text
em, strongare style tags, emphasis for italics and strong for bold.
ul, ol, liare used to create lists such as this one.
ulis unordered list, which makes a list with bullets.
olis ordered, for numbers.
liis a list item. They are useful for navigation menus.
ais the anchor tag, for hypertext links. It requires the
hrefattribute to hold the location or URL of the link. It also takes the
targetattribute to determine where to open the link, such as
"blank"for a new window.
imgis the tag to add an image to a web page. It takes the attribute
srcwhich contains the location of the image, such as
There are many other tags we will explore throughout the semester for structure, advanced media and other functionality.