4.17. Introduction to HTML: Basic structure, tags and attributes: CSS Selectors

Introduction to HTML

HTML, which stands for Hyper Text Markup Language, is the standard markup language for creating web pages and applications. Along with CSS and JavaScript, HTML is a fundamental technology used on most websites. HTML provides the structure of a web page, while CSS styles this structure and JavaScript allows for interactivity on the page.

Basic structure of an HTML document

An HTML document has a tree structure, which starts with a root element <html>. This element contains two child elements: <head> and <body>. The <head> contains metadata about the document, while the <body> contains the main content of the document.

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    Page content...
  </body>
</html>

HTML Tags and Attributes

HTML tags are used to define HTML elements. Each HTML tag begins with the angle bracket (<) and ends with the angle bracket (>). Most HTML tags have an opening tag and a closing tag, with content in between. For example, <p>Text</p>.

HTML attributes are used to provide additional information about elements. They are always specified in the opening tag and usually come in name/value pairs. For example, <a href="https://www.example.com">Link</a>.

Introduction to CSS Selectors

Cascading Style Sheets (CSS) is a style sheet language used to describe the appearance of a document written in HTML. CSS describes how HTML elements should be displayed, controlling the layout of multiple pages at once.

CSS Selectors

CSS selectors are used to select the HTML elements you want to style. There are several types of CSS selectors, including type selectors, class selectors, ID selectors, attribute selectors, and more.

  • Type Selectors: Select elements based on the element type. For example, 'p' will select all elements <p>.
  • Class Selectors: Select elements based on class attribute. For example, '.intro' will select all elements with class="intro".
  • ID Selectors: Select elements based on the ID attribute. For example, '#firstName' will select the element with id="firstName".
  • Attribute Selectors: Select elements based on an attribute or attribute value. For example, '[target="_blank"]' will select all elements with target="_blank".

To conclude, HTML, CSS and JavaScript are essential technologies for becoming a front-end developer. Learning the basic structure of HTML, HTML tags and attributes, and CSS selectors is the first step towards becoming a professional web developer. The next step is to learn how to use JavaScript to add interactivity to your web pages.

Now answer the exercise about the content:

What is the function of CSS selectors?

You are right! Congratulations, now go to the next page

You missed! Try again.

Article image Introduction to HTML: basic structure, tags and attributes: CSS properties and values

Next page of the Free Ebook:

22Introduction to HTML: basic structure, tags and attributes: CSS properties and values

4 minutes

Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou App Store !

Get it on Google Play Get it on App Store

+ 6.5 million
students

Free and Valid
Certificate with QR Code

48 thousand free
exercises

4.8/5 rating in
app stores

Free courses in
video, audio and text