Elements and Tags
Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
HTML TAGS
HTML Element
After declaring the doctype we provide <html> tag. This is the root element of the document. All other elements that we will add will be its descendants.
lang="en" specifies the language of the text content in that element. In this case, it's English.
Head Element
The <head> element is where we put important meta information about our web pages. It also contains stuff that is used to render our page in a browser.
Title Element
The title element is used to give webpages a human-readable title which is displayed in our web page’s browser tab.
If we didn’t include a title element, the web page’s title would default to its file name. In our case that would be index.html.
Body Element
This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on.
Paragraph Tag
When the browser encounters new lines in the HTML file it will compress them down to a single space. Thus the entire text is clumped together to form a big line.
So paragraph tags can be used to organize the texts.
The paragraph tag adds a new line after each paragraph. The text content is wrapped within <p> tag.
Heading Element
Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings.
There are 6 different levels of heading from <h1> to <h6>.
The number within the heading tag represents the level. Using heading tags is to provide a hierarchy to the content.
i Element
<i> tag is used to change the text font to italic.
Nesting And Indentation
In all examples, we indent an element within another element. This is called nesting.
Nesting help to establish a parent-child relationship between elements. The nested elements are the children and the element they are nested within is the parent.
Line break
Used to create a line break. This tag is a self-closing tag.
Horizontal Line Tag
This creates a horizontal line on the web page. It is used as a divider.
LISTS
Unordered list
Used for creating a list of items where the order doesn't matter.
Unordered lists are created using the <ul> element, and each item within the list is created using the list item element <li>.
Each item begins with a bullet point.
Ordered list
Used for creating a list of items where the order matters.
Ordered lists are created using the <ol> element. Each item in them is again created using the list item element <li>. However, each list item in an ordered list begins with a number instead
Anchor Element
To create a link in HTML we use an anchor element.
An anchor element is defined by wrapping a text within <a> tag. This tag also contains an href attribute.
The value of the href attribute is the destination we want our link to go to.
The browser will give the text a blue color and underline it to signify it is a link.
Images
To display an image in HTML we use the <img> element. Unlike the other elements we have encountered, the <img> element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
Instead of wrapping content with an opening and closing tag, it embeds an image into the page using an src attribute which tells the browser where the image file is located.
Alt attribute
Besides the src attribute, every image element must also have an alt attribute.
The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded.
Tables
<table> is used to define the start of the table.
<th> is used for the heading of the table.
<tr> is used for rows of the table.
<td> is used for columns of the table.
colspan
Used to merge two columns.
rowspan
similar to colspan it used to merge two rows.