Το στοιχείο HTML <body> περιέχει όλο το ορατό περιεχόμενο ενός εγγράφου HTML. Μπορεί να υπάρχει μόνο μία περιοχή <body> ανά έγγραφο HTML.

Τι είναι η ετικέτα HTML <body> και σε τι χρησιμοποιείται;

Το HTML <body> είναι ένα στοιχείο HTML που χρησιμοποιείται για την εμφάνιση του περιεχομένου ενός εγγράφου στους χρήστες. Όλο το ορατό περιεχόμενο, όπως επικεφαλίδες, μπλοκ κειμένου, εικόνες, πίνακες, υπερσύνδεσμοι, λίστες και άλλα στοιχεία, αποθηκεύεται σε αυτήν την ετικέτα HTML. Μπορεί να υπάρχει μόνο ένα HTML <body> σε κάθε έγγραφο. Βρίσκεται πάντα κάτω από την περιοχή <head> και πάνω από το υποσέλιδο HTML. Η ετικέτα <body> υποστηρίζει όλα τα παγκόσμια χαρακτηριστικά HTML.

Ποια είναι η σύνταξη και η λειτουργικότητα του HTML <body>;

Πριν σας δείξουμε πώς λειτουργεί το HTML <body> χρησιμοποιώντας μερικά απλά παραδείγματα, αξίζει να ρίξουμε μια ματιά στη βασική σύνταξη του στοιχείου. Αυτή έχει ως εξής:

<body>This is where all the visible website content is stored.</body>
html

Μόνο το περιεχόμενο μεταξύ των ετικετών εισαγωγής (<body>) και κλεισίματος (</body>) θα εμφανίζεται αργότερα στη σχετική ιστοσελίδα.

HTML <body> παραδείγματα

Στα παρακάτω παραδείγματα, μπορείτε να δείτε πώς χρησιμοποιείται στην πράξη η ετικέτα HTML <body>.

Έγγραφο HTML με <body> απλά στοιχεία

Πρώτα, θα δημιουργήσουμε ένα απλό έγγραφο HTML με έναν τίτλο, ένα τμήμα κειμένου και μια εικόνα, τα οποία τοποθετούνται όλα στο σώμα του εγγράφου. Αυτός είναι ο αντίστοιχος κώδικας:

<html>
<head>
<title>HTML body in a document</title>
</head>
<body>
<h1>Here’s your heading</h1>
<p>Here’s your website content.</p>
<img src="example.jpg" alt="Here’s an image">
</body>
</html>
html

Δημιουργία γραμμής πλοήγησης με href

Το παρακάτω παράδειγμα σας δείχνει πώς να δημιουργήσετε μια γραμμή πλοήγησης για τον ιστότοπό σας χρησιμοποιώντας την ετικέτα HTML <body> και το χαρακτηριστικό href. Ακολουθεί ο κώδικας:

<html>
<head>
<title>Website with a navigation bar</title>
</head>
<body>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
<section id="home"><h2>Home</h2></section>
<section id="about"><h2>About</h2></section>
<section id="contact"><h2>Contact</h2></section>
</body>
</html>
html

Ενσωμάτωση βίντεο μέσω της ετικέτας HTML <body>

Αν θέλετε να ενσωματώσετε ένα βίντεο στον ιστότοπό σας, η ενότητα <body> είναι το σωστό (και μοναδικό) μέρος για να το κάνετε. Ακολουθεί ένα παράδειγμα για το πώς να ενσωματώσετε ένα βίντεο:

<html>
<head>
<title>Website with a video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="example-film.mp4" type="video/mp4">
</video>
</body>
</html>
html

Αλλαγή του σχεδιασμού του περιεχομένου μέσω της ετικέτας HTML <body>

Με τη βοήθεια του CSS, μπορείτε επίσης να χρησιμοποιήσετε την περιοχή <body> για να προσαρμόσετε το σχεδιασμό του περιεχομένου του ιστότοπού σας. Μπορείτε να δείτε πώς λειτουργεί αυτό στο ακόλουθο παράδειγμα:

<html>
<head>
<title>HTML body with visual adjustments</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #BFEFFF;
}
h1 {
color: black;
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p>Here’s your website content.</p>
</body>
</html>
html

Προσαρμογή φόντων σε HTML <body>

Αν θέλετε να αλλάξετε το φόντο HTML με CSS, μπορείτε επίσης να το κάνετε στο HTML <body>. Δείτε πώς μπορείτε να ορίσετε το χρώμα φόντου:

<html>
<head>
<title>HTML body with new background colour</title>
<style>
body {
background-color: #BFEFFF;
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p><a href="https://www.example-website.com">Visit example-website.com!</a></p>
</body>
</html>
html

Για να εισαγάγετε μια εικόνα, χρησιμοποιήστε τον παρακάτω κώδικα:

<html>
<head>
<title>HTML body with new background image</title>
<style>
body {
background-image: url(example.png);
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p><a href="https://www.example-website.com">Visit example-website.com!</a></p>
</body>
</html>
html
Go to Main Menu