Description and Basic Syntax
Last updated
Was this helpful?
Last updated
Was this helpful?
gives content structure and meaning
headings, paragraphs, images, etc.
represents the skeleton of a webpage
Tags - HTML tags are keywords that define how a web browser should display the content of a web page. They are enclosed in angle brackets (< >) and usually come in pairs, with an opening tag and a closing tag. Ex: <html> <a> <p> <h1>. Some self-closing tags: <img>, <br>, <hr>, <input>.
Elements - They are the individual components of a webpage. They are defined by start and end tags, and the text between the tags is the content of the element. HTML elements can be nested within each other to create complex structures.
Attributes - HTML attributes are special keywords that provide additional information about HTML elements. They are always specified in the start tag of the element, and they usually come in name/value pairs. Ex: id, class, href, src
A few examples:
the anchor element:
<a></a>
the div element:
<div></div>
the href attribute:
<a href="http://www.facebook.com">Facebook</a>
the class attribute:
<p class="quote">Eppur si muove</p>
the img element with the src attribute:
<img src="https://example.com/logo.jpg">
act as containers for the page content
help divide the page
no meaning or semantic value
exist only for styling purposes
Creating Hyperlinks:
used to link resources and pages
identified by the href attribute
relative paths to links pointing to other pages on the website
absolute paths to pages outside your domain
using the inline element
the <img> element doesn’t wrap any other type of content
the src attribute is needed to specify the source of the image
can also take the alt attribute
can also be added using the background-image property in CSS
background-image is mainly used when the image is not relevant to the content of the page
begin on new lines
occupy any available width
respect left, right top & bottom margins and padding
Examples:
<div>, <p>
<form>
<h1> ... <h6>
<ol>, <ul>, <li>
start anywhere in a line
maintain the width of their content
respect left & right margins and padding, but not top & bottom
cannot have a width and height set
Examples:
<span>
<a>
<img>
<input>, <button>
<b>, <i>, <ul>
<br>
allow other elements to sit to their left and right
respect top & bottom margins and padding
respect height and width
There are no inline-block default HTML elements. However, some HTML elements such as: <a>, <button>, <input>, <select>, <textarea>, can be displayed inline-block by setting their display property to inline-block using CSS, which we'll discuss later.
New in HTML 5. Provide semantical value to containers. Using semantic structural elements in HTML5 makes your code more readable and maintainable, and it also helps search engines and assistive technologies to understand the content of your page. They are block elements.
Examples:
<header> top of the web page (introduction to the page, navigation)
<navigation> primary navigation menus
<article> independent self-contained content
<section> used to break up a page based on thematic content
<aside> mainly used for sidebars or menus
use semantic elements as much as you can
make sure you use the DOCTYPE declaration
indentation makes the code readable
inline styles are almost never a good idea
use the id and class attributes to identify elements. The id and class attributes can be used to identify elements in your HTML code. This can be useful for styling elements with CSS and for scripting elements with JavaScript.
use comments to explain your code.
validate your HTML code. HTML validation is the process of checking your HTML code for errors. There are many different HTML validators available, both online and offline. Validating your HTML code can help you to identify and fix errors before you publish your web pages.
