An HTML element is a unit of content in an HTML document that is formed using HTML tags.
The basic structure of an element is composed of 4 key items, one of which is optional.
<p class="dog-breed">This is my paragraph tag in HTML.</p>
- The opening tag is the first HTML tag used to start an element.
- The content is the info contained between the opening and closing tags. Only this content inside the opening and closing body tags is displayed to the screen.
- The closing tag is the second tag used to define the end of a single element. Closings tags have a forward slash / inside of them, always after the left angle bracket.
- (Optional) The attribute name and value.
2 Types of HTML Elements
Block elements – meant to structure the main parts of your page, by dividing your content in coherent blocks.
- unordered (with bullet points)
- ordered – lists (with numbers)
- unordered (with bullet points)
- headings: from 1st level
<h1>to 6th level headings –
- long quotes
Inline elements – differentiate part of a text, to give it a particular function or meaning. Inline elements usually comprise a single or few words.
- emphasized words
- important words
<li> list item
<ul> unordered list
<ol> ordered list
All HTML elements can have attributes. Attributes provide additional information about an element, and are always specified in the start tag. Attributes usually come in name/value pairs like
- The “source” (URL or file location) from where an image is taken through the
- The image’s alternative text (often a description for those with accessibility needs) is provided through the
- The image size can be adjusted through the
- Images are self-closing – you add a slash at the end, instead of another
</img>tag as we have seen before
<img src="images/nefertiti.jpg" alt="A smiling Labrador Retriever" width="480" height="320" />
- inline elements written with the
hrefattribute (hypertext reference) is used to define the destination of the link (where you navigate to when you click).
There are 3 types of destinations you can define:
- anchor targets, to navigate within the same page
- relative URLs, usually to navigate within the same website
- absolute URLs, usually to navigate to another website
You can also use additional attributes besides
- specify the relationship between the current and linked document with the
- specify where to open the linked document with the
<a href="https://thelabradorclub.com" rel="noopener" target="_blank" >Join The Labrador Retriever Club</a>
A comment starts with
<!-- and ends with
<!-- line-break --> <br /> <!-- image --> <img src="https://dog.com/image.png" alt="Description" /> <!-- text input --> <input type="text" />
DOM – Document Object Model
The branches and nodes of the web.
Branching out elements, hierarchal
Creating HTML File
Start with a declaration:
<!DOCTYPE html> <html> <head> <!-- We put Metadata in the head tag --> <title>This is the title that shows on the browser's tab.</title> </head> <body> <!-- This is the body, where everything will be displayed on the website. --> </body> </html>
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.
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 hierarchy.
Structure elements allow you to organize the main parts of your page. They usually contain other HTML elements.
<header>as the first element of the page, that can include the logo and the tagline.
<nav>as a list of links that go to the different pages of the website.
<h1>as the title of the page.
<article>as the main content of the page, like a blog post.
<footer>as the last element of the page, located at the bottom.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My First Template</title> <meta name="description" content="A webpage with my first HTML template." /> </head> <body> <p>Hello World!</p> </body> </html>
<form></form> <!-- A text input --> <input type="text" /> <!-- A checkbox --> <input type="checkbox" /> <!-- A radio button --> <input type="radio" />
<label for="color-select">Choose a color:</label> <select id="color-select"> <option value="">--Please choose an option--</option> <option value="blue">Blue</option> <option value="red">Red</option> <option value="green">Green</option> <option value="yellow">Yellow</option> <option value="orange">Orange</option> <option value="pink">Pink</option> </select>
Text Area – creates a more free-form text field for the user to enter information.
<label for="learn">What do you hope to learn today?</label> <textarea id="learn" name="learn" rows="5" cols="30"> I hope to learn about... </textarea>
Debugging HTML is great practice for writing quick and optimized HTML, and requires practice as much as any information you can learn.